Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 4 Dropdown Menu not working?

I copied the official Bootstrap 4 example for dropdown menus but it is not working, that is nothing is dropped down.

<li class="nav-item dropdown">     <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>     <div class="dropdown-menu" aria-labelledby="dropdown01">     <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> 
like image 894
komodoedit Avatar asked Sep 03 '17 19:09

komodoedit


People also ask

Why is my dropdown menu not working Bootstrap?

Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.

Why is dropdown not working in HTML?

In your case you have overflow:hidden on . row which holds the menu and therefore the dropdown menu will never show because it overflows the container. For the element called . row that holds the menu you will need to use another clearing mechanism instead of overflow:hidden.

How do I open a dropdown in Bootstrap?

To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. The . caret class creates a caret arrow icon (), which indicates that the button is a dropdown.

How set dropdown position in Bootstrap?

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add . dropdown-menu-right to a . dropdown-menu to right align the dropdown menu.


1 Answers

Edit: In case anyone else is having this problem, I believe the solution for OP was that he had not imported popper.js.

Check that jQuery and all the relevant Bootstrap components are there. Also check the console and make sure there are no errors.

<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> </head> <body>   <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="http://example.com" 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>    <!-- Optional JavaScript -->   <!-- jQuery first, then Popper.js, then Bootstrap JS -->   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <-- Always remember to call the above files first before calling the bootstrap.min.js file -->   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> </body> </html>
like image 150
moidol Avatar answered Oct 09 '22 11:10

moidol