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.