Bootstrap allows you to customize the existing definition greatly. With Bootstrap 4, the way we customize the theming has changed a bit, and that’s exactly what I would like to explain here – step by step.
Step 1: Get the Bootstrap source
Of course you need to get the bootstrap source to customize it. You would then recompile it to get the required css.
We could use npm to get the source.
npm install bootstrap --save
Step 2: Install Sass compiler
We would rely on Sass to customize the variables and maps for creating our custom bootstap. You could head over to the Sass Website to read the installation instruction in detail. But I have tried to highlight the necessary steps.
You would need to install Ruby first and then follow it up with the following command.
npm install -g sass
Step 3: Arrange your folder structure.
The last step before we actually start customizing is to arrange the folder structure as mentioned by the Bootstrap website.
your-project/ ├── scss │ └── custom.scss └── node_modules/ └── bootstrap ├── js └── scss
Step 4: Customize your theme.
You cutomize your theme by modiying the variables and maps in the bootstrap code. Using your
custom.css you import the whole bootstrap source (you could alternatively pick and choose if you are sure).
The way team bootstrap has written the code is that it allows you to customize the variable, provided it is defined before the import.
In this example, we will alter the
Primary color to a shade of purpose.
$theme-colors: ( "primary": #4b1076, ); @import "node_modules/bootstrap/scss/bootstrap";
Step 5: Compile your scss and include in your application
Now all that is left is to compile your
custom.scss and create your
css which you can then use in your application. To compile the scss, use the following command.
sass custom.scss custom.css
That’s all you need.