Bootstrap Text on Right of Breadcrumb Bar

Question

I am using Bootstrap 3 with the default theme. I have breadcrumbs using:

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

How might I get text properly aligned on the right side of the breadcrumb bar? I couldn't find a way in the Bootstrap documentation.

Edit: I don't want the breadcrumbs right-aligned. I would like a separate span of text to be shown on the right side of the bar (since is it kind of wasted space).

Answer 1

Update 2019 using Bootstrap 4.3

The solution with class="pull-right" doesn't work with Bootstrap 4. I've been able to put text on the right using ml-auto.

https://stackoverflow.com/a/51672730

  <ol class="breadcrumb">
    <li class="breadcrumb-item ml-3">
      <a href="#reserver">Réserver</a>
    </li>
    <li class="breadcrumb-item">
      <a href="#about">À propos</a>
    </li>
    <li class="breadcrumb-item">
      <a href="#horaires">Horaires</a>
    </li>
    <li class="breadcrumb-item">
      <a href="#avis">Avis</a>
    </li>
    <li class="ml-auto">Détails établissement</li>
  </ol>
</nav>

Answer 2

No big deal, just use Bootstrap's pull-right class:

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
  <li class="pull-right">Right Aligned Text</li>
</ol>

Answer 3

When I tried just add an <li> with pull-right, the breadcrumb separator showed up before my right justified item (which is not what I wanted).

I wanted a search button at the right end of the breadcrumb bar, so I did this:

<div class="breadcrumb">
  <div class="pull-right">
    <form>
      <button type="submit" class="btn btn-primary btn-sm">Search</button>
    </form>
  </div>
  <ol class="breadcrumb" style="height:100%;">
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="active">Data</li>
  </ol>
</div>

By using the breadcrumb class on the outer div, you get the breadcrumb background on the whole thing. You may need to play with the padding on the outermost div, depending on the height of what's in your right div.