Home / Questions / 1250
Accepted
Alan
Asked: 2020-12-18 07:43:14 +0800 CST 2020-12-18 07:43:14 +0800 CST

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

  • 772

Starting from a navbarstandard Bootstrap we need some buttons or links to be aligned to the left, others to the center (for example: our icon brand) and others to the right.

This was the first thing I tried to do:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<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="navbar-left"><a href="#">Izquierda 1</a></li>
      <li class="navbar-left"><a href="#">Izquierda 2</a></li>
      <li class="active"><a href="#">Center 1</a></li>
      <li><a href="#">Center</a></li>
      <li class="navbar-right"><a href="#">Derecha 1</a></li>
      <li class="navbar-right"><a href="#">Derecha 2</a></li>
    </ul>
  </div>
</nav>

Searching the Bootstrap 3 documentation I didn't find any examples or ideas how to achieve this. How could it be done?

html5

4 Answers

  1. Best Answer

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

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

  }

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

    Which allows us to start with all the <li>centered ones and then pull them to the right and/or left as needed.

    The final 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

    • 9

  2. 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 bootstrap class.

    In this example we right-align 2 links, center brandit and two more right-aligned links.

    http://www.bootply.com/SlF4kleQfG

    <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;
}
    • 0

  3. Something simple but messy is to separate the ul with a div with a grid defined in bootstrap:

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

    It worked perfect for me. Greetings.

    • 0

  4. There is, if I'm not mistaken, a class pull-leftand pull-rightto make the component that owns that class float to the right or to the left, there are also mixins to include that in less.

    For more information you can check the section Helper Classes, Quick Floats , where you can find more information about it.

    • -1