alignment for twitter bootstrap dropdown-menu

Question

I have designed a bootstrap navbar with dropdown menu

http://jsfiddle.net/yabasha/fex8N/3/

<nav class="navbar navbar-inverse">
<div class="navbar-inner">
    <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
        </li>
    </ul>
</div>

ul.nav li.dropdown:hover > ul.dropdown-menu{
display: block;    
}

Is there a way to change the default alignment for the dropdown-menu (from left to center / right) so the arrow would display in center / right?

Answer 1

JSfiddle with your example http://jsfiddle.net/shail/fex8N/5/

change the following code to your liking to center the drop down caret :

.navbar .nav > li > .dropdown-menu:after {

left: 83px;  /change to your liking/

 }
 .navbar .nav > li > .dropdown-menu:before {

left: 83px;  /keep values in after and before same /

   }

To align the li elements to the right side :

.dropdown-menu > li > a {
             text-align:right;
   }

To align the li elements to the center :

.dropdown-menu > li > a {
             text-align:center;
   }

Answer 2

It's better to avoid the use of px for positioning, since the dropdown´s width may change. This would be more appropriate for centering the caret:

.navbar .nav > li > .dropdown-menu.pull-center:after {
  left: 50%;
  margin-left: -6px;
}
.navbar .nav > li > .dropdown-menu.pull-center:before {
  left: 50%;
  margin-left: -7px;
}

For right alignment, you just need to add the class pull-right to the dropdown:

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu pull-right">
    <!-- your menu -->
  </ul>
</li>

Answer 3

<div class="dropdown" data-toggle="dropdown" style="width: 150px; text-align: right;">
     <ul class="dropdown-menu" role="menu">
        <li><a href="#">Write Post</a></li>
        <li><a href="#">Posts List</a></li>
        <li class="divider"></li>
        <li><a href="#">Logout</a></li>
     </ul>
     <label class="dropdown-toggle" data-toggle="dropdown">Welcome Hero</label>
     <span class="caret" data-toggle="dropdown"></span>
  </div>

In this way you can align menu to left or right according to your choice.

Answer 4

I have implemented this in my project and have answered in below link.

https://stackoverflow.com/a/21849528/2026261.