How to add Bootstrap to your React project!

React + Bootstrap 4 Starter

How to “install” and use Bootstrap 4 with ReactJs

I’ve recently seen a lot of questions on Stack Overflow with developers trying to figure out how to use the latest Bootstrap 4 with React. Here are a few options for you if you’re facing this challenge. All the options below are based on a simple ReactJs app using create-react-app.

Bootstrap CSS only

Option 1

If you only require the bootstrap.css, the easiest method is to reference Bootstrap on CDN (or a local relative path) on the HEAD section of the create-react-app public/index.html file. This will include Bootstrap CSS globally in your app (on all “pages”) since index.html is the React App container.

Reference the CSS only in React public/index.html

Option 2

Or, you can import Bootstrap CSS in the React App using JavaScript. For this method you will need to include Bootstrap in the dependencies section of package.json file…

Then, import only the Bootstrap CSS. This will most likely live in your React apps’ entry point such as the index.js or app.js file…

Import Bootstrap CSS via React JS

Bootstrap Complete (JS and CSS)

Most likely, if you’re using Bootstrap, you’ll want to also take advantage of the various Bootstrap JavaScript components too. In this case, there a 2 options.

Option 1

Simply add Bootstrap CSS and JS references to the React public/index.html create-react-app “container” file….

Reference Bootstrap in React public/index.html

Here is a Codesandbox React starter app that demonstrates this “index.html reference” method:

Option 2

Or, you can import Bootstrap in the React App using Javascript. For this method you will need to include Bootstrap in the dependencies section of the NPM package.json file. Bootstrap 4 JS depends on jQuery and popper.js so you’ll need to add these too…

Next, import the Bootstrap CSS and Javascript in React. Notice that the following comment is used after import bootstrap from “bootstrap”; to prevent the React build warnings…

// eslint-disable-line no-unused-vars

Import Bootstrap in React JS

Here is a Codesandbox React starter app that demonstrates this 2nd “import Bootstrap in JS” method:

An important thing to note is that to utilize the Bootstrap JavaScript components you will need to use jQuery in the React App.

This is not a recommended practice since both React and jQuery manipulate the DOM. To avoid this consider using another framework such as react-bootstrap instead of bootstrap.js which does require jQuery. In the future, Bootstrap 5 will not have the jQuery dependency, so Bootstrap and React integration will be improved.

That’s what you need to know you use Bootstrap with React JS! For more helpful React + Bootstrap 4 examples checked out the GitHub repo at: https://github.com/themesguide — or visit Themes.guide

❤