CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
James Mitchell
James Mitchell

Reputation: 2467

Bootstrap center align a dropdown menu

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;
}

Upvotes: 18

Views: 60669

Answers (6)

dalius_ber
dalius_ber

Reputation: 1

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

Upvotes: 0

Filip Tvrdoň
Filip Tvrdoň

Reputation: 301

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/

Upvotes: 16

Matthew Barker
Matthew Barker

Reputation: 638

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

Upvotes: -1

sid-m
sid-m

Reputation: 1554

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

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

might do the trick.

Upvotes: 4

Stanislav Belichenko
Stanislav Belichenko

Reputation: 359

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.

Upvotes: 7

John Bupit
John Bupit

Reputation: 10618

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>

Upvotes: 24

Related Questions