Bootstrap buttons with same height and vertically-centered text

Question

I have 3 Bootstrap buttons side-by-side, but one of them has a line break (I'm modifying them with white-space: normal). I need them all to have the same height, and vertical-centered text.

I have them like this: current

And I need them like this: desired

I can't figure out how to do this. Any ideas?

Take a look at this answer: http://stackoverflow.com/a/19695851/3224008 — Leistungsabfall, Jun 26 '15 at 18:51

score 2 · Accepted Answer · answered Jun 26 '15 at 19:00

would something like this work for you?

.option-button {
    height:100%;
}

.media-object {
    height: 100px;
}

<br/><br/>
<div class="media-object pull-left">
    <button class="btn btn-info option-button">A</button>
    <button class="btn btn-primary option-button">A<br/>B<br/>C</button>
    <button class="btn btn-info option-button">A</button>
</div>            

<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

you can use height: 100%; on the buttons but with that, you need to set the height of the containing div. hope this helps!

This is just perfect! Such a simple solution. Thank you very much. — so4t, Jun 26 '15 at 19:05

Bootstrap buttons with same height and vertically-centered text

1 Answers1