How to use Bootstrap with React?

When building a powerful web application, you are undoubtedly aware that Bootstrap and ReactJS continue to be the most popular choice. Using native Bootstrap with ReactJS is not as easy as it seems; however, different methods can be used.

Why is it challenging to include Bootstrap components with React?

React is a simple library that creates interactive front end web pages, with a component-based architecture that can be nested or put side by side. Hence, adding third party libraries to React is easy.

However, Bootstrap relies heavily on jQuery for powering its user interface components. Since jQuery manipulates the Document Object Model (DOM) directly, Bootstrap contradicts the declarative approach inherent to React. If you are looking to include a vanilla Bootstrap stylesheet with a responsive 12 column grid or components that do not involve jQuery, you can add those components to React with ease. However, components that rely on jQuery cannot be integrated in such a manner.

Hence, to use Bootstrap with ReactJS, there must be a way to remove Bootstrap’s jQuery dependency.

How to use Bootstrap with ReactJS?

Option 1: Including raw CSS Bootstrap files into ReactJS

The first option to use Bootstrap with ReactJS is to include raw CSS Bootstrap files with ReactJS.

1. Create a new default Create React App project in Your system using the following command:

npx create-react-app my-project

The above command creates the project using the base template. To create the project using other available templates, execute the following command:

npx create-react-app my-project –template [template-name]

You can find a list of available templates by searching for “cra-template-*” on npm. Templates are usually named in the format “cra-template-[template-name]. Simply enter the desired template name into the command above.

2. Run the new project using the following commands

Navigate to the new project using the following command:

cd my-project

Start npm using the following command:

npm start

3. Link the Bootstrap stylesheet to ReactJS.

Install Bootstrap using the following command:

npm install bootstrap

Include the following code in your src/index.js or App.js file of the  create-react-app package:

import “bootstrap/dist/bootstrap.min.css”;

You can now use Bootstrap classes with ReactJS code after the Bootstrap stylesheet is successfully integrated into a React app.

To best use ReactJS, it would be ideal to import Bootstrap classes as React components. Luckily, this is done by utilizing third-party libraries like react-bootstrap and reactstrap, to do so.

Option 2: Using the react-bootstrap library

The react-bootstrap library is one of the most used libraries that replaced Bootstrap JavaScript and has been built from scratch as a true React component, by removing jQuery dependencies. The latest version of the library only supports Bootstrap v4.

Installing the react-bootstrap library

To use the library, you can install it using the following command:

npm install react-bootstrap bootstrap

Using the components of react-bootstrap

To use the components, simply import individual components like react-bootstrap/Button instead of the entire library. This ensures that you only pull the components you use, thus reducing the code you send to the client.

import Button from “react-bootstrap/Button”;

The available components are alerts, accordion, badge, breadcrumb, buttons, button group, cards, carousel, dropdowns, forms, input group, images, figures, jumbotron, list group, modal, navs, navbar, overlays, pagination, popovers, progress, spinners, table, tables, tooltips, and toasts.

Importing Stylesheets

While react-bootstrap does not necessarily depend on a very precise version of Bootstrap, some stylesheet is still required to use these components. Run the following command:

npm install bootstrap

Now, you can include the following code in your src/index.js or App.js file:

import “bootstrap/dist/css/bootstrap.min.css”;

Sass

If you are using Sass, make sure you install the node-sass package. You can then include Bootstrap’s source Sass files in your main Sass file. This is applicable to the typical create-react-app application. Include the following code in your src/App.scss file.

import “~bootstrap/scss/bootstrap”;

Option 3: Using the reactstrap library

The reactstrap library has specifically been created for use with Bootstrap v4, and it allows you to import relevant Bootstrap components into your ReactJS project.

Installing the reactstrap library

To use the library, you can install it using the following command:

npm install reactstrap react react-dom

Using the components of reactstrap

To use the relevant components, you can simply import the required components instead of the entire library. This ensures that you only pull the components you use, thus reducing the code you send to the client. For example:

import { Button } from ‘reactstrap’;

The available components are alerts, badge, breadcrumbs, button dropdown, button group, button, card, carousel, collapse, dropdowns, fade, form, input group, jumbotron, layout, list group, media, modals, navbar, navs, pagination, popovers, progress, spinners, tables, tabs, toasts, and tooltips.

Importing Stylesheets

To make the library work as expected, you need to add the Bootstrap CSS manually. Run the following command:

npm install bootstrap

And, import Bootstrap CSS into your reactstrap’s src/index.js file by including the following code:

import “bootstrap/dist/css/bootstrap.css”;

Option 4: Other Third-party Modules

There are additional options to react-bootstrap and reactstrap that can be used to effectively use new Bootstrap like components with ReactJS. Examples include the likes of react-bootstrap-table2, a rebuild of react-bootstrap-table.

As the name suggests, react-bootstrap-table2 is used explicitly for creating dynamic tables for web applications. As the name is already taken on npm, the installation of this module requires running the following command:

npm install react-bootstrap-table-next

After installation, you need to add the react-bootstrap-table2 CSS into your application before using the module. Add the following code before you use the module:

import “react-bootstrap-table-next/dist/react-bootstrap-table2.min.css”;

Conclusion

The option you use to include Bootstrap with ReactJS depends on the version of Bootstrap you are using, the kind of components required, and the flexibility you desire.

Also, if you want to get inspired, you should check this article that contains a useful list of ReactJS project examples for 2020.

PS. Check out these templates offered by Creative Tim!