Necesarry configuration for bootstrap dropdownlist?

Question

I have an angular project in which I try to use the dropdown navbar from bootstrap. I have litteraly copied this from https://getbootstrap.com/docs/4.0/components/navbar/ and the dropdown doesn't work with me:

//also tried it within <head> tags and with all different proposals I found in other questions.
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

I cannot seem to figure out why. I have bootstrap 5.2.1, jquery 3.6.1 and I also added popper 1.16.1 and added it to my styles.css. This doesn't change anything. Although I don't even think this should be necessary. Also I tried adding direct imports in css or in the html following this article: Navbar drop-down menu not working with Angular and Bootstrap 4. It didn't help. I cannot find any other necessary requirements to make this work.

            "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/@ng-select/ng-select/themes/default.theme.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

relevant dependencies:

    "@ng-bootstrap/ng-bootstrap": "^13.1.0",
    "bootstrap": "^5.2.1",
    "jquery": "^3.6.1",
    "popper.js": "^1.16.1",

What configuration is required/necessary to make the bootstrap dropdownlist work?

Please refer to https://stackoverflow.com/questions/12458522/bootstrap-dropdown-not-working — kkpareek, Nov 14 '22 at 08:22
It is an angular project, I tried adding those link tags anyway, didn't make any difference — Yannick Mussche, Nov 14 '22 at 08:23
Can you please edit the question and add your index.html file also — kkpareek, Nov 14 '22 at 08:25
it is an angular project, the html page is exact the same as I copied. — Yannick Mussche, Nov 14 '22 at 08:26

traynor · Accepted Answer · 2022-11-14T13:18:44.167

You have bootstrap v5, so you need to use navbar from that version, not v4

Bootstrap v5 also doesn't use jQuery, so you can load only bundle in your angular.json setup, try this:

"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]

use v5 navbar

it should then look like the example in the snippet below:

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
  </head>



    
    <nav class="navbar navbar-expand-lg 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="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown
              </a>
              <ul class="dropdown-menu">
                <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">Disabled</a>
            </li>
          </ul>
          <form class="d-flex" role="search">
            <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>

Also, you should probably use either bootstrap, or ng-bootstrap

I've changed my scripts, added headers (but wether I use the headers or not) I get this error: "2zone.js:1711 Uncaught TypeError: i.createPopper is not a function"; when pressing the dropdown list. Adding scripts and scriptags to popper don't solve the problem. — Yannick Mussche, Nov 14 '22 at 13:06
@YannickMussche remove popper as well, leave only `bootstrap.bundle.min.js`, it's already within the bundle, its' probably now loaded twice, giving that error — traynor, Nov 14 '22 at 13:09
No, without popper it gives that error, that is why I tried adding it, I'm trying to read some documentation about that error now — Yannick Mussche, Nov 14 '22 at 13:10
@YannickMussche try removing jquery and `ng-bootstrap`, it's probably loaded twice somewhere.. — traynor, Nov 14 '22 at 13:14
@YannickMussche just to be sure, don't include script tags from the snippet from my answer in the component, it's just for showcase here, if you did that, that duplicated it and caused that error — traynor, Nov 14 '22 at 13:15
@YannickMussche copy/paste nav from here to the component: https://getbootstrap.com/docs/5.2/components/navbar/, and then leave only bundle in angular setup and try — traynor, Nov 14 '22 at 13:16
By removing jquery and ng bootstrap from the dependencies, closing VSC and restarting the angular project completly I got it working, (also I did the other proposals you did). Thanks — Yannick Mussche, Nov 14 '22 at 13:18

Necesarry configuration for bootstrap dropdownlist?

1 Answers1