How to add Bootstrap 5 to your Angular 11 project

Myolisi Ngubentombi — Sat, 01 May 2021 15:45:25 +0000

First things first you want to add bootstrap 5 as an npm package like so

npm install bootstrap@next

In your angular.json add bootstrap stylesheet and javascript

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

"scripts": [
  "./node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Now add popperjs and add it to your scripts

npm install @popperjs/core

"scripts": [
  "./node_modules/@popperjs/core/dist/umd/popper.min.js",
  "./node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Now lets test and see if everything works accordingly
Add a dropdown component to your app.component.html

<div class="dropdown">
  <button
    class="btn btn-secondary dropdown-toggle"
    type="button"
    id="dropdownMenuButton1"
    data-bs-toggle="dropdown"
    aria-expanded="false"
  >
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <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>

You should be able to click and view the dropdown menu items
🔥Boomshaka-laka you're all set. Happy coding!!

DEV Community: Myolisi Ngubentombi

How to add Bootstrap 5 to your Angular 11 project