How to add Bootstrap css the right way to your angular app. Like most css frameworks you may decide to use, you may be willing to use just some components of that framework.

Let say I want to use just the bootstrap popular grid layout.

It would be useless for me to add all of bootstrap to my application.

1

"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.css", "sass/styles.scss" ] 

The above is an ideal way to do it, in our `angular-cli.json` file. But with this, we have all of bootstrap, adding more resources that are not needed to our application.

So how can we solve this problem of loading just the components of bootstrap you may need in your application?

How to add bootstrap the right way to your angular app:

First, make sure you are using sass (scss) in your angular application.

Now, install bootstrap 4

npm install --save bootstrap

In your app `style.scss` file import the required components

1
2
3
4

// Required 
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables"; 
@import "node_modules/bootstrap/scss/mixins";

With that done, we want to use just the `grid` component in our app.

To do that, just import the grid system after the required bootstrap components.

1
2
3
4
5
6

// Required for bootstrap
@import "node_modules/bootstrap/scss/functions"; 
@import "node_modules/bootstrap/scss/variables"; 
@import "node_modules/bootstrap/scss/mixins"; 
// Grid System Only 
@import "node_modules/bootstrap/scss/grid";

With this way of `sass` you can also use all of bootstrap. To do so, rather than importing individual components, you should just go ahead and import all of bootstrap as shown below.

1
2

// Includes all of Bootstrap 
@import "node_modules/bootstrap/scss/bootstrap"; 

Have fun using bootstrap 4 with your angular application. Have any questions? Leave a comment below.