CODEWITHSUNDEEP
csstwitter-bootstrap
Adam
Adam

Reputation: 1975

Using Bootstrap Dropdown on a centered image

I am trying to use the Bootstrap dropdown on a centered image, but I can't get the dropdown to be centered as well.

Fiddle with my current code

<div class="row">
    <div class="col-md-12 profile-picture text-center">
        <div class="dropdown col-md-3">
            <img src="http://i.imgur.com/9qfJGrz.jpg" alt="" class="profile-photo img-thumbnail" data-toggle="dropdown" />
            <ul class="dropdown-menu" role="menu" aria-labelledby="Change Settings">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Upload new picture</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Remove</a></li>
            </ul>
        </div>
    </div>
</div>

As you can see the dropdown gets aligned to the left, is there a way to get it to be centered underneath the image? It's in a col-md-3 so try resizing the screen as well.

Upvotes: 1

Views: 160

Answers (3)

Jon Kyte
Jon Kyte

Reputation: 2020

See updated fiddle

This would be one solution, which will work responsively as long as you declare a width for the menu:

.profile-photo {
  width: 170px;
  height: 170px;
  margin: 0 auto;
  display: block;
}

.dropdown-menu {
  margin-left: -85px;
  width: 170px;
  left: 50%;
  position: absolute;    
}

I removed your col-md-3 as you are just positioning the menu halfway across the col-md-12 with this method.

Upvotes: 1

MiniRagnarok
MiniRagnarok

Reputation: 959

Add display:inline-block to your dropdown.

.dropdown
{
    display: inline-block;
}

Here's a fiddle.

Upvotes: 3

Daniel Cheung
Daniel Cheung

Reputation: 4819

position: absolute, left:0px and float:left are the causes.

Fix:

.profile-picture .dropdown-menu {
    position: relative;
    clear: both;
    float: none;
}

The width will stick the the width of the column :)

If you don't like that, use these, or remove the column setup:

width: 170px;
margin: 0 auto;

Upvotes: 1

Related Questions