Using Bootstrap¶
While you can use Bootstrap directly, there are many advantages in using a library such as Reactstrap to provide ready-made React components, instead of having to reference bootstrap classes manually.
Warning
Make sure you are in the web
folder before running the commands below:
cd ./web
Installation¶
Install dependencies from NPM:
npm install --save bootstrap reactstrap
Then load the Boostrap CSS from src/index.js
:
import 'bootstrap/dist/css/bootstrap.min.css';
Usage¶
Refer to Reactstrap documentation for more information.
Advanced: customize bootstrap¶
Bootstrap can be customized by loading the SCSS files instead, and providing custom configuration variables.
This allows tweaking things like colors, sizes, etc.
To keep things organized, we’ll start creating a style
folder:
mkdir src/style
Create a src/style/_vars.scss
file, to load all the customized variables
@import "~bootstrap/scss/functions";
@import "./custom";
@import "~bootstrap/scss/variables";
Note
The main advantage of having this as a separate file, rather than in
index.global.scss
is we can then load variables from this file
into any of our other scss files.
Then, copy the bootstrap variables to _custom.scss
:
cp ./node_modules/bootstrap/scss/_variables.scss ./src/style/_custom.scss
Note
While just adding overridden variables to _custom.scss
would
be enough, we find it makes life a lot easier to be able to search
for variables / tweak them directly in one file.
Keep in mind you can remove the !default
marker from
variables as you customize their values.
You can then create a src/style/index.scss
to load all the
bootstrap SCSS, along with the required customizations:
@import "./vars";
@import "~bootstrap/scss/bootstrap";
Note
You can load individual components instead of the whole bootstrap.scss
.
This has the benefit of reducing bundle size (and compile time).
Have a look at node_modules/bootstrap/scss/bootstrap.scss
to
see which imports you’re going to need.
Finally, load it from src/index.global.scss
:
@import "~style/index";