Angularweb design

Customizing Bootstrap 4 with Angular

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.css to styles.scss and set the default extension in the .angular-cli.json to SCSS. There’s even an Angular CLI command for that: ng set defaults.styleExt scss.
  • Create an empty file customize-bootstrap.scss the in src folder, next to the styles.scss file. Later you’ll add your customizations in this file.
  • Add these two lines to the styles.scss file:
    @import 'customize-bootstrap.scss';
    @import '../node_modules/bootstrap/scss/bootstrap';
    

That’s it! Now you can customize Bootstrap by editing the customize-bootstrap.scss file.

Customizing

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 customize-bootstrap.scss.

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.

Leave a Reply

Your email address will not be published.