18

I have a dropdown button in the center of my page, but when I click the dropdown, the actual dropdown part is still on the left side of the page. What's the issue?

HTML

<div class="row">
    <div class="col-md-12 school-options-dropdown">
            <div class="dropdown">
              <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a School
              <span class="caret"></span></button>
              <ul class="dropdown-menu">
                  <li><a href="#">Add your school</a></li>
                  <li><a href="#">Hello</a></li>
              </ul>
            </div>
    </div>
</div>

CSS

div.school-options-dropdown {
    text-align: center;
}

.dropdown {
    text-align:center;
}

.dropdown-menu {
    text-align: center;
}
1
  • Please provide a working example
    – Viktor
    Commented Jan 29, 2017 at 3:44

6 Answers 6

24

You need to put the dropdown menu and the toggle button inside a .btn-group.

Also, Bootstrap provides the .text-center property to align the contents. This can be used on .school-options-dropdown, instead of manually adding CSS.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="row">
  <div class="col-md-12 school-options-dropdown text-center">
    <div class="dropdown btn-group">

      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Choose a School
        <span class="caret"></span>
      </button>

      <ul class="dropdown-menu">
        <li><a href="#">Add your school</a></li>
        <li><a href="#">Hello</a></li>
      </ul>

    </div>
  </div>
</div>

16

I've found this when trying to solve similar problem. Credit to Vladimir Rodkin

.dropdown-menu-center {
right: auto;
left: 50%;
-webkit-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);}

https://jsfiddle.net/VovanR/2ao5b22h/

1
  • If you want use this with ver4, Try this..dropdown-menu-center { right: auto !important; left: 50% !important; top: 100% !important; -webkit-transform: translate(-50%, 0) !important; -o-transform: translate(-50%, 0) !important; transform: translate(-50%, 0) !important; } Commented Apr 28, 2021 at 4:46
7

If you don't want change your html code, this is css will solve your problem:

.dropdown {text-align:center;}
.button, .dropdown-menu {margin:10px auto}
.dropdown-menu {width:200px; left:50%; margin-left:-100px;}

Example on jsfiddle.net.

1
4

If you are looking to center align the contents of the menu, then

ul.dropdown-menu>li {
    text-align: center;
}

might do the trick.

0

With a Bootstrap 5 you can use JavaScript to override Popper.js after page loads like:

new bootstrap.Dropdown(document.getElementById('dropdown_button'), {
    popperConfig: function () {
        return {placement: 'bottom'}
    }
});

Official documentation: https://getbootstrap.com/docs/5.0/components/dropdowns/#using-function-with-popperconfig

Here are placements you can override to: https://popper.js.org/docs/v2/constructors/#options

-1

Make sure you add the alignment in the entire div class defining it

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.