CODEWITHSUNDEEP
bootstrap-4drop-down-menu
gab
gab

Reputation: 3

Bootsrap 4 dropdown menu is not showing?

I tried different code but doesnt matter what i do my dropdown menu on bootsrap doesnt appear it has an arrow next to it but nothing shows up when pressed. If anyone could tell me what i did wrong in the code or what may be causing the issue i would appreciate it alot

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#">///</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">


      <span class="navbar-toggler-icon"> </span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav mr-auto">

      </ul>
      <ul class="navbar-nav">

          <li class="nav-item">
              <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">About</a>
          </li>

          <div class="dropdown">
              <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Projects
              </button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                  <button class="dropdown-item" type="button">Younity Beauty</button>
                  <button class="dropdown-item" type="button">Xplore</button>
              </div>
          </div>


          <div class="dropdown">
              <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Hobbies
              </button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                  <button class="dropdown-item" type="button">Photography</button>
                  <button class="dropdown-item" type="button">Design</button>
                  <button class="dropdown-item">Painting</button>




              </div>
          </div>

          </li>
      </ul>
  </div>

Upvotes: 0

Views: 99

Answers (2)

Ariel Montes
Ariel Montes

Reputation: 276

Bootstrap nav-bar need javascript. Check if your html looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- Bootstrap css -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>

<body>

    <!-- Your Nav-Bar -->


    <!-- Bootstrap javascript -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

</body>
</html>

It's important to add this part:

<!-- Bootstrap javascript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

Upvotes: 1

BigBirdGrim
BigBirdGrim

Reputation: 3

I don't want to insinuate but have you properly imported/included bootstrap into your project?

If you haven't or you're unsure, work through this small tutorial. https://www.w3schools.com/bootstrap/bootstrap_get_started.asp

If you have properly included bootstrap, sorry and I'm unsure where your mistake is. I'm not proficient enough myself lol.

Upvotes: 0

Related Questions