Make your React apps look better with Bootstrap

23 Sep 2019 - John

As much as we love CSS, there are times in which we can’t be bothered to design the complete look and feel of our site. We just want to churn out, but in our rush, we often neglect our styles.
In a previous post, I talked about Bulma and how easy it makes developing a good looking app. This time I want to tell you about the framework that started it all.

Credit: GetBootstrap

Why Bootstrap?

While there are a lot of CSS frameworks out there, and Bootstrap was not certainly the first, it quickly became the most popular choice of frameworks. Made by Twitter and used by companies from LinkedIn to Spotify, Bootstrap quickly rose through the rank as the defacto heavyweight champion of frameworks. That not only makes it the most mature framework, but it also features a huge community and loads and loads of documentations and tutorials, so if your project involves lots of styles and components, you might want to choose Bootstrap for its support.

An admin dashboard made with Bootstrap. Credit: bootlab.io

I’m in, how do I add it to my React app?

There are two ways to add Bootstrap to React. The first way brings the defaulst styles as a simple CSS file and the second way adds SASS support for maximum customization options.

Option 1: just the CSS files

All you have to do is add the Bootstrap package to your packages.json file:

npm install --save bootstrap

And then just import its CSS file on your src/index.js file and you’re done:

import 'bootstrap/dist/css/bootstrap.css';

and that’s it. You now have access to all of the basic Bootstrap styles and your project should pick up the changes immediately.

Option 2: Bootstrap with SASS

Credit: WeKnowMemes via The Daily Dot

The ability to customize everything with SASS is where Bootstrap really shines. Let’s see how it’s done:
First donwload both Bootstrap and node-sass:

npm install --save bootstrap node-sass

Then create an SCSS file on your src folder and import Bootstrap. It’s vital that your import is the last line on your SCSS file:

/* src/myCustomStyles.scss */
... Some custom CSS rules...
/* IMPORTANT: ONLY IMPORT BOOTSTRAP AT THE END OF YOUR RULES. */
/* CUSTOMIZATIONS CAN ONLY HAPPEN BEFORE IMPORTING BOOTSTRAP*/
@import '~bootstrap/scss/bootstrap.scss';

Then all you have to do is import your custom SCSS file on your src/index.js file:

import './myCustomStyles.scss';

Now you should be ready to start changing Bootstrap left and right. I don’t like rounded corners, so let’s make them all square as an example.
First, go to your node_modules/bootstrap folder and inside the scss folder, locate the file _variables.scss.
Open that file and around line 235, you should see the following rules:

$border-radius:               .25rem !default;
$border-radius-lg:            .3rem !default;
$border-radius-sm:            .2rem !default;

Your first instinct would be to change the values right away. Stop. Right. There. If you make your changes on this file, your work will be lost whenever you update your Bootstrap package. Instead, make use of that custom SCSS file you just madeand copy everything you want to change to this file:

/* src/myCustomStyles.scss */
$border-radius:               0;
$border-radius-lg:            0;
$border-radius-sm:            0;
@import '~bootstrap/scss/bootstrap.scss';

And that’s pretty much it! Anything else you want to customize, you just need to paste and edit on your custom SCSS file and Webpack will take care of compiling everything on reload.

Now go ahead and make some handsome apps!