CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
TheUnknownChop
TheUnknownChop

Reputation: 117

Making the dropdown menu aligned to the right in bootstrap 3

<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="group-menu-body">
  <div class="dropdown">
    <ul class="">
      <li class="">
        <a class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Logistics
        <span class="caret"></span>
      </a>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" style="right: 0; left: auto;">
          <li><a href="#">Grant Office Supplies/Gift</a></li>
          <li><a href="#">Print Name Card</a></li>
          <li><a href="#">Photo/Notarization</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

I have the following list of dropdown menus, however, the dropdown content is displaying as in the picture. Therefore, I would like to align it to the right. Is there a way to align it?

EXAMPLE:

enter image description here

Thank you.

Upvotes: 1

Views: 966

Answers (2)

Nitin Bisht
Nitin Bisht

Reputation: 5361

Try this:

.dropdown-menu {
    float:left;
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li class="dropdown-submenu dropdown-menu-right"> <a tabindex="-1" href="#">More options</a>
        <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
            <li><a tabindex="-1" href="#">Second level link</a></li>
        </ul>
    </li>
</ul>

Demo Link: http://jsfiddle.net/szx4Y/2392/

Upvotes: 1

Aryan Twanju
Aryan Twanju

Reputation: 2516

You just need to add dropdown-menu-right class to the dropdown-menu element. Try this code.

<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="group-menu-body">
    <div class="dropdown">
    <ul class="">
      <li class="">
        <a class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Logistics
        <span class="caret"></span>
      </a>
        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1" style="right: 0; left: auto;">
             <li><a href="#">Grant Office Supplies/Gift</a></li>
            <li><a href="#">Print Name Card</a></li>
            <li><a href="#">Photo/Notarization</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
      </li>    
    </ul>
  </div>
  </div>
</div>

Upvotes: 1

Related Questions