Bootstrap center aligns dropdown menu

I have a drop-down button in the center of my page, but when I click the drop-down list, the actual dropdown is still on the left side of the page. What is the problem?

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; } 
+10
source share
5 answers

You need to put the drop-down menu and the toggle button in .btn-group .

In addition, Bootstrap provides a .text-center property to align content. This can be used instead of .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> 
+15
source

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

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

Jsfiddle.net example .

+3
source

If you want to center the alignment of the contents of the menu,

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

can do the trick.

+2
source

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

0
source

I found this while trying to solve a similar problem. I thank 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/

0
source

Source: https://habr.com/ru/post/1014532/


All Articles