[css] Fixed width buttons with Bootstrap

Does Bootstrap support fixed width buttons? Currently if I have 2 buttons, "Save" and "Download", the button size changes based on content.

Also what is the right way of extending Bootstrap?

With BS 4, you can also use the sizing, and apply w-100 so that the button can occupy the complete width of the parent container.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<p>_x000D_
  Using btn-block_x000D_
</p>_x000D_
<div class="container-fluid">_x000D_
  <div class="btn-group col" role="group" aria-label="Basic example">_x000D_
    <button type="button" class="btn btn-outline-secondary">Left</button>_x000D_
    <button type="button" class="btn btn-outline-secondary btn-block">Middle</button>_x000D_
    <button type="button" class="btn btn-outline-secondary">Right</button>_x000D_
  </div>_x000D_
</div>_x000D_
_x000D_
<p>_x000D_
  Using w-100_x000D_
</p>_x000D_
<div class="container-fluid">_x000D_
  <div class="btn-group col" role="group" aria-label="Basic example">_x000D_
    <button type="button" class="btn btn-outline-secondary">Left</button>_x000D_
    <button type="button" class="btn btn-outline-secondary w-100">Middle</button>_x000D_
    <button type="button" class="btn btn-outline-secondary">Right</button>_x000D_
  </div>_x000D_
</div>

This may be a silly solution, but I was looking for a solution to this problem and got lazy.

Anyway, using input class="btn..." ... instead of button and padding the value= attribute with spaces so that they are all the same width works pretty well.

eg :

<input type="submit" class="btn btn-primary" value="   Calculate   "/>    
<input type="reset" class="btn btn-primary"value="     Reset       "/>

I haven't been using bootstrap all that long, and maybe there is a good reason not to use this approach, but thought I might as well share

For your buttons, you can create another CSS selector for those special classes of buttons with a specified min-width and max-width. So if your button is

<button class="save_button">Save</button>

In your Bootstrap CSS file you can create something like

.save_button {
    min-width: 80px;
    max-width: 80px;
}

This way it should always stay 80px even if you have a responsive design.

As far as the right way of extending Bootstrap goes, Take a look at this thread:

Extending Bootstrap

btn-group-justified and btn-group only work for static content but not on dynamically created buttons, and fixed with of button in css is not practical as it stay on the same width even all content are short.

My solution: put the same class to group of buttons then loop to all of them, get the width of the longest button and apply it to all

var bwidth=0
$("button.btnGroup").each(function(i,v){
    if($(v).width()>bwidth) bwidth=$(v).width();
});
$("button.btnGroup").width(bwidth);

If you place your buttons inside a div with class "btn-group" the buttons inside will stretch to the same size as the largest button.

eg:

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div> 

Bootstrap Button Groups

Here I found a solution by comparing buttons in a button-group element. The simple solution is to get the one with the largest width and set the width to the other buttons. So they can have a equal width.

    function EqualizeButtons(parentElementId) {

    var longest = 0; 
    var element = $(parentElementId);

    element.find(".btn:not(.button-controlled)").each(function () {
        $(this).addClass('button-controlled');
        var width = $(this).width();
        if (longest < width) longest = width;

    }).promise().done(function () {
        $('.button-controlled').width(longest);
    });
}

It worked like a charm.

To do this you can come up with a width you feel is ok for both buttons and then create a custom class with the width and add it to your buttons like so:

CSS

.custom {
    width: 78px !important;
}

I can then use this class and add it to the buttons like so:

<p><button href="#" class="btn btn-primary custom">Save</button></p>
<p><button href="#" class="btn btn-success custom">Download</button></p>

Demo: http://jsfiddle.net/yNsxU/

You can take that custom class you create and place it inside your own stylesheet, which you load after the bootstrap stylesheet. We do this because any changes you place inside the bootstrap stylesheet might get accidentally lost when you update the framework, we also want your changes to take precedence over the default values.

Best way to the solution of your problem is to use button block btn-block with desired column width.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>_x000D_
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
_x000D_
_x000D_
    <div class="col-md-12">_x000D_
      <button class="btn btn-primary btn-block">Save</button>_x000D_
    </div>_x000D_
    <div class="col-md-12">_x000D_
        <button class="btn btn-success btn-block">Download</button>_x000D_
    </div>

Expanding @kravits88 answer:

This will stretch the buttons to fit whole width:

<div className="btn-group-justified">
<div className="btn-group">
  <button type="button" className="btn btn-primary">SAVE MY DEAR!</button>
</div>
<div className="btn-group">
  <button type="button" className="btn btn-default">CANCEL</button>
</div>
</div>

Just came upon the same need and was not satified with defining fixed width.

So did it with jquery:

    var max = Math.max ($("#share_cancel").width (), $("#share_commit").width ());_x000D_
    $("#share_cancel").width (max);_x000D_
    $("#share_commit").width (max); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
    <button type="button" class="btn btn-secondary" id="share_cancel">SHORT</button>_x000D_
    <button type="button" class="btn btn-success" id="share_commit">LOOOOOOOOONG</button>

A block width button could easily become responsive button if the parent container is responsive. I think that using a combination of a fixed width and a more detailed selector path instead of !important because:

1) Its not a hack (setting min-width and max-width the same is however hacky)

2) Does not use the !important tag which is bad practice

3) Uses width so will be very readable and anyone who understands how cascading works in CSS will see whats going on (maybe leave a CSS comment for this?)

4) Combine your selectors that apply to your targeted node for increased accuracy

.parent_element .btn.btn-primary.save-button {
    width: 80px;
}