How to fix bootstrap5 navbar toggle issue in angular 19

Question

I have installed "bootstrap": "^5.3.7" and added below the code in angular.json. But toggle is not working. without adding in the index.html(js and css) How to resolve thiss issue?

What are they js and css files need to include inside "styles": [] and "scripts": [] for angular 19

angular.json:

  "styles": [ 
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
            ]

header.component.html:

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

Demo: https://stackblitz.com/edit/bootstrap-navbar-rixn9ckv?file=index.html

Your code looks fine in this demo. Perhaps you can replicate the issue in StackBlitz or share the minimal, reproducible repository in GitHub. Thanks. — Yong Shun
– Yong Shun, Commented Jun 22 at 8:08
@YongShun: Can you run this? stackblitz.com/edit/bootstrap-navbar-ebrvbywt?file=index.html — Sansara
– Sansara, Commented Jun 22 at 9:19
Yes, but in your demo, you are importing Bootstrap 4 and PopperJS, which is different what you mentioned in the question with Bootstrap 5 (bundle). It would be great to try to replicate your code with an Angular project to ensure it is similar to your project code. — Yong Shun
– Yong Shun, Commented Jun 22 at 9:30

ekalin · Accepted Answer · 2025-06-21 21:17:36Z

-1

You should not use the bootstrap js directly with Angular. Instead, use a library such as ng-bootstrap or ngx-bootstrap.

answered Jun 21 at 21:17

ekalin

1,01010 silver badges24 bronze badges

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

1 Comment

Pieterjan Jul 5 at 22:46

But none of these libraries contain a navbar. On the other hand, this library does (npm)

Collectives™ on Stack Overflow

How to fix bootstrap5 navbar toggle issue in angular 19

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related