Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

btn-group dropdown does not work, but nav-item dropdown does in Angular with bootstrap

Would somebody know why the btn-group dropdown does not work and the nav-item dropdown does?

<div class="col-md-4">
                                <div class="btn-group dropdown">
                                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                      Action
                                    </button>
                                    <div class="dropdown-menu">
                                      <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 class="dropdown-divider"></div>
                                      <a class="dropdown-item" href="#">Separated link</a>
                                    </div>
                                  </div>
                                  <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
                                    <ul class="dropdown-menu" aria-labelledby="dropdown03">
                                      <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>
                                  </li>
                            </div>

here you find the styles and scripts from angular.json and you find the dependencies from package.json

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


"dependencies": {
    ...
    "@angular/forms": "~12.1.1",
    "@angular/platform-browser": "~12.1.1",
    "@angular/platform-browser-dynamic": "~12.1.1",
    "@angular/router": "~12.1.1",
    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
    "boostrap": "^2.0.0",
    "bootstrap": "^5.0.2",
    "jquery": "^3.6.0",
    "popper.js": "^1.16.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
like image 383
Maxim Lejaeghere Avatar asked Mar 06 '26 01:03

Maxim Lejaeghere


1 Answers

All Bootstrap 5 data- attributes changed to data-bs-

like image 134
Zim Avatar answered Mar 07 '26 16:03

Zim