How to install bootstrap in react?

In this reactjs tutorial for beginners we learn how to install React-Bootstrap is via the npm package in react js. Learn how to include React Bootstrap in your project.

npm install react-bootstrap bootstrap

The best way to install React-Bootstrap is via the npm package which you can install with npm.

Importing Stylesheets

How to include stylesheet is required to use these components. Bellow is the way of include the CSS in your project.

import 'bootstrap/dist/css/bootstrap.min.css';

For Sass

The following line can be included in a src/App.scss

@import "~bootstrap/scss/bootstrap";

CSS/SCSS/SASS
The following line can be included in your src/index.js or App.js file

Importing Components

How to use bootstrap components and class in your project. First You should import components in your file and use the bootstrap classes.

import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';

You should import individual components like: react-bootstrap/Button rather than the entire library.

You should import only required components in file rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the amount of code you end up sending to the client.

How to include React Bootstrap in your project

For creating bootstrap project needs bootstrap classes for creating structure. In react for every component first needs to be initialize that component in file and then use the class of that components. Below is the example of bootstrap container, row and col class.

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

Example of bootstrap classes

import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
function Login () {
    return (
        <div className="App">
            <Container>
                <Row>
                    <Col>
                        <h1>Left Col</h1>
                    </Col>
                    <Col><h1>Right Col</h1></Col>
                </Row>
            </Container>
        </div>
    );
}
export default Login;