Navbar dropdown (collapse) is not working in Bootstrap 5

I am facing a issue when trying to create a responsive menu or dropdown button with Bootstrap 5.Everything seems ok.The navigation icon & dropdown icon apears.But its not working.When I clicked the nav icon or dropdown button,no dropdown menu apears.

I want to specially mention that I also included the jquery file. But it didn\’t work. Can anyone please tell me what is happening here?

One last thing,I faced severel issues with some others bootstrap classes like mr-auto,ml-auto etc.Is it any bug or new classes come with bootstrap 5 for this kind of job?

Here is my code:

<!DOCTYPE html> <html lang=\"en\">     <head>         <meta charset=\"UTF-8\" />         <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />         <title>Bootstrap</title>         <link             href=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css\"             rel=\"stylesheet\"             integrity=\"sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1\"             crossorigin=\"anonymous\"         />     </head>     <body>         <nav class=\"navbar navbar-dark bg-dark navbar-expand-md\">             <a href=\"#\" class=\"navbar-brand\">DemoTech</a>             <button                 class=\"navbar-toggler\"                 data-toggle=\"collapse\"                 data-target=\"#navbar\"             >                 <span class=\"navbar-toggler-icon\"></span>             </button>              <div class=\"navbar-collapse collapse\" id=\"navbar\" navbar>                 <ul class=\"navbar-nav\">                     <li class=\"nav-item\"><a href=\"#\" class=\"nav-link\">Home</a></li>                     <li class=\"nav-item\"><a href=\"#\" class=\"nav-link\">About</a></li>                     <li class=\"nav-item\"><a href=\"#\" class=\"nav-link\">Contact</a></li>                 </ul>             </div>         </nav>          <script             src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js\"             integrity=\"sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW\"             crossorigin=\"anonymous\"         ></script>     </body> </html>

Asked on September 25, 2021 in CSS.
Add Comment
4 Answer(s)

The data-* attributes used in Bootstrap 4 have been replaced with data-bs-* in Bootstrap 5

<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar">     <span class="navbar-toggler-icon"></span> </button> 

Demo

As explained in the docs, data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. This mean any javascript components (Collapse, Navbar, Carousel, Dropdown, Tabs, Modal, etc..) will only work using data-bs-... attributes.

Bootstrap 5 is a major update with breaking changes. Also see here that ml-auto/mr-auto have changed to ms-auto/me-auto.

Answered on September 25, 2021.
Add Comment
<!doctype html> <html lang="en">   <head>     <!-- Required meta tags -->     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">      <!-- Bootstrap CSS -->     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">      <title>Hello, world!</title>   </head>   <body>      <nav class="navbar navbar-expand-lg navbar-light bg-light">   <a class="navbar-brand" href="#">Navbar w/ text</a>   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">     <span class="navbar-toggler-icon"></span>   </button>   <div class="collapse navbar-collapse" id="navbarText">     <ul class="navbar-nav mr-auto">       <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>     </ul>     <span class="navbar-text">       Navbar text with an inline element     </span>   </div> </nav>      <!-- Optional JavaScript -->     <!-- jQuery first, then Popper.js, then Bootstrap JS -->     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>   </body> </html> 
Answered on September 25, 2021.
Add Comment

here the ‘data-bs-target’ id

<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#kickMyAss"> 

and div id must be identical

<div id="kickMyAss" class="collapse navbar-collapse"> 
Answered on September 25, 2021.
Add Comment

You use "data-toggle" this attribute used in Bootstrap 3 you need to use this attribute "data-bs-toggle"

Answered on September 25, 2021.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.