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 ```

npm i bootstrap@5.3.2

* 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!!

Comments

[Danish Hafeez]

To add Bootstrap to an Angular project, you can follow these steps:

Install Bootstrap:

Use npm (Node Package Manager) to install Bootstrap in your Angular project. Run the following command in your terminal or command prompt:

npm install bootstrap

In your styles.scss or styles.css file (located in the src folder), import Bootstrap styles. If you're using SCSS, you can directly import Bootstrap's SCSS file into your main SCSS file:

@import '~bootstrap/scss/bootstrap';

If you're using plain CSS, you can import Bootstrap's CSS file into your main CSS file:

@import '~bootstrap/dist/css/bootstrap.css';

Include Bootstrap JavaScript (Optional):

If you need Bootstrap JavaScript functionalities (like dropdowns, modals, etc.), you need to include Bootstrap JavaScript in your project.

Open angular.json file and include Bootstrap JavaScript file under the scripts array:

"scripts": [
    "node_modules/bootstrap/dist/js/bootstrap.js"
]

Make sure to restart your Angular server after making these changes.

Verify:

To verify that Bootstrap is successfully added to your Angular project, you can add some Bootstrap classes to your HTML templates. For example:

<div class="container">
    <h1>Hello, Bootstrap in Angular!</h1>
    <button class="btn btn-primary">Click me</button>
</div>

When you run your Angular application, you should see the Bootstrap-styled button and other elements if you've added them accordingly.

That's it! Now you have Bootstrap integrated into your Angular project.

[João Angelo]

Thanks for sharing !