CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Erik Z
Erik Z

Reputation: 4770

Three equal sized buttons in Bootstraper

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>

Upvotes: 0

Views: 383

Answers (2)

Alfero Chingono
Alfero Chingono

Reputation: 2663

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.

Upvotes: 1

Yasser Shaikh
Yasser Shaikh

Reputation: 47774

Short Answer : http://jsfiddle.net/D2RLR/2942/

Long Answer:

The following code does what you want.

<div class="container">
    <a href="#" class="btn"><strong>Button 1</strong></a>
    <a href="#" class="btn"><strong>Button 2</strong></a>
    <a href="#" class="btn"><strong>Button 3</strong></a>
</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">
<a href="#" class="btn"><strong>Button 1<br/>Second row</strong></a>
<a href="#" class="btn"><strong>Button 2<br/>&nbsp;</strong></a>
<a href="#" class="btn"><strong>Button 3<br/>&nbsp;</strong></a>
</diV>​

Upvotes: 1

Related Questions