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:

And I need them like this:

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

Answer 1

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!