Add Bootstrap CSS Framework to an Angular Application

Angular is a development platform for building web, mobile, and desktop applications using HTML, CSS, and TypeScript (JavaScript). Currently, Angular is at version 13 and Google is the main maintainer of the project.

Bootstrap is an open source CSS framework with many components to create responsive web interfaces.

Before you begin, you need to install and configure the tools:

Create the Angular app

1. Let’s create the app with the Angular base framework using the @angular/cli with route file and SCSS style format.

ng new angular-bootstrap
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ]
CREATE angular-bootstrap/README.md (1062 bytes)
CREATE angular-bootstrap/.editorconfig (274 bytes)
CREATE angular-bootstrap/.gitignore (604 bytes)
CREATE angular-bootstrap/angular.json (3273 bytes)
CREATE angular-bootstrap/package.json (1079 bytes)
CREATE angular-bootstrap/tsconfig.json (783 bytes)
CREATE angular-bootstrap/.browserslistrc (703 bytes)
CREATE angular-bootstrap/karma.conf.js (1434 bytes)
CREATE angular-bootstrap/tsconfig.app.json (287 bytes)
CREATE angular-bootstrap/tsconfig.spec.json (333 bytes)
CREATE angular-bootstrap/src/favicon.ico (948 bytes)
CREATE angular-bootstrap/src/index.html (302 bytes)
CREATE angular-bootstrap/src/main.ts (372 bytes)
CREATE angular-bootstrap/src/polyfills.ts (2820 bytes)
CREATE angular-bootstrap/src/styles.scss (80 bytes)
CREATE angular-bootstrap/src/test.ts (743 bytes)
CREATE angular-bootstrap/src/assets/.gitkeep (0 bytes)
CREATE angular-bootstrap/src/environments/environment.prod.ts (51 bytes)
CREATE angular-bootstrap/src/environments/environment.ts (658 bytes)
CREATE angular-bootstrap/src/app/app-routing.module.ts (245 bytes)
CREATE angular-bootstrap/src/app/app.module.ts (393 bytes)
CREATE angular-bootstrap/src/app/app.component.scss (0 bytes)
CREATE angular-bootstrap/src/app/app.component.html (23809 bytes)
CREATE angular-bootstrap/src/app/app.component.spec.ts (1090 bytes)
CREATE angular-bootstrap/src/app/app.component.ts (222 bytes)
✔ Packages installed successfully.

2. Install it bootstrap and bootstrap-icons libraries.

npm install bootstrap bootstrap-icons

3. Configure it bootstrap and bootstrap-icons libraries. Change the angular.json file and add the bootstrap.scssbootstrap-icons.css and bootstrap.bundle.min.js files as below.

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
  "src/styles.scss"
],
"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

4. Install it @ng-bootstrap/ng-bootstrap library.

npm install @ng-bootstrap/[email protected]

5. Import it NgbModule module. Change the app.module.ts file and add the lines as below.

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

imports: [
  BrowserModule,
  NgbModule,
  AppRoutingModule,
],

6. Delete the contents of AppComponent class of the src/app/app.component.ts file. Import it NgbModal service and create the open method as below.

import { Component } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

  constructor(private modalService: NgbModal) {
  }

  public open(modal: any): void {
    this.modalService.open(modal);
  }

}

7. Delete the contents of src/app/app.component.html file. Add some components as below.


  
    
      Angular Bootstrap
    
    
    
      
        
          Home
        
        
          Link
        
        
          
            Dropdown
          
          
            Action
            Another action
            
            Something else here
          
        
        
          Disabled
        
      
      
        
        
      
    
  


  
    
      Email address
      
    
  
  
    
      Example textarea
      
    
  
  
    
      
        
        Default switch checkbox input
      
    
  
  
    
      
    
  


  
    Profile update
    
  
  
    
      
        Date of birth

8. Run the application with the command below.

npm start

> [email protected] start
> ng serve

✔ Browser application bundle generation complete.

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   3.38 MB
styles.css          | styles        | 255.86 kB
polyfills.js        | polyfills     | 128.56 kB
scripts.js          | scripts       |  76.94 kB
main.js             | main          |  22.81 kB
runtime.js          | runtime       |   6.59 kB

                    | Initial Total |   3.86 MB

Build at: 2021-06-27T21:28:22.756Z - Hash: 122b9fa4d57b962e7bcc - Time: 21933ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.

9. Ready! Go to url http://localhost:4200/ and check if the app is working. See the application working on the GitHub and Stackblitz pages.

The app repository is available at https://github.com/rodrigokamada/angular-bootstrap.

This tutorial was posted on my blog in Portuguese.

Create the Angular app

Profile update

Related Articles