Today we’ll show you how to add bootstrap in React. There are multiple ways to import bootstrap in react project but we will refer only standard package managers to install bootstrap in ReactJS.

You can also use some other packages such as reactstrap, React Bootstrap, etc.

Steps to add bootstrap in React

1. Create a react application
2. Install bootstrap package
3. Create component using bootstrap
4. Output

1. Create a react application

First, we have to create a simple react application using the create-react-app npm package. Run the following command to set up a react application.

2. Install bootstrap package

Here, we will use the bootstrap npm package to import bootstrap in react application. Run the following command to install bootstrap.

After successful installation, you can import CSS or JS in the topmost component of the application. We suggest you import bootstrap CSS at the beginning of your src/index.js file.

Refer the following link to get more information about this package.

Bootstrap Installation

3. Create component using bootstrap

For demonstration, we will use bootstrap in App.js file to create a simple card. Let’s copy the bootstrap card code from here.

App.js

4. Output

Run the application and check the output in the browser.

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code