How to Use Bootstrap with Angular: Simple Integration Guide

To use Bootstrap with Angular, install Bootstrap via npm using npm install bootstrap, then add the Bootstrap CSS file path to the angular.json styles array. You can then use Bootstrap classes directly in your Angular component templates for styling and layout.

Syntax

First, install Bootstrap in your Angular project using npm. Then, include Bootstrap's CSS in your project configuration so Angular knows to load it. Finally, use Bootstrap classes in your HTML templates to style elements.

• npm install bootstrap: Adds Bootstrap to your project.
• Add Bootstrap CSS path to angular.json under styles.
• Use Bootstrap classes like btn, container, row in your component HTML.

bash and json and html

npm install bootstrap

// In angular.json
"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

<!-- In your component HTML -->
<button class="btn btn-primary">Click me</button>

Example

This example shows a simple Angular component using Bootstrap classes for a styled button and layout container.

json and html

// Install Bootstrap first
// npm install bootstrap

// angular.json (partial)
{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ]
          }
        }
      }
    }
  }
}

// app.component.html
<div class="container mt-5">
  <h1 class="text-center mb-4">Welcome to Angular with Bootstrap</h1>
  <button class="btn btn-success">Bootstrap Button</button>
</div>

Output

A centered heading 'Welcome to Angular with Bootstrap' with margin above, and below it a green Bootstrap styled button labeled 'Bootstrap Button'. The content is inside a responsive container with spacing.

Common Pitfalls

Common mistakes include forgetting to add Bootstrap CSS to angular.json, which causes styles not to apply. Another is installing Bootstrap but not restarting the Angular server, so changes don't show. Also, avoid adding Bootstrap JS files directly because Angular handles DOM differently; use Angular-specific libraries for Bootstrap JS features.

json and html comments

// Wrong: Not adding Bootstrap CSS in angular.json
// Result: No Bootstrap styles applied

// Right: Add Bootstrap CSS path in angular.json styles array
"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

// Wrong: Adding Bootstrap JS files directly in index.html
// This can cause conflicts with Angular's DOM handling

// Right: Use Angular libraries like ngx-bootstrap or ng-bootstrap for Bootstrap JS components

Quick Reference

• Install Bootstrap: npm install bootstrap
• Add CSS: Include node_modules/bootstrap/dist/css/bootstrap.min.css in angular.json styles array
• Use classes: Apply Bootstrap classes in component HTML
• For JS components: Use Angular libraries like ng-bootstrap or ngx-bootstrap

Key Takeaways

Install Bootstrap via npm and add its CSS path to angular.json styles array.

Use Bootstrap classes directly in Angular component templates for styling.

Do not add Bootstrap JS files manually; use Angular Bootstrap libraries instead.

Restart Angular server after installing Bootstrap to see changes.

Bootstrap helps create responsive, modern UI quickly in Angular projects.