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

    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="voor-wie.html">Voor wie</a></li>
        <li><a href="psychosomatiek.html">Psychosomatiek</a></li>
        <li><a href="haptotherapie.html">Haptotherapie</a></li>
        <li><a href="diana-kuijpers.html">Diana Kuijpers</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="vergoeding.html">Vergoeding</a></li>
        <li><a href="klachtenlijsten.html">Klachtenlijsten</a></li>
        <li><a href="uitgeverij-vib.html">Uitgeverij VIB</a></li>
        <li><a href="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;
}