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.
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…
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….
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
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
❤