Gone are the days of customizing Bootstrap with the sweat of your brow. At least if you’re using a current version of Angular and Bootstrap 4. Mind you: Bootstrap 4 is built with SASS. Angular supports SASS as a first-class citizen. So it’s hardly surprising that it’s a child’s game to customize Bootstrap with an Angular application.
Four easy steps
Basically, you have to follow these four steps:
- Add Bootstrap to your
package.json. The easiest way to do this is running the command
npm i bootstrap@next.
A short note on the “@next” bit: At the time of writing, Bootstrap 4 is still beta. Chances are you’re reading this article a lot later, so maybe the final version of Bootstrap 4 has already been released. If so, install Bootstrap via
npm install bootstrap(omitting the “@next” bit).
- Tell the Angular CLI to use SCSS by default. To do so, rename the
styles.scssand set the default extension in the
.angular-cli.jsonto SCSS. There’s even an Angular CLI command for that: ng set defaults.styleExt scss.
- Create an empty file
srcfolder, next to the
styles.scssfile. Later you’ll add your customizations in this file.
- Add these two lines to the
@import 'customize-bootstrap.scss'; @import '../node_modules/bootstrap/scss/bootstrap';
That’s it! Now you can customize Bootstrap by editing the
Basically, now you can override everything defined in the
_variables.scss. This is a file hidden in the
node-modules folder. It declares a long list of variables, defining the most important aspects of Bootstrap: the colors, the grid system, and things like that.
The nice thing about the
_variables.scss file is that it only defines default values. You can easily override them in your
The official Bootstrap documentation describes your options at great length. So suffice it to give you a short glimpse. You can modify the “primary” color (which usually is the default colors of buttons) with a single line:
$primary = darken(blue, 10%);
You can modify all the standard colors of Bootstrap: primary, secondary, warning, info, and danger. You can also modify several other features of Bootstrap by simply overriding a value defined in the original
_variables.scss file of Bootstrap.
Actually, you can modify almost everything using the approach. For instance, you can increase the number of columns of the grid system. That requires more work than simply changing a variable, but using the SASS version of Bootstrap amount to compiling it from scratch. In other words, you can easily apply modifications to Bootstrap that’d require a lot of work using the binary distribution of Bootstrap.
What about the CSS variables?
Currently, I’m a bit confused because Bootstrap 4 also defines CSS variables for the theme colors. However, modifying these variables doesn’t seem to have any effect. If it worked, it’d be an even nicer way to customize Bootstrap because it doesn’t rely on the SASS compiler. As things go, currently we can only use these variables in our CSS files. On the other hand, that’s great, too. Switching to another theme automatically updates these CSS variables.
Wrapping it up
More often than not, Angular makes web development a breeze. Even so, I was surprised how simple it is to customize a Bootstrap theme. In the past, this used to be an expert job. It still is because developing a theme pleasing the eye requires a lot of skill and craft. However, from a technical point of view, designing a Bootstrap theme to be used with Angular has become surprisingly simple.