CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jermain189
Jermain189

Reputation: 35

Using bootstrap to align dropdown-menu to middle

Using bootstrap I am trying to get this dropdown menu to appear as a small box in the middle of the page. Like this.

This is the HTML code:

<div class="dropdown">
  <button 
  class="btn btn-default dropdown-toggle" 
  type="button" 
  id="dropdownMenu1" 
  data-toggle="dropdown" 
  aria-expanded="true">
    List
    <span class="caret"></span>
  </button>

  <ul class="dropdown-menu" style="right: 0; left: 0;" role="menu" aria-labelledby="dropdownMenu1">
    <li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">First</a></li>
    <li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Second</a></li>
    <li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Third</a></li>
  </ul> 
</div>

Upvotes: 1

Views: 363

Answers (2)

invernomuto
invernomuto

Reputation: 10221

Maybe the problem is the standard style of dropdown-menu:

.center {
  text-align: center;
}

.dropdown-menu{
  width: 200px;
  text-align:center !important;
  float: none !important;
  margin: 0 auto !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid center">
  <div class="col-md-5">

    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
        List
        <span class="caret"></span>
      </button>

      <ul class="dropdown-menu" style="right: 0; left: 0;" role="menu" aria-labelledby="dropdownMenu1">
        <li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">First</a>
        </li>
        <li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Second</a>
        </li>
        <li class="text-center" role="presentation"><a role="menuitem" tabindex="-1" href="#">Third</a>
        </li>
      </ul>
    </div>
    <div>
    </div>

Upvotes: 2

user4759923
user4759923

Reputation: 531

How about using <select size="1"><option>...</option></select>?

Upvotes: -1

Related Questions