Add Bootstrap in Angular

Hi, All today I am going to show you how we can add CSS framework in angular and I am using Bootstrap for this Post.

Visit Bootstrap's official website https://getbootstrap.com/

You will see the npm command to install the package ```

* After installing this package go into your angular.json file and add this lines into this object. 

![Angular json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ep2cwyhtlx0bvd2p9tk.png)

"styles": [
"src/styles.scss",
"node_modules/bootstrap/scss/bootstrap.scss"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]


* run your application using

ng serve

* Open the app.component.html file remove all default HTML and change the HTML with the following

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Link

Now check your browser 
![Browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dltyywh7w5podfqcvs5h.png)

In this way, we integrated Bootstrap into your Angular project it will work for any version of Angular and if you have any queries or doubts then feel free to reach out to me!!

Blog

Add Bootstrap in Angular

venkateshpensalwar

Join Our Newsletter. No Spam, Only the good stuff.

Related