DEV Community

Myolisi Ngubentombi
Myolisi Ngubentombi

Posted on

How to add Bootstrap 5 to your Angular 11 project

#angular #bootstrap5 #popperjs #programming

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
 
ddas09 profile image
ddas09 •

easy-peasy! Thanks man : )

Collapse
 
yehoudab profile image
yehoudaB •

very clear thank you

Collapse
 
petersonvdf profile image
petersonvdf •

Thank you so much.

Collapse
 
ulisseshen profile image
UlissesHen •

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