How to add Bootstrap 5 to your Angular 11 project

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!!

Comments

[bharatvarsha]

Thanks, I had to use "src/styles.scss" instead of "src/scss/styles.scss" to make it work as default. I could have created scss directory of course

[Myolisi Ngubentombi]

I moved my global style to the scss folder hence my path src/scss/styles.scss
Thanks, I'm glad this was useful to you 🙂👍

[UlissesHen]

For not need add popper: "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
.bundle. already will it added

[petersonvdf]

Thank you so much.

[ddas09]

easy-peasy! Thanks man : )

[yehoudaB]

very clear thank you