DEV Community

Myolisi Ngubentombi
Myolisi Ngubentombi

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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"
]
Enter fullscreen mode Exit fullscreen mode

Now add popperjs and add it to your scripts

npm install @popperjs/core
Enter fullscreen mode Exit fullscreen mode
"scripts": [
  "./node_modules/@popperjs/core/dist/umd/popper.min.js",
  "./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (6)

Collapse
 
bharatvarsha profile image
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

Collapse
 
myolisi profile image
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 🙂👍

Collapse
 
ulisseshen profile image
UlissesHen

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

Collapse
 
petersonvdf profile image
petersonvdf

Thank you so much.

Collapse
 
ddas09 profile image
ddas09

easy-peasy! Thanks man : )

Collapse
 
yehoudab profile image
yehoudaB

very clear thank you