How to Install Bootstrap 5 in Angular 16

Install Bootstrap 5 in Angular 16; Through this tutorial, you will learn how to install and use Bootstrap 5 in angular 16 projects using the “ngx-bootstrap” library.

How to Install & Use Bootstrap 5 in Angular 16

Steps to install and use Bootstrap 5 in angular 16 projects using the ngx-bootstrap library; are as follows:

• Step 1: Create a New Angular Project
• Step 2: Install Bootstrap 5
• Step 3: Setup Bootstrap 5 in Project
• Step 4: Use Bootstrap 5 in Project
• Step 5: Start Angular Project

Step 1: Create a New Angular Project

Open your command prompt or cmd and execute the following command to install angular cli into your system; as follows:

npm install -g @angular/cli 

Next, create a new Angular project using the CLI:

ng new my-bootstrap-app

cd my-bootstrap-app

Step 2: Install Bootstrap 5

Now, you need to install Bootstrap and its dependencies in your Angular project. Angular 16 uses the “ngx-bootstrap” library, which provides Angular-specific directives for Bootstrap components.

npm install bootstrap @popperjs/core ngx-bootstrap

Step 3: Setup Bootstrap 5 in Project

To use Bootstrap styles and functionality, you must include the required styles and scripts in your project. Open the “angular.json” file in the root of your project and locate the “styles” and “scripts” sections. Update them as follows:

{
  // ...
  "projects": {
    "my-bootstrap-app": {
      // ...
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/@popperjs/core/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },
          // ...
        },
        // ...
      },
      // ...
    }
  },
  // ...
}

Step 4: Use Bootstrap 5 in Project

Now you can use Bootstrap components in your Angular templates. For example, you can use a Bootstrap dropdown in your “app.component.html”:

<div class="container mt-4">
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown button
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </div>
</div>

To utilize the ngx-bootstrap components, you need to import the necessary modules in your app’s module. Open the “app.module.ts” file located in the “src/app” folder and import the required modules:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; // Add this line for the dropdown module

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    BsDropdownModule // Add this line for the dropdown module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 5: Start Angular Project

You can now run your Angular application to see the Bootstrap dropdown in action:

ng serve

Then visit your web browser and hit the following URL into it:

http://localhost:4200

Conclusion

Congratulations! You have successfully installed Bootstrap in your Angular 16 project using the “ngx-bootstrap” library.

Recommended Tutorials