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.

2 answers

  • answered 2018-07-11 04:29 Aryan Twanju

    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>
    

  • answered 2018-07-11 04:45 Nitin Bisht

    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/