React Bootstrap

Bootstrap as Dependency

If we are using a build tool or a module bundler such as Webpack, then importing Bootstrap as dependency is the preferred option for adding Bootstrap to the React application. We can install Bootstrap as a dependency for the React app. To install the Bootstrap, run the following commands in the terminal window.

Once Bootstrap is installed, we can import it in the React application entry file. If the React project created using the create-react-app tool, open the src/index.js file, and add the following code:

Now, we can use the CSS classes and utilities in the React application. Also, if we want to use the JavaScript components, we need to install the jquery and popper.js packages from npm. To install the following packages, run the following command in the terminal window.

Next, go to the src/index.js file and add the following imports.

Now, we can use Bootstrap JavaScript Components in the React application.

React Bootstrap Package

The React Bootstrap package is the most popular way to add bootstrap in the React application. There are many Bootstrap packages built by the community, which aim to rebuild Bootstrap components as React components. The two most popular Bootstrap packages are:

1. react-bootstrap: It is a complete re-implementation of the Bootstrap components as React components. It does not need any dependencies like bootstrap.js or jQuery. If the React setup and React-Bootstrap installed, we have everything which we need.
2. reactstrap: It is a library which contains React Bootstrap 4 components that favor composition and control. It does not depend on jQuery or Bootstrap JavaScript. However, react-popper is needed for advanced positioning of content such as Tooltips, Popovers, and auto-flipping Dropdowns.

React Bootstrap Installation

Let us create a new React app using the create-react-app command as follows.

After creating the React app, the best way to install Bootstrap is via the npm package. To install Bootstrap, navigate to the React app folder, and run the following command.

Importing Bootstrap

Now, open the src/index.js file and add the following code to import the Bootstrap file.

We can also import individual components like import { SplitButton, Dropdown } from 'react-bootstrap'; instead of the entire library. It provides the specific components which we need to use, and can significantly reduce the amount of code.

In the React app, create a new file named ThemeSwitcher.js in the src directory and put the following code.

Now, update the src/index.js file with the following snippet.

Index.js

Output

When we execute the React app, we should get the output as below.

Click on the dropdown menu. We will get the following screen.

Now, if we choose the Success Theme, we will get the below screen.

Using reactstrap

Let us create a new React app using the create-react-app command as follows.

Next, install the reactstrap via the npm package. To install reactstrap, navigate to the React app folder, and run the following command.

Importing Bootstrap

Now, open the src/index.js file and add the following code to import the Bootstrap file.

We can also import individual components like import { Button, Dropdown } from 'reactstrap'; instead of the entire library. It provides the specific components which we need to use, and can significantly reduce the amount of code.

In the React app, create a new file named ThemeSwitcher.js in the src directory and put the following code.

Now, update the src/index.js file with the following snippet.

Index.js

Output

When we execute the React app, we should get the output as below.

Click on the dropdown menu. We will get the following screen.

Now, if we choose the Danger Theme, we will get the below screen.