Question
I've using Twitter bootstrap and trying to align the navbars' text to the right, i.e - that the "brand" will appear on the right, and all else to the left of it. (For right-to-left website).
Any ideas how this can be accomplished?
Solution 2
Apply float:right to div with class as navbar-inner
https://stackoverflow.com/questions/14021784
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<div class="navbar-inner" style="float:right">
Like
<div class="navbar">
<div class="navbar-inner">
<div style="float:right">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
OTHER TIPS
pull-right and pull-left are default bootstrap classes that can help you achieve that without having to write your own css. For example,
<div class="navbar pull-right"></div> [equivalent to float:right]
<div class="navbar pull-left"></div> [equivalent to float:left]
Update these classes in bootstrap.css file
.navbar .nav {
display: block;
float: right;
left: 0;
margin: 0 10px 0 0;
position: relative;
}
.navbar .brand {
color: #777777;
display: block;
float: right;
font-size: 20px;
font-weight: 200;
margin-left: -20px;
padding: 10px 20px;
text-shadow: 0 1px 0 #FFFFFF;
}
.navbar .nav > li {
float: right;
}
The better solution is to change the value of dir in the body tag:
<body dir="rtl">
...
</body>
only change that... float:right to float:left
.navbar-toggle {
position: relative;
float: left;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
Apply float:right to ul with class as .navbar-nav
.navbar-nav{float:right;margin:0}.navbar-nav>li{float:right}
