How does one right-justify bootstrap pills with css

Question

I have a header with three sections, left, middle and right. I cant seem to come up with the proper css to make the column on the right (with 'email history' and 'back to list') float to the right side of the column. How can anyone tell me how this is done? Any help is appreciated.

<div class="col-sm-5" style="text-align:left">
    <button type="submit" class="btn btn-primary btn-lg navbar-btn">Save Contact</button>
</div>
<div class="col-sm-2" style="text-align:center">
   <h2 class="branding">Edit Contact</h2>
</div>
<div class="col-sm-5">
   <ul class="nav nav-pills">
      <li class="active"><a href="/GoHistory">Email History</a></li>
      <li class="active"><a href="/email_marketing/contact-list">Back To List</a></li>
   </ul>
</div>

Answer 1

NOTE: The answer below is valid for Bootstrap 2 and 3; in Bootstrap 4 the equivalent class is float-right, and viewport-specific float classes are also available.

---

The easiest option is to add the class pull-right to the ul element. This will float the pills to the right.

Sidenote: you can replace those inline styles with the helper classes text-left (which is often redundant) and text-center.

Here's a bootply example: http://www.bootply.com/134139

Answer 2

Need to overwrite some Bootstrap styling...

You'll need to remove the float on the list items and set it to display:inline-block. Then for the unordered-list element, add text-align:left.

Here's the CSS:

ul.nav.nav-pills {
    text-align: right;
}

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

Enjoy!