Skip to main content

Angular Bootstrap Integration

Introduction​

Bootstrap is one of the most popular CSS frameworks for building responsive, mobile-first websites. When combined with Angular, it provides a powerful toolset for creating modern web applications with minimal effort. This guide will walk you through the process of integrating Bootstrap with your Angular application, explaining different approaches and providing practical examples.

Bootstrap offers a comprehensive library of components including navigation bars, modals, forms, cards, and more, along with a responsive grid system that makes creating adaptive layouts straightforward. By the end of this guide, you'll be able to leverage Bootstrap's styling capabilities while maintaining Angular's component-based architecture.

Why Use Bootstrap with Angular?​

Before diving into the integration process, let's understand the benefits of using Bootstrap with Angular:

  1. Rapid development: Accelerate UI development with pre-built components
  2. Responsive design: Create mobile-friendly applications with minimal effort
  3. Consistent styling: Maintain visual consistency across your application
  4. Community support: Access a large community and extensive documentation
  5. Customization: Tailor the framework to match your design requirements

Integration Methods​

There are several ways to integrate Bootstrap with Angular. We'll cover the three most common approaches:

1. Using Bootstrap via npm​

This is the recommended approach for most Angular projects as it integrates well with the Angular CLI workflow.

Step 1: Install Bootstrap​

bash
npm install bootstrap

Step 2: Add Bootstrap to your Angular project​

Open angular.json and add the Bootstrap CSS and JavaScript files to the styles and scripts arrays:

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

Step 3: Using Bootstrap classes in your components​

Now you can use Bootstrap classes in your component templates:

html
<div class="container mt-5">
  <div class="row">
    <div class="col-md-6 offset-md-3">
      <div class="card">
        <div class="card-header">
          User Login
        </div>
        <div class="card-body">
          <form>
            <div class="mb-3">
              <label for="email" class="form-label">Email address</label>
              <input type="email" class="form-control" id="email">
            </div>
            <div class="mb-3">
              <label for="password" class="form-label">Password</label>
              <input type="password" class="form-control" id="password">
            </div>
            <button type="submit" class="btn btn-primary">Login</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

2. Using ng-bootstrap​

ng-bootstrap provides native Angular directives based on Bootstrap's CSS, without any dependency on jQuery or Bootstrap's JavaScript.

Step 1: Install the required packages​

bash
npm install @ng-bootstrap/ng-bootstrap bootstrap

Step 2: Import the NgbModule in your app.module.ts​

typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgbModule  // Add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Add Bootstrap CSS to angular.json​

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

Step 4: Use ng-bootstrap components​

Here's an example using an ng-bootstrap accordion component:

html
<div class="container mt-5">
  <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
    <ngb-panel title="Getting Started">
      <ng-template ngbPanelContent>
        To get started with ng-bootstrap, you need to install the package and import the module.
      </ng-template>
    </ngb-panel>
    <ngb-panel title="Components">
      <ng-template ngbPanelContent>
        ng-bootstrap provides a comprehensive suite of UI components, including modals, carousels, and more.
      </ng-template>
    </ngb-panel>
    <ngb-panel title="Advanced Usage">
      <ng-template ngbPanelContent>
        For advanced usage, check out the official documentation and examples.
      </ng-template>
    </ngb-panel>
  </ngb-accordion>
</div>

3. Using ngx-bootstrap​

ngx-bootstrap is another popular option that provides native Angular directives for Bootstrap.

Step 1: Install the required packages​

bash
npm install ngx-bootstrap bootstrap

Step 2: Import specific modules you need​

typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
import { ModalModule } from 'ngx-bootstrap/modal';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ButtonsModule.forRoot(),
    ModalModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Add Bootstrap CSS to angular.json​

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

Step 4: Use ngx-bootstrap components​

html
<div class="container mt-5">
  <button type="button" class="btn btn-primary" (click)="openModal(template)">
    Open modal
  </button>
  
  <ng-template #template>
    <div class="modal-header">
      <h4 class="modal-title pull-left">Modal title</h4>
      <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      This is a modal dialog using ngx-bootstrap!
    </div>
  </ng-template>
</div>

And in your component:

typescript
import { Component, TemplateRef } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  modalRef?: BsModalRef;
  
  constructor(private modalService: BsModalService) {}
  
  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }
}

Creating a Real-World Example: Dashboard Layout​

Let's combine what we've learned to create a simple dashboard layout with Bootstrap and Angular:

Step 1: Create the necessary components​

bash
ng generate component dashboard
ng generate component sidebar
ng generate component navbar
ng generate component dashboard-card

Step 2: Build the navbar component (navbar.component.html)​

html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Admin Dashboard</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Reports</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Analytics</a>
        </li>
      </ul>
      <span class="navbar-text">
        <button class="btn btn-outline-light">Logout</button>
      </span>
    </div>
  </div>
</nav>

Step 3: Build the sidebar component (sidebar.component.html)​

html
<div class="bg-light border-right" id="sidebar-wrapper">
  <div class="list-group list-group-flush">
    <a href="#" class="list-group-item list-group-item-action bg-light">Dashboard</a>
    <a href="#" class="list-group-item list-group-item-action bg-light">Users</a>
    <a href="#" class="list-group-item list-group-item-action bg-light">Products</a>
    <a href="#" class="list-group-item list-group-item-action bg-light">Orders</a>
    <a href="#" class="list-group-item list-group-item-action bg-light">Analytics</a>
    <a href="#" class="list-group-item list-group-item-action bg-light">Settings</a>
  </div>
</div>

Step 4: Create the dashboard card component (dashboard-card.component.ts)​

typescript
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-dashboard-card',
  template: `
    <div class="card text-white mb-4" [ngClass]="cardClass">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <div class="text-white-50 small">{{title}}</div>
            <div class="h3">{{value}}</div>
          </div>
          <i class="fas fa-2x" [ngClass]="iconClass"></i>
        </div>
      </div>
      <div class="card-footer d-flex align-items-center justify-content-between">
        <a class="small text-white stretched-link" href="#">View Details</a>
        <div class="small text-white"><i class="fas fa-angle-right"></i></div>
      </div>
    </div>
  `,
  styles: []
})
export class DashboardCardComponent {
  @Input() title: string = '';
  @Input() value: string = '';
  @Input() cardClass: string = 'bg-primary';
  @Input() iconClass: string = 'fa-chart-area';
}

Step 5: Build the dashboard component (dashboard.component.html)​

html
<div class="d-flex" id="wrapper">
  <app-sidebar></app-sidebar>
  
  <div id="page-content-wrapper">
    <app-navbar></app-navbar>
    
    <div class="container-fluid mt-4">
      <h1 class="mt-2 mb-4">Dashboard Overview</h1>
      
      <div class="row">
        <div class="col-xl-3 col-md-6">
          <app-dashboard-card 
            title="REVENUE" 
            value="$31,500" 
            cardClass="bg-primary" 
            iconClass="fa-dollar-sign">
          </app-dashboard-card>
        </div>
        <div class="col-xl-3 col-md-6">
          <app-dashboard-card 
            title="NEW USERS" 
            value="380" 
            cardClass="bg-success" 
            iconClass="fa-users">
          </app-dashboard-card>
        </div>
        <div class="col-xl-3 col-md-6">
          <app-dashboard-card 
            title="TASKS" 
            value="12" 
            cardClass="bg-warning" 
            iconClass="fa-clipboard-list">
          </app-dashboard-card>
        </div>
        <div class="col-xl-3 col-md-6">
          <app-dashboard-card 
            title="SUPPORT TICKETS" 
            value="18" 
            cardClass="bg-danger" 
            iconClass="fa-ticket-alt">
          </app-dashboard-card>
        </div>
      </div>
      
      <div class="row mt-4">
        <div class="col-lg-8">
          <div class="card mb-4">
            <div class="card-header">
              <i class="fas fa-chart-bar me-1"></i>
              Monthly Sales
            </div>
            <div class="card-body">
              <div style="height: 300px; background-color: #f8f9fa; display: flex; align-items: center; justify-content: center;">
                Chart Placeholder
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="card mb-4">
            <div class="card-header">
              <i class="fas fa-chart-pie me-1"></i>
              Traffic Sources
            </div>
            <div class="card-body">
              <div style="height: 300px; background-color: #f8f9fa; display: flex; align-items: center; justify-content: center;">
                Pie Chart Placeholder
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Step 6: Add Font Awesome for the icons (in index.html)​

html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Step 7: Add some custom styling for the dashboard (styles.css)​

css
body {
  overflow-x: hidden;
  background-color: #f8f9fa;
}

#sidebar-wrapper {
  min-height: 100vh;
  width: 240px;
}

#page-content-wrapper {
  min-width: 0;
  width: 100%;
}

.list-group-item-action:hover {
  background-color: #e9ecef;
}

@media (max-width: 768px) {
  #sidebar-wrapper {
    width: 100px;
  }
}

Common Pitfalls and Solutions​

When integrating Bootstrap with Angular, you might encounter some challenges:

1. jQuery Dependency​

Bootstrap's JavaScript components traditionally depend on jQuery. If you're using ng-bootstrap or ngx-bootstrap, this isn't an issue as they reimplement the components in Angular. If you're using standard Bootstrap, include the Bootstrap bundle which includes Popper.js:

json
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

2. Modal Component Issues​

If you're using Bootstrap modals directly and experiencing issues, switch to ng-bootstrap or ngx-bootstrap modal components for a more Angular-friendly approach.

3. CSS Conflicts​

If Bootstrap styling conflicts with your application's custom styles, consider:

  • Using Bootstrap variables to customize Bootstrap before importing
  • Setting higher specificity for your custom styles
  • Using Angular's ViewEncapsulation to scope styles

4. Responsive Design Testing​

Always test your Bootstrap-Angular integration on different device sizes. Use Chrome DevTools or similar to simulate various screen sizes.

Summary​

In this guide, we've explored:

  1. Different methods to integrate Bootstrap with Angular

    • Using Bootstrap via npm
    • Using ng-bootstrap
    • Using ngx-bootstrap

  2. How to leverage Bootstrap's components within Angular applications

  3. Creating a real-world example with a responsive dashboard layout

  4. Common pitfalls and their solutions

By integrating Bootstrap with Angular, you get the best of both worlds: Angular's powerful component-based architecture and Bootstrap's comprehensive UI toolkit. Whether you're building a simple website or a complex web application, this combination provides a solid foundation for creating responsive, visually appealing user interfaces.

Additional Resources​

Exercises​

  1. Basic Exercise: Create a simple contact form using Bootstrap styling within an Angular component.

  2. Intermediate Exercise: Build a product listing page with filtering options using Bootstrap cards and dropdown components.

  3. Advanced Exercise: Create a multi-step form wizard using ng-bootstrap or ngx-bootstrap with form validation and state management.

  4. Challenge: Build a complete admin dashboard with authentication, navigation, and at least three different views, fully utilizing Bootstrap components and responsive design principles.

Happy coding!


If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)