Theming your Angular application with Bootstrap SASS

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.Bootstrap is completely free to download and use. It’s basically used everywhere in the web!

What I’m going to show you in this article is how to customize your bootstrap your liking!

Now, I know you can find multiple Bootstrap themes where the only work you have to do is to download the customized version. Like for example Bootswatch (

Yes, It’s much easier to use. All you have to do is to simply download the CSS file and replace the one in Bootstrap. But in case of you to create your own theme & use it in Angular project, follow these steps:

Getting Started

ng new my-app --style=scss
cd my-app

Install Bootstrap

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save

Configuring Project

If you are using bootstrap-sass, add the following to _variables.scss:

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

In styles.scss add the following:

// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';
// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

Testing Project

<button class="btn btn-primary">Test</button>

Run ng serve to run your application. In your browser navigate to the application localhost:4200. Open _variables.scss and add the following:

// If bootstrap version 3
$brand-primary: red;
// If bootstrap version 4
$primary: red;

Return to the browser to see the font color changed. The primary color is supposed to be Blue. With our change the color of primary becomes now Red.

To see the list of variables of Bootstrap. Here’s the list for version 3 & Here’s the link of instructions for Version 4.


👉 Don’t forget to clap if you like the post

Web/Mobile Developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store