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
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 http://getbootstrap.com/getting-started/
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.
However, when you apply the bootstrap framework in your app.component.html, i.e.,
it appears like:
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, (https://bootswatch.com/) by simply copying the URL of a particular theme and pasting it in the index.html