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

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/

Solution 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/>

Solution 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/

Solution 3:

Using a float disables te display:inline-block; property, making it float to the top.

Just add the bootstrap class text-right to the container to keep the vertical align intact.