How to implement normal Bootstrap to Angular application?

Question

I also want to know that sometimes the navbar class, collapse class and dropdown, toggle button are not supported in the angular application even when we install the bootstrap with scripts.

What I want to know is how can I able to achieve every Bootstrap class support to Angular Application at a single time.

Kindly help me. Thanking you!

Please provide enough code so others can better understand or reproduce the problem. — Community
– Community Bot, Commented Sep 3, 2022 at 16:06

cfprabhu · Accepted Answer · 2022-09-03 05:41:11Z

0

Bootstrap depends on the jQuery and popper.js libraries, and if you don’t include them in your project, any Bootstrap components that rely on JavaScript will not work.

A better way is to use component libraries created for the sake of making Bootstrap work seamlessly with Angular such as ng-bootstrap and ngx-bootstrap

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"
]

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>

edited Sep 3, 2022 at 5:41

answered Sep 3, 2022 at 5:15

cfprabhu

5,3722 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vijay s Over a year ago

Thank you for Responding to me! Please tell me if there is another way to utilize these JQuery and popper.js libraries in the normal bootstrap installation. If so kindly tell me. That means without using ngBootstrap and ngx bootstrap

cfprabhu Over a year ago

always welcome @vijays. Happy coding

Collectives™ on Stack Overflow

How to implement normal Bootstrap to Angular application?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related