alignment for twitter bootstrap dropdown-menu - css

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>Home</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Link</li>
<li>Link</li>
<li>Link</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

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 2

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 3

I have implemented this in my project and have answered in below link.
https://stackoverflow.com/a/21849528/2026261.

Answer 4

<div class="dropdown" data-toggle="dropdown" style="width: 150px; text-align: right;">
<ul class="dropdown-menu" role="menu">
<li>Write Post</li>
<li>Posts List</li>
<li class="divider"></li>
<li>Logout</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.