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.