DEV Community

Cover image for Add Bootstrap in Angular

Add Bootstrap in Angular

venkateshpensalwar on January 30, 2024

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 w...
Read full post
Collapse
 
danishhafeez profile image
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
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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

@import '~bootstrap/dist/css/bootstrap.css';
Enter fullscreen mode Exit fullscreen mode

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"
]
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
 
jangelodev profile image
João Angelo •

Thanks for sharing !