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 (https://bootswatch.com/).

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

Create a new project and navigate into the project:

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

Create an empty file _variables.scss in src/.

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

Now to test if your changes are taking effect: open app.component.html and add the following markup:

<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.

links:

• Portfolio
• Github
• Twitter

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