CODEWITHSUNDEEP
reactjsstyled-components
prajeesh
prajeesh

Reputation: 2382

Using bootstrap classes with reactjs styled components

Currently the code is as follows

 <PageWrapper className="row">
    <div className="col-xl-4 col-md-6 nopadding">
      <List locationList={sampleLocationList}
        onTableRowClicked={this.getSelectedLocation}
        selectedLocation={this.state.selectedLocationInfo} />
    </div>
  </PageWrapper>

Basically i am using bootstrap class names to get the styles. Is this the correct approach?

How to use bootstrap styles in styled components?

Upvotes: 1

Views: 2415

Answers (1)

Dipak Dendage
Dipak Dendage

Reputation: 648

You can use react bootstrap library in your application Check below sample code 

import React, { Component } from 'react';
import { Form, FormGroup, Col, FormControl, Button } from 'react-bootstrap';

import './User.css';

class User extends Component {

    constructor(props, context) {

    }

    render() {
        return (
            <div className="User-form">
                <Form horizontal>
                    <FormGroup controlId="formHorizontalName">
                        <Col className="control-label" sm={2}>
                            Name
                        </Col>
                        <Col sm={10}>
                            <FormControl type="text" placeholder="Name" value={this.state.userName} required />
                        </Col>
                    </FormGroup>

                    <FormGroup controlId="formHorizontalEmail">
                        <Col className="control-label" sm={2}>
                            Email
                    </Col>
                        <Col sm={10}>
                            <FormControl type="email" value={this.state.userEmail} placeholder="Email" required />
                        </Col>
                    </FormGroup>
                    <FormGroup>
                        <Col sm={12}>
                            <Button type="submit" bsStyle="primary">Submit</Button>
                        </Col>
                    </FormGroup>
                </Form>
            </div>
        );
    }
}

export default User;

Reference React bootstrap

Also, you can define custom css, I have defined one class with a name User-form and placed css code inside User.css file

Upvotes: 1

Related Questions