How does one right-justify bootstrap pills with css
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>
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