How to vertically align bootstrap buttons with text in a row?

Question

I'm having a problem with bootstrap rows. My buttons are not vertically aligning with my row text. Here's an example of the problem:

<div class="col-md-2 text-right">
    <button class="btn btn-lg btn-primary" type="button">A</button>
</div>
<div class="col-md-1 text-center">
    <h3>or</h3>
</div>
<div class="col-md-2 text-left">
    <button class="btn btn-lg btn-primary" type="button">B</button>
</div>

The text even hangs below the buttons if I make it any larger, like so:

<div class="col-md-1 text-center">
    <h1>OR</h1> <!-- H1 now! -->
</div>

Is there any way to get the bottom of "or" to line-up with the bottom of the button text? Or even just have the text be centered with the buttons? Thanks!

Update: here's a JSFiddle, as requested: http://jsfiddle.net/Dk37C/1/ (you'll have to stretch the right side display to see the behavior)

Answer 1

I found an easy way using bootstrap classes for text and a button in an MVC View, but I am pretty sure the idea will apply where ever you can use Bootstrap.

Just put the same header class, for example h3, in the class attributes of both the text and the button.

for example:

<div class="col-md-6 h3">
    Mileage Reimbursed Travel
</div>

<div class="col-md-2 h3">
    @Html.ActionLink("Create/Add ","Create", "EmployeeMileage")
</div>

Answer 2

The <h3> has a margin set on it, so if it gets bigger, the margin top will stay the same but the size of the font will increase 'downwards'.

You could set the styles of the <h3> to match those of the button, i.e. the padding, the line-height, the font-size, etc.

.text-center h3 {
  padding: 11px 16px; /* Extra pixel top and bottom for border on buttons */
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
  margin: 0;
}

http://jsbin.com/UNAYOqU/1/edit