Question

44

Bootstrap 4 Dropdown Menu not working?

rated 0 times [ 45] [ 1] / answers: 1 / hits: 141390 / 7 Years ago, sun, september 3, 2017, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

isaac

Add To Favorites

Follow

Total Points: 645

Total Questions: 109

Total Answers: 96

Location: Cayman Islands

Member since Fri, Mar 4, 2022

2 Years ago

answered 7 Years ago zaynerogerb · Accepted Answer

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>