Twitter Bootstrap Navigation Bar – Right Align Dropdown Menu

Question

You need to change the .pull-right class to ul element instead of li.

HTML

<ul class="nav pull-right">
  <li class="dropdown">
    <a href="https://stackoverflow.com/questions/12452134/properties.php?type=showall" class="dropdown-toggle" data-toggle="dropdown">
      Menu 2
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="propertiesSearch.php">Logout</a></li>
    </ul>
  </li>
</ul>

Version 2.1.1

I rewrote your code including only necessary JavaScript plugins (bootstrap-dropdown.js), the latest version of Twitter Bootstrap (2.1.1) and support for responsive design.

http://jsfiddle.net/caio/gvw7j/

If you see the responsive menu in the above link, you can see the “wide result” in this link:

http://jsfiddle.net/caio/gvw7j/embedded/result/

.pull-right is defined by:

.pull-right {
  float: right !important;
}

Version 3.1.1

There were no changes in this class. You might see the helpers classes section.

However, the documentation recommends using the class .navbar-right because it has some specific optimizations, unlike the pull-right class.

Leave a Comment Cancel reply