Install Bootstrap In React

In this blog, we will learn how to add React Bootstrap to our project.

Installation

The easy and best way to add Bootstrap in react is npm, using npm we can easily install bootstrap. we can also install using yarn. using the below npm command we will install bootstrap it also knows as React-Bootstrap.

npm install react-bootstrap bootstrap

when installation is done open the “index.js” file and write down the below line at the top of the file.

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

The above line can be added to the App.js file also.

That’s it! now we can use bootstrap class in our pages anywhere. as an example below, I added few bootstrap buttons in the App.js file to check bootstrap class is working or not.

<button type="button" className="btn btn-warning ml-3"> Warning Button</button>
<button type="button" className="btn btn-primary ml-3"> Primary Button</button>
<button type="button" className="btn btn-success ml-3"> Success Button</button>

Hope you guys found something useful. Please give your valuable feedback/comments/questions about this article. Please let me know how you like and understand this article and how I could improve it.