Three equal sized buttons in Bootstraper - html

Question

I've started to use bootstraper. And I want a row with three buttons. The buttons should have the same height and width. How can I achieve this?
I have come up with the following, but this gives me different heights of the buttons.
<div class="row-fluid">
<div class="span2 offset1">
<a href="#" class="btn btn-info btn-block">
<div class="buttonbody">
<img src=".." />
<p>Button1<br />Second row<p>
</div>
</a>
</div>
<div class="span2 offset1">
<a href="#" class="btn btn-info btn-block">
<div class="buttonbody">
<img src=".." />
<p>Button2<p>
</div>
</a>
</div>
<div class="span2 offset1">
<a href="#" class="btn btn-info btn-block">
<div class="buttonbody">
<img src=".." />
<p>Button3<p>
</div>
</a>
</div>
</div>

Answer 1

To get the same height, you'll have to use jQuery to calculate the max then apply it to all the elements that should have the same height:
var selector = ".row-fluid .buttonbody";
var maxHeight = 0;
$(selector).each(function() {
var selfHeight = $(this).height();
if (selfHeight > maxHeight) {
maxHeight = selfHeight;
}
});
// set the same height on all elements
$(selector).height(maxHeight);
UPDATE: To resize buttons each time the window is resized, you can do the following:
// declare a function to be called
// each time buttons need to be resized
var resizeButtons = function() {
var selector = ".row-fluid .buttonbody";
var maxHeight = 0;
$(selector).each(function() {
var selfHeight = $(this).height();
if (selfHeight > maxHeight) {
maxHeight = selfHeight;
}
});
// set the same height on all elements
$(selector).height(maxHeight);
}
$(function() {
// attach function to the resize event
$(window).resize(resizeButtons);
// call function the first time window is loaded;
resizeButtons();
});
Hope that helps.

Answer 2

Short Answer : http://jsfiddle.net/D2RLR/2942/
Long Answer:
The following code does what you want.
<div class="container">
<strong>Button 1</strong>
<strong>Button 2</strong>
<strong>Button 3</strong>
</div>​
Here is tutorial for the same.
I recommend you go through twitter bootstrap documenation and bootsnipp.com for more information.
From your comments, as you say you are using <br/> you can use the following : fiddle,
<div class="container">
<strong>Button 1<br/>Second row</strong>
<strong>Button 2<br/> </strong>
<strong>Button 3<br/> </strong>
</diV>​