ReactJS

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.

How to install bootstrap in react
How to install bootstrap in react?

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";
import scss in app.scss
import SCSS in App.scss

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

Example of react bootstrap class
Example of react bootstrap class
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;

How to install SCSS in react?

$ npm install sass
# or
$ yarn add sass

To use Sass, first install sass:

Now you can rename src/App.css to src/App.scss and update src/App.js to import src/App.scss. This file and any other file will be automatically compiled if imported with the extension .scss or .sass.

How to uninstall SCSS in react?

$ npm uninstall node-sass
$ npm install sass
# or
$ yarn remove node-sass
$ yarn add sass