CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapbootstrap-4
Gabriel Souza
Gabriel Souza

Reputation: 1015

Bootstrap 4 Dropdown Menu not showing

I'm using Bootstrap v4-alpha6 and i'm not getting to make my dropdown-menu to show up.

I tested a dropdown sample code from the bootstrap docs and it worked, mine is not even creating the "show" class. Does anyone know what it can be? I would be grateful if anyone could help.

I added the code below and here is the JSFiddle

.carrinho-compras {
  margin-left: 200px;
  color: #E90020;
  font-weight: 700;
  cursor: pointer;
}

.carrinho-compras .carrinho-compras-icone {
  position: relative;
  margin-right: 7px;
  width: 50px;
  height: 50px;
  border: 2px solid #E90020;
  border-radius: 50px;
  font-size: 18px;
  line-height: 50px;
  text-align: center;
}

.carrinho-compras-contador {
  position: absolute;
  bottom: -10px;
  left: 27px;
  width: 25px;
  height: 25px;
  background: #f9b414;
  border-radius: 25px;
  color: #fff;
  font-size: 14px;
  line-height: 25px;
  text-align: center;
}

.dropdown-carrinho-compras { 
  position: absolute;
  top: 130%;
  left: -150px;
  width: 300px;
  margin: 0;
  padding: 20px 40px 20px 85px;
  border-width: 5px 0 0;
  border-style: solid;
  border-color: #f9b414;
  border-radius: 0;
  color: #000;
}

.dropdown-carrinho-compras p {
  margin-bottom: 5px;
  font-size: 18px;
  }

.dropdown-carrinho-compras p + p {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
}

.carrinho-compras-icone-dropdown {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
  font-size: 50px;
  color: #f9b414;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="carrinho-compras">
  <div class="dropdown">
  <a href="#" data-toggle="dropdown"></a>
  <span class="fa fa-shopping-cart carrinho-compras-icone" aria-hidden="true"></span><span class="carrinho-compras-contador">0</span>Carrinho
  <div class="dropdown-menu dropdown-carrinho-compras">
    <span class="fa fa-shopping-cart carrinho-compras-icone-dropdown"></span>
    <p>Ops!</p>
    <p>Seu carrinho está vazio!</p>
  </div>
 </div>
</div>

Upvotes: 0

Views: 970

Answers (3)

Doug Kent
Doug Kent

Reputation: 855

The code marked above as an answer does not work for me. I assume popper.js is properly loaded, otherwise I'd be seeing an exception thrown by bootstrap.

Upvotes: 0

MJN
MJN

Reputation: 653

You should add class dropdown and wrap span within anchor

Updated Fiddle : https://jsfiddle.net/tL5eoex8/11/

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362350

The anchor should surround the span with icon and text...

https://www.codeply.com/go/evUqtZcmD6

<div class="dropdown">
    <a href="#" data-toggle="dropdown">
        <span class="fa fa-shopping-cart carrinho-compras-icone" aria-hidden="true"></span><span class="carrinho-compras-contador">0</span>Carrinho</a>
    <div class="dropdown-menu dropdown-carrinho-compras">
        <span class="fa fa-shopping-cart carrinho-compras-icone-dropdown"></span>
        <p>Ops!</p>
        <p>Seu carrinho está vazio!</p>
    </div>
</div>

Upvotes: 2

Related Questions