How to align the right toolbar in Bootstrap?

Question

When you have a toolbar with a few buttons and a dropdown, like this one :

<div class="container"> <div class="btn-toolbar" role="toolbar"> <div class="btn-group"><a class="btn btn-default" role="button" href="">Invite People</a></div> <div class="btn-group"><a class="btn btn-default" role="button" href="">Create Campaign</a></div> <div class="btn-group"><a class="btn btn-default" role="button" href="">Edit</a></div> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> </ul> </div> </div> </div> 

How to align it? I tried to pull directly on the toolbar, as well as groups of buttons, as well as one group of buttons with the right button, containing all the buttons. None of them worked.

Answer 1

Try it like this: DEMO

 <div class="container"> <div class="btn-toolbar pull-right" role="toolbar"> ..... </div></div> 

Bootstrap pull-right works fine.

Answer 2

You can simply add the pull-right class to the .btn-toolbar or to your css file, just give your toolbar the float right property like so:

 .btn-toolbar { float: right; }