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.

"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

<div class="container m-5 d-flex gap-2">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
</div>

Now check your browser

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 !