Place button group at the far right side of a header with Bootstrap

Question

I've managed to place a button group at the far side of a header (H1/H2/H3). However, I don't know how to make the button float vertically in the middle. It just stays at the top. I tried using margin-top but since it's a fixed value it won't be dynamically placed in the middle.

Here's the screenshot:

Here's the code:

<div class="container">   <section>     <div class="page-header">       <h1 class="pull-left">         The header       </h1>       <div class="pull-right">         <div class="btn-group">           <button class="btn btn-primary">             Actions           </button>           <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">             <span class="caret"></span>           </button>           <ul class="dropdown-menu pull-right">             <li>               <a href="#">Action</a>             </li>             <li>               <a href="#">Another Action</a>             </li>           </ul>         </div>       </div>       <div class="clearfix"></div>     </div>     Contents   </section> </div> 

Thanks in advance.

jsFiddle: http://jsfiddle.net/aurorius/PKrUC/

Answer 1

This how to get a button lined up with the header in Bootstrap 3.2, 3.3 without any additional CSS in case anyone is coming here from Google.

Option 1

http://jsfiddle.net/ypaL5nko/

<div class='page-header'>   <div class='btn-toolbar pull-right'>     <div class='btn-group'>       <button type='button' class='btn btn-primary'>Button Text</button>     </div>   </div>   <h2>Header Text</h2> </div> 

The button group is optional if you're only using a single button.

Option 2

http://jsfiddle.net/sLdnae3q/

<h1>   <span>Header Text</span>   <button class='btn btn-primary pull-right'>Button Text</button> </h1> <hr/> 

Answer 2

Try this css code

.btn-group.my-class{   bottom: 15px;   position: relative;   top: 15px; } 

Dynamic header on H1/H2/H3 and may be H4

Demo: http://jsfiddle.net/PKrUC/2/