ReactJS - How to include Bootstrap V4 the right way

4 min readDec 26, 2018

What does it mean to use bootstrap the right way? One thing really:

Declare your own variables where required.

So instead of inheriting the values that bootstrap ships with and having to re-declare them in your own stylesheet, you define them once before they’re compiled and your app inherits them thereafter, saving you bloat and keeping your stylesheets clean. So let’s get started.

Current version

As of writing this article, the current versions used are as follows:

React: 16.6.3
create-react-app: 2.1.2
Bootstrap: 4.1.3

Right so the first thing you need to do is create a new react project, I’m assuming you have npm installed but if not you can get it here, if you have an existing create-react-app project you can skip this step:

Create a new ReactJS project

Run the following commands to create a new react project, *documentation:

npx create-react-app my-app
cd my-app
npm start

Once above done, open http://localhost:3000/ in your browser to see your new app in action:

Add SASS support

You will need Sass support in your app to import the bootstrap variables. Follow this excellent article or this great one to get up and running quick then return here.

Add Bootstrap support

Once above done, runnpm install bootstrap or if you prefer Yarn runyarn add bootstrap.

Once you have Bootstrap installed there are 2 new files you will need to create in your /src folder: bootstrap.scss andvariables.scss.

Now go to your node_modules folder: /node_modules/bootstrap/scss. There are 2 files we’re interested in:

/node_modules/bootstrap/scss/bootstrap.scss
/node_modules/bootstrap/scss/_variables.scss

Copy both files into our project

Copy the contents of bootstrap.scss and paste them into src/bootstrap.scss. Then add the following prefix to all of your imports "~bootstrap/scss/ so all your imports look like the below screenshot, do this for all accept @import “variables”; which will import the local file:

Now your bootstrap.scss file should now look like this

You can comment out the imports you wont be needing in your app to save bloat and reduce the size and complexity. In this example we’ve imported all of them.

Next copy all the contents of _variables.scss and paste them into your src/variables.scss. This file should have about 950 lines of code and it is where bootstrap defines all it’s variables.

Next integrate our newly created files into our app

In index.js add this line import './bootstrap.scss';

That’s it we’re all done with our imports, you’ve now integrated bootstrap Sass so let’s test it by changing the button component, we’ll modify the bg-primary color and the border-radius value of the button tag. We do all this in src/variables.scss.

Change the bootstrap variables

Our brand’s primary blue is #61DAFB so we’ll go to line 41 in our src/variables.scss and change the $blue value from #007bff to #61DAFB.

Next we’ll go to line 399 and change the $btn-border-radius from $border-radius to 0. The current value is .25rem which is declared in line 228. We’ll leave it unchanged unless our brand’s CI never uses a border radius in it’s components. For this example the buttons have no border-radius (boxed corners, not rounded).

Add the bootstrap markup

Now the final step is to add the bootstrap markup. In /src folder open App.js. We’re adding a button tag using the btn-primary class, bootstrap’s documentation for more info. The markup we’re adding is simple, in /src/App.js in line 14 replace the <a></a> tag with the following code block:

<a class="btn btn-primary" href="https://reactjs.org" role="button" target="_blank">Learn React</a>

So your App.js should look like this:

Then run npm start to run the app and you should see this:

Your buttons should no longer be rounded and the blue hex value should be #61DAFB

This means your bootstrap is set up 100%. You can now use Bootstrap the ways it was meant to be used.

Now you could go further and create an App.scss file inside your /src folder and replace App.css with App.scss on line 3 in App.js and use your own scss variables and styles which will compile into css, read Sass Basics for more info on getting started withSass.

In the next tutorial I will show you how to do the same in a static website build as well as in Angular.

To download the final source code for this article you can find it here.