CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
azam
azam

Reputation: 319

position dropdown button and dropdown menu in center?

<div class="dropup center-block">
            <button class="btn btn-info dropdown-toggle center-block" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About Me<span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li class="dropdown-header">Dropup stuff</li>
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </div>

added center-block to both div and button, but unable to get the dropup menu positioned center.

A similar thing can be found at "Dropdown Position" in this page. The button is aligned left, but the menu is right. I'm able to align the menu right but not center.

Please help!

Upvotes: 7

Views: 56217

Answers (4)

Taj Khan
Taj Khan

Reputation: 589

here is your solution https://jsfiddle.net/7urwr62j/

 <div class="text-center">
  <div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>
</div>
<style>
.dropdown{
  display: inline-block;
}
</style>

Upvotes: -1

mihkov
mihkov

Reputation: 1189

A little trick add some css rules,text-center with dropdown class and dropdown-menu-center to the list.

source: https://stackoverflow.com/a/28078054/6142097

.dropdown-menu-center {
  left: 50% !important;
  right: auto !important;
  text-align: center !important;
  transform: translate(-50%, 0) !important;
}
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<div class="container">
  <h2>Dropdowns</h2>
  <div class="dropdown text-center">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-menu-center">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li class="divider"></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

Upvotes: 16

dresdain
dresdain

Reputation: 174

Try adding a margin-left

 <div class="dropup center-block" style="margin-left: 49%;">

Upvotes: 2

Redet Getachew
Redet Getachew

Reputation: 130

The solution is to use 'dropdown-menu-center" class instead of 'center-block'.

Upvotes: 0

Related Questions