Theming your Angular application with Bootstrap SASS
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:
Create a new project and navigate into the project:
ng new my-app --style=scss
# version 3.x
npm install bootstrap-sass --save
# version 4.x
npm install bootstrap@next --save
Create an empty file
If you are using
bootstrap-sass, add the following to
styles.scss add the following:
// version 3
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';// version 4
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>
ng serve to run your application. In your browser navigate to the application
_variables.scss and add the following:
// If bootstrap version 3
$brand-primary: red;// If bootstrap version 4
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.