Install Bootstrap 5 in Angular

Learn how to install Bootstrap 5 in Angular using npm and configure styles for a clean UI. This is Tutorial 2 of the Angular CRUD project series.

1. Install Bootstrap 5

Install Bootstrap 5 through the command below

npm install bootstrap@5

2. Add Bootstrap to angular.json

Firstly, open the angular.json file

angular.json

Add bootstrap style into the styles array

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

Now, save the file → Angular CLI automatically reloads.

3. Test Bootstrap

Open src/app/app.component.html and add a button:

<button class="btn btn-primary">Bootstrap Working</button>

Note: If the button is blue → Bootstrap is working.

4.  Add a Simple Navbar (Basic UI)

<nav class="navbar navbar-expand-lg navbar-dark bg-primary px-3">
  <a class="navbar-brand text-white" href="#">User CRUD</a>
</nav>

<div class="container mt-4">
  <router-outlet></router-outlet>
</div>