Fixing button size in Twitter Bootstrap

html, jquery, twitter-bootstrap

Solution

Give all the buttons you want to be of equal size a class e.g. `class="myButton"`

Then in the custom CSS area of your template you can just give that class a width:

.myButton {
    width: 150px;
}

Or, if you want them all to have width of the longest button you can use jQuery, just call this code whenever the values of your `.myButton` buttons change. This code is explained here: https://stackoverflow.com/a/5784399/1130734

$('.myButton').width(
    Math.max.apply(
        Math,
        $('.myButton').map(function(){
            return $(this).outerWidth();
        }).get()
    )
);

Here is a jsfiddle example http://jsfiddle.net/hQCf9/

Problem

I use Twitter Bootstrap in my web app. I have a table with many buttons. Text of button changes with the current state of the row of table. I change button text with Jquery, after Ajax request responses. My trouble is, these button texts' length is not fixed. Some of them is long some of them is short. So when one row has long text and another one has short text, it seems bad to user's eye. Can I fix button size? So all of them has equal size?

Original source

Related problems