Add Bootstrap to Angular: Complete Integration Guide

Why Use Bootstrap with Angular

Modern Angular applications demand sophisticated UI components that work seamlessly across devices. Bootstrap provides the foundational styling and responsive grid system, while Angular offers the component architecture. Together, they accelerate development of professional web applications.

For teams building web applications, combining these technologies offers a powerful foundation for creating responsive, maintainable user interfaces with consistent styling across projects.

Two Integration Approaches

Approach 1: Bootstrap CSS Only Use Bootstrap's CSS classes for styling while writing custom Angular directives for interactive components. You get the full power of Bootstrap's grid system, utility classes, and pre-built styles without any JavaScript dependencies.

Approach 2: ng-bootstrap (Angular-Native Components) The ng-bootstrap library provides Angular components built directly from Bootstrap 5 CSS, without jQuery or Bootstrap JavaScript. Components like accordions, carousels, datepickers, and modals are rewritten as native Angular components with full API development integration patterns.

Prerequisites

Before installing Bootstrap in your Angular project, ensure you have:

• Node.js (latest LTS version) with npm package manager
• Angular CLI installed globally (npm install -g @angular/cli)
• Code editor like Visual Studio Code with Angular extensions
• Git for version control

Understanding backend technologies used in modern web development will help you make informed decisions about your Angular project architecture.

Create New Angular Project

ng new my-bootstrap-app --routing --style=scss
cd my-bootstrap-app

Method 1: Installing Bootstrap CSS

Step 1: Install Bootstrap via npm

npm install bootstrap
# Or for specific version
npm install [email protected]

Step 2: Configure angular.json

Add Bootstrap styles to your build configuration:

{
 "architect": {
 "build": {
 "options": {
 "styles": [
 "node_modules/bootstrap/dist/css/bootstrap.min.css",
 "src/styles.scss"
 ],
 "scripts": []
 }
 }
 }
}

Step 3: Alternative SCSS Import

// styles.scss
@import 'bootstrap/scss/bootstrap';

// Custom overrides
$primary: #1976d2;

Using Bootstrap Components

Navbar Example:

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
 <div class="container">
 <a class="navbar-brand" href="#">My App</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 ms-auto">
 <li class="nav-item">
 <a class="nav-link active" href="#">Home</a>
 </li>
 </ul>
 </div>
 </div>
</nav>

Card Grid Example:

<div class="row">
 <div class="col-md-4 mb-4" *ngFor="let item of items">
 <div class="card h-100">
 <div class="card-header">{{ item.title }}</div>
 <div class="card-body">
 <p class="card-text">{{ item.description }}</p>
 <button class="btn btn-primary">Learn More</button>
 </div>
 </div>
 </div>
</div>

Method 2: Installing ng-bootstrap

What is ng-bootstrap?

ng-bootstrap provides Angular-native implementations of Bootstrap components, eliminating jQuery dependency:

• No jQuery: Pure Angular implementation
• Better Performance: Angular change detection optimization
• Full Lifecycle Integration: Works with Angular hooks
• Tree-Shaking Friendly: Only imported components bundled

Installation

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

Module Configuration

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
 imports: [NgbModule],
})
export class AppModule { }

Using ng-bootstrap Components

Modal Component:

@Component({
 selector: 'app-modal-example',
 template: `
 <button class="btn btn-outline-primary" (click)="open(content)">
 Launch Modal
 </button>
 <ng-template #content let-modal>
 <div class="modal-header">
 <h4 class="modal-title">Modal Title</h4>
 <button type="button" class="btn-close"
 (click)="modal.dismiss('Cross click')">
 </button>
 </div>
 <div class="modal-body">
 <p>Modal body content...</p>
 </div>
 <div class="modal-footer">
 <button class="btn btn-secondary"
 (click)="modal.close('Close click')">
 Close
 </button>
 </div>
 </ng-template>
 `
})
export class ModalExampleComponent {
 constructor(private modalService: NgbModal) {}
 open(content: any) {
 this.modalService.open(content);
 }
}

Accordion Component:

<ngb-accordion [closeOthers]="true">
 <ngb-panel id="static-1" title="First Panel">
 <ng-template ngbPanelContent>
 Content for the first panel...
 </ng-template>
 </ngb-panel>
 <ngb-panel id="static-2" title="Second Panel">
 <ng-template ngbPanelContent>
 Content for the second panel...
 </ng-template>
 </ngb-panel>
</ngb-accordion>

Bootstrap 5 New Features

Key Changes from Bootstrap 4

• Removed jQuery: No jQuery dependency, easier framework integration
• CSS Custom Properties: CSS variables for theming
• Enhanced Grid: Improved flexbox support
• New Utilities: Spacing, sizing, and visibility utilities

CSS Variables for Theming

// src/styles.scss
@import 'bootstrap/scss/bootstrap';

:root {
 --bs-primary: #1976d2;
 --bs-primary-rgb: 25, 118, 210;
}

body {
 color: var(--bs-body-color);
 background-color: var(--bs-body-bg);
}

Runtime theming is possible by modifying CSS variable values based on user preference or application state.

Best Practices for Angular + Bootstrap

Performance Optimization

Import Only What You Need:

// styles.scss
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';

// Import only used components
@import 'bootstrap/scss/root';
@import 'bootstrap/scss/reboot';
@import 'bootstrap/scss/type';
@import 'bootstrap/scss/grid';
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/cards';

Tree Shaking with ng-bootstrap:

import { NgbModalModule, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
 imports: [NgbModalModule, NgbDropdownModule]
})
export class MyModule { }

Following CSS best practices helps maintain clean, maintainable stylesheets in your Angular projects.

Component Architecture

Encapsulation Strategy:

• ViewEncapsulation.Emulated (default): Works well with Bootstrap
• ViewEncapsulation.None: For global layout components

Custom Component Wrappers:

@Component({
 selector: 'app-bootstrap-card',
 template: `
 <div class="card" [class]="'card-' + variant">
 <div class="card-header" *ngIf="title">{{ title }}</div>
 <div class="card-body">
 <ng-content></ng-content>
 </div>
 </div>
 `
})
export class BootstrapCardComponent {
 @Input() title?: string;
 @Input() variant: 'primary' | 'secondary' = 'primary';
}

Conclusion

Integrating Bootstrap with Angular provides a powerful combination for building responsive, professional web applications. Choose the approach that fits your needs:

• Bootstrap CSS Only: Maximum control, lightweight, custom interactions
• ng-bootstrap: Angular-native components, better TypeScript support, tree-shaking

Bootstrap 5's modern features, including CSS variables and jQuery-free architecture, make it ideal for Angular integration. Follow best practices for performance and maintainability to build scalable applications. Our web development team can help you implement these patterns in your next project.

Sources

1. Ganatan - Bootstrap with Angular
2. ng-bootstrap - Angular powered Bootstrap
3. GeeksforGeeks - How to Install Bootstrap in Angular
4. Bootstrap Official Documentation