Theming your Angular application with Bootstrap SASS

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

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';
// 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>
// If bootstrap version 3
$brand-primary: red;
// If bootstrap version 4
$primary: red;

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

--

--

--

Web/Mobile Developer.

Love podcasts or audiobooks? Learn on the go with our new app.

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
Hamza HAMIDI

Hamza HAMIDI

Web/Mobile Developer.

More from Medium

5 Modern Slider And Carousel Libraries

Three ways to set environment variables in Angular

Integration of Bootstrap UI Framework in the Angular Application

Gitpod: Firebase & Angular online development