How can I align some components of a bootstrap3 navbar to the left and others to the right?

A solution without the need to modify your html structure is to use .pull-right if the li goes to the right and .pull-left if you go to the left and placing this script:

  .navbar-nav {
    width: 100%;
    text-align: center;

  }

  .navbar-nav > li {
      float: none;
      display: inline-block;
    }

That allows us to start with all the <li> centered and then we pull them to the right and / or left what we need.

The end of the HTML would look like this:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="pull-left"><a href="#">Izquierda 1</a></li>
      <li class="pull-left"><a href="#">Izquierda 2</a></li>
      <li class="active"><a href="#">Center 1</a></li>
      <li><a href="#">Center</a></li>
      <li class="pull-right"><a href="#">Derecha 1</a></li>
      <li class="pull-right"><a href="#">Derecha 2</a></li>
    </ul>
  </div>
</nav>

Live example

This is one of the solutions I found:

What we can do to align each button to our liking is to separate them into several <ul> with their corresponding class of bootstrap

In this example we align 2 links to the right, we center the brand and two more links aligned to the right.

link

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <a class="navbar-brand" href="#">Brand</a>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Izquierda</a></li>
        <li><a href="#about">Izquierda</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#about">Derecha</a></li>
      <li><a href="#contact">Derecha</a></li>
    </ul>
  </div>
</nav>

CSS:

.navbar-brand
{
    position:absolute;
    width:100%;
    left:0;
    text-align:center;
    margin:auto;
}

Something simple but untidy is to separate the ul with a div with a grid of those that are defined in bootstrap:

<ul>
 <li></li>
</ul>
<div class="col-md-5"></div>
<ul>
 <li></li>
</ul>

It worked perfectly for me. Greetings.

There is, if I'm not wrong, a class pull-left and pull-right to make the component that has that class float to the right or left, there are also mixins to include that in less.

For more information you can check the Help Classes section, Quick Floats , where you can find more information at respect.