CODEWITHSUNDEEP
htmllaravelbootstrap-4drop-down-menu
dolor3sh4ze
dolor3sh4ze

Reputation: 1165

Dropdown menu doesn't show Bootstrap

I've been trying for quite some time to display a dropdown menu on my page, but it doesn't work...

My HTML code:

<div class="dropdown d-inline">
  <div class="widget-header  mr-3">
    <button href="#" class="icon icon-sm rounded-circle border" data-toggle="dropdown"><i class="fa fa-shopping-cart"></i></button>
      <span class="badge badge-pill badge-danger notify">{{ Cart::count() }}</span>
  </div>
  <div class="dropdown-menu p-3 dropdown-menu-right" style="min-width:280px;">
    <figure class="itemside mb-3">
      <div class="aside">
        <img src="bootstrap-ecommerce-html/images/items/1.jpg" class="img-sm border">
      </div>
      <figcaption class="info align-self-center">
        <p class="title">Name of item nice iteme</p>
        <a href="#" class="float-right"><i class="fa fa-trash"></i></a>
        <div class="price">$250</div> <!-- price-wrap.// -->
      </figcaption>
    </figure>
    <figure class="itemside mb-3">
      <div class="aside">
        <img src="bootstrap-ecommerce-html/images/items/2.jpg" class="img-sm border">
      </div>
      <figcaption class="info align-self-center">
        <p class="title">Some other item name is here</p>
        <a href="#" class="float-right"><i class="fa fa-trash"></i></a>
        <div class="price">$250</div> <!-- price-wrap.// -->
      </figcaption>
    </figure>
    <figure class="itemside mb-3">
      <div class="aside">
        <img src="bootstrap-ecommerce-html/images/items/3.jpg" class="img-sm border">
      </div>
      <figcaption class="info align-self-center">
        <p class="title">Another name of item  item</p>
        <a href="#" class="float-right"><i class="fa fa-trash"></i></a>
        <div class="price">$250</div> <!-- price-wrap.// -->
      </figcaption>
    </figure>
    <div class="price-wrap text-center py-3 border-top">
      Subtotal: <strong class="h5 price">$1200</strong>
    </div>
    <a href="" class="btn btn-primary btn-block"> Checkout </a>
  </div> <!-- drowpdown-menu.// -->
</div>

My Bootsrap integrations:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

It is a .blade.php page running on Laravel. Thanks for your help in advance, I'm really stuck.

Upvotes: 0

Views: 90

Answers (2)

Jeff Berlin
Jeff Berlin

Reputation: 600

So it appears that wrapping the <button> inside of a div after the .dropdown .d-inline is causing your issue. Here is a working CodePen as well (notice that I added some attributes per Bootstrap to certain elements).

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
  <div class="dropdown d-inline">
    <button type="button" class="icon icon-sm rounded-circle border dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      hello
    </button>
    <span class="badge badge-pill badge-danger notify">{{ Cart::count() }}</span>
    <div class="dropdown-menu p-3 dropdown-menu-right">
      <figure class="itemside mb-3">
        <div class="aside">
          <img src="bootstrap-ecommerce-html/images/items/1.jpg" class="img-sm border">
        </div>
        <figcaption class="info align-self-center">
          <p class="title">Name of item nice iteme</p>
          <a href="#" class="float-right"><i class="fa fa-trash"></i></a>
          <div class="price">$250</div> <!-- price-wrap.// -->
        </figcaption>
      </figure>
      <figure class="itemside mb-3">
        <div class="aside">
          <img src="bootstrap-ecommerce-html/images/items/2.jpg" class="img-sm border">
        </div>
        <figcaption class="info align-self-center">
          <p class="title">Some other item name is here</p>
          <a href="#" class="float-right"><i class="fa fa-trash"></i></a>
          <div class="price">$250</div> <!-- price-wrap.// -->
        </figcaption>
      </figure>
      <figure class="itemside mb-3">
        <div class="aside">
          <img src="bootstrap-ecommerce-html/images/items/3.jpg" class="img-sm border">
        </div>
        <figcaption class="info align-self-center">
          <p class="title">Another name of item  item</p>
          <a href="#" class="float-right"><i class="fa fa-trash"></i></a>
          <div class="price">$250</div> <!-- price-wrap.// -->
        </figcaption>
      </figure>
      <div class="price-wrap text-center py-3 border-top">
        Subtotal: <strong class="h5 price">$1200</strong>
      </div>
      <a href="" class="btn btn-primary btn-block"> Checkout </a>
    </div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>

Upvotes: 1

ru4ert
ru4ert

Reputation: 1179

Try adding an id="test" to the button tag and to the dropdown div an attribute named aria-labelledby="test".

Upvotes: 1

Related Questions