Bootstrap navbar left to right

Question

It may be stupid but I do not have any idea how to make bootstrap navbar from right to left, I'm creating an arabic website, so i want to have 'home' nav from the right .

here is my code :

<div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="current"><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#our-menu">Menu</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
</div>

I tried pull righ and dir=ltr but it does not work Thanks in advance .

May be this will be helpful, [fiddle](http://jsfiddle.net/9LFV5/10/) — Noopur Dabhi, Nov 27 '15 at 13:53

score 6 · Accepted Answer · answered Nov 27 '15 at 13:53

6

The li are floated left by default.

Just change that to float:right

.navbar-nav>li {
    float: right
}

Codepen Demo

answered Nov 27 '15 at 13:53

Paulie_D

107,962
13
142
161

score 3 · Answer 2 · edited May 23 '17 at 11:44

3

There is a library for this http://cdnjs.com/libraries/bootstrap-rtl

I found this by googling "bootstrap right to left language" and it took me here Right to Left support for Twitter Bootstrap 3

edited May 23 '17 at 11:44

Community

1
1

answered Nov 27 '15 at 13:50

Andrew Bone

7,092
2
18
33

That's what I needed, thank you – phoenix Nov 27 '15 at 14:01

score 0 · Answer 3 · answered Nov 27 '15 at 13:49

0

You simply need to add the following CSS code inside your navbar's ul element.

ul.nav {
    direction: rtl;
}

Example here: http://jsfiddle.net/fs9fafjq/

answered Nov 27 '15 at 13:49

Valentin Mercier

5,256
3
26
50

1

Can someone explain the down vote? my example works perfectly – Valentin Mercier Nov 27 '15 at 13:51
It doesn't work if you use bootstrap http://jsfiddle.net/link2twenty/fs9fafjq/1/ so didn't meet OPs spec – Andrew Bone Nov 27 '15 at 13:55
I didn't down vote but the OP explained that this doesn't work (which is doesn''t with Bootstrap) - http://jsfiddle.net/fs9fafjq/2/ – Paulie_D Nov 27 '15 at 13:55

Bootstrap navbar left to right

3 Answers3