Bootstrap Text on Right of Breadcrumb Bar

css, twitter-bootstrap-3

Solution

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.

Problem

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).

Original source