DEV Community

Myolisi Ngubentombi
Myolisi Ngubentombi

Posted on

12 3

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

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

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

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more