How to Use Bootstrap in React Js

You should learn How to use bootstrap in react Js. Because, With the help of it, you can create a responsive react app that will adjust perfectly in all types of screen sizes.

If you use bootstrap with react app, then you can add its predefined user-friendly style using the class name. Even you can override its style by writing your own custom CSS properties.

In this tutorial, you will know to use two bootstrap libraries stey by step. the first is taken from getbootstrap.com and the second from react-bootstrap.github.io.

Both libraries are the most popular library that is frequently used in react app. So, you should learn both and use one of them which will be easy for you.

Learn more –

How to create Charts in React Js

How to use CSS in React Js

Table of Contents

Use Bootstrap in React App

You can use bootstrap by including its CDN links directly in index.html that remains in the public folder of react app. But you will have to just define className instead of class within the react element.

You can also include bootstrap through the following steps without using its CDN Links in index.html –

1. Install Bootstrap CDN Using NPM

First of all, you have to install latest Bootstrap CDN by running this npm command on your project root directory-

npm install bootstrap

If you need to install a specific version then you can run this command –

npm install bootstrap@4.1.1

2. Import Bootstrap CDN in Component

Then, you have to import bootstrap CDN in your component like

File Name – App.js

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

3. Use Bootstrap Class

Now, You can use bootsrap class within the className attribute –

File Name – App.js

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
function App(){
 return <button className="btn btn-danger">Signup</button>
}

4. Render component

By default App.js is included in index.js . If define your own component, then you have to import it in this file

File Name – index.js

import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
<App /> ,
  document.getElementById('root')
);

5. Run React App to see styles

After that, You have to start development server by running npm start in your terminal to see the style of the used bootstrap classes

Use React-Bootstrap

You should use the React-Bootstrap that styles are defined in the form of components and you can only a specific component that is required for your custom component. So, It very easily to use for styling our components quickly.

Here I will show an example by using its button component. you can also learn more style components from the official React-Bootstrap website.

1. Install react-bootstrap

First of all, Install react-bootstrap using npm by running this command –

npm install react-bootstrap

If you need to install its specific version then you can run this command –

npm install react-bootstrap bootstrap@4.6.0

2. Import react-bootstrap

You should import only the component that is required to define in your component. So that your app will be faster

Suppose, we have to create a button then we have to import Button component like –

File Name – App.js

import Button from 'react-bootstrap/Button';

3. Use react-bootstrap component

Now, You can use Button component in your custome component like –

import Button from 'react-bootstrap/Button;

function App(){
 return <Button variant="primary">Primary</Button>
}

4. Render Component

Make sure App.js is imported in index.js with these lines of code –

import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
<App /> ,
  document.getElementById('root')
);

5. Run React App to see Styles

You can see the style effect of react-bootstrap after starting development server using npm start command