How to Install Bootstrap 5 in Angular 16

1. Install the latest version of Node.js and npm.

2. Install the Angular CLI globally using the following command:

npm install -g @angular/cli

3. Create a new Angular project using the following command:

ng new my-project

4. Change directory to the project folder:

cd my-project

5. Install Bootstrap 5 using the following command:

npm install [email protected]

6. Open the angular.json file and add the Bootstrap 5 CSS file to the styles array:

“styles”: [
“node_modules/bootstrap/dist/css/bootstrap.min.css”
]

7. Add the Bootstrap 5 JavaScript file to the scripts array:

“scripts”: [
“node_modules/bootstrap/dist/js/bootstrap.min.js”
]

8. Finally, restart the Angular development server and you should be able to use Bootstrap 5 in your Angular project.

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

Jaspreet Singh Ghuman

Jaspreet Singh Ghuman

Jassweb.com/

Passionate Professional Blogger, Freelancer, WordPress Enthusiast, Digital Marketer, Web Developer, Server Operator, Networking Expert. Empowering online presence with diverse skills.

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.

Contact
San Vito Al Tagliamento 33078
Pordenone Italy
Item added to cart.
0 items - 0.00
Open chat
Scan the code
Hello 👋
Can we help you?