Angular 17 Install & Add Bootstrap 5 Example

Add Bootstrap 5 in Angular 17; In this tutorial, we will show you how to install and add Bootstrap 5 in angular 17 projects using the “npm jquery, propper, bootstrap” library.

Angular 17 Install & Add Bootstrap 5 Example

Using the following steps, you can install and add Bootstrap 5 in angular 17 projects:

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:

Ezoic

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

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

Ezoic

npm install bootstrap --save
npm install jquery --save
npm install popper.js --save

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:

Ezoic

{
  // ...
  "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”:

Ezoic

<div class="container">
  <h1>Install and Add Bootstrap 5 in Angular 17 - Tutsmake.com</h1>
  
  <div class="card">
    <div class="card-header">
      Featured
    </div>
    <div class="card-body">
      <h5 class="card-title">Special title treatment</h5>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </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:

Ezoic

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 17 projects.