Add Bootstrap to your Angular CLI Project

This article will help us understand the usage of bootstrap framework within Angular. To understand a little about bootstrap, Bootstrap is the most popular HTML, CSS, and JavaScript framework for web front-end development. It’s great for developing responsive, mobile-first web sites.

Bootstrap in Angular

Step 1. Create a new Angular Project
So, to apply bootstrap to your angular project, the very first step is to create an angular project using ng new.

$ ng new bs_ang

Step 2. Install Bootstrap
To add bootstrap to an angular project, there are different ways:
— Adding Bootstrap from CDN
— Adding Boostrap via NPM

From CDN

The CSS and JS files of bootstrap can be directly accessed from a CDN (Content Delivery Network). The CDN links for Bootstrap can be found at

In the index.html, insert <link> element (It will appear like given in the picture below) to get the Bootstrap CSS file after the <head> tag.

Your index.html must look like this now.

Now, to use this bootstrap inside one of our components, lets take this example.

In our app.component.html,i.e.,

The result shows as follows if bootstrap framework is not applied.

Without bootstrap

However, when you apply the bootstrap framework in your app.component.html, i.e.,

it appears like:

With Bootstrap

Look at the difference in the presentation with Bootstrap applied to Angular!


Use $npm install boostrap@3

After installing, find the bootstrap CSS file here: node_modules/bootstrap/dist/css/bootstrap.min.css and add it to the <link> element in the index.html

And then, apply bootstrap to any component as we did earlier.

We can also change the bootstrap theme from websites like Bootswatch, ( by simply copying the URL of a particular theme and pasting it in the index.html

Leave a comment

Your email address will not be published. Required fields are marked *