Rome
Rome

Reputation: 1

Bootstrap 3 Add Image to dropdown

I added an image size 53x53 next to the word Dropdown in my bootstrap navbar. The height of the navbar is 85px. adding the image makes the height resize to 100px I need it to remain 85px

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img class="image_top" src="myimage.png">Dropdown<span class="caret"></span></a>

.image-top {
    float: left;
    display: inline-block;
    margin-top: 7px;
    margin-right: 18px;
    margin-left: 0;
    margin-bottom: 4px;
    padding-right: 10px;
}

Upvotes: 0

Views: 2856

Answers (1)

Thanagor
Thanagor

Reputation: 36

You ckecked https://getbootstrap.com/components/#dropdowns? Documentation is very good..Eventhough it doesn't have an example with image dropdown i think..

You want something like this?

    <div class="dropdown">
  <button style = "padding: 3px;"class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      <span class="image_top"><img style = "max-width:20px; max-height: 20px;" src="myimage.png"></span>
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Upvotes: 1

Related Questions