Bootstrap Ul Navigation Float Right But Order Left To Right

I am trying to code a bootstrap navigation structure with 9 (don't laugh at my client please) buttons. I want the first 5 buttons on top of the other 4, aligned to the right. The

Solution 1:

You don't need any custom CSS, just separate the two chunks of links into separate navbar-navs, and do navbar-right on the one you want to the right: DEMO: http://www.bootply.com/X0kDjEwnga

<divclass="navbar-collapse collapse"><ulclass="nav navbar-nav"><li><ahref="index.html">Home</a></li><li><ahref="voor-wie.html">Voor wie</a></li><li><ahref="psychosomatiek.html">Psychosomatiek</a></li><li><ahref="haptotherapie.html">Haptotherapie</a></li><li><ahref="diana-kuijpers.html">Diana Kuijpers</a></li></ul><ulclass="nav navbar-nav navbar-right"><li><ahref="vergoeding.html">Vergoeding</a></li><li><ahref="klachtenlijsten.html">Klachtenlijsten</a></li><li><ahref="uitgeverij-vib.html">Uitgeverij VIB</a></li><li><ahref="contact.html">Contact</a></li></ul></div><!--/.nav-collapse -->

You may need to address their overlap when at specific in-between widths, but that's another story.

Solution 2:

I don't understand why are you doing this since you're overriding not only Bootstrap, but the concept of responsive design altogether, but you'll know. Anyways, simply change this part:

.navbar-inverse.navbar-nav > li > a {
    color: #FFF;
    float: right;
}

to

.navbar-inverse.navbar-nav > li > a {
    color: #FFF;
    float: left;
}