Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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:

enter image description here

<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:

enter image description here

<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)

like image 304
Mike Cialowicz Avatar asked Nov 26 '13 05:11

Mike Cialowicz


2 Answers

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>
like image 105
glenn garson Avatar answered Sep 20 '22 01:09

glenn garson


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

like image 22
davidpauljunior Avatar answered Sep 17 '22 01:09

davidpauljunior