Fixed width buttons with Bootstrap

Question

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 wa

Answer 1

You can also use the .btn-block class on the button, so that it expands to the parent's width.

If the parent is a fixed width element the button will expand to take all width. You can apply existing markup to the container to ensure fixed/fluid buttons take up only the required space.

<div class="span2">
<p><button class="btn btn-primary btn-block">Save</button></p>
<p><button class="btn btn-success btn-block">Download</button></p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div class="span2">
  <p><button class="btn btn-primary btn-block">Save</button></p>
  <p><button class="btn btn-success btn-block">Download</button></p>
</div>

Answer 2

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

Answer 3

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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


    <div class="col-md-12">
      <button class="btn btn-primary btn-block">Save</button>
    </div>
    <div class="col-md-12">
        <button class="btn btn-success btn-block">Download</button>
    </div>

Answer 4

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

Answer 5

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 ());
    $("#share_cancel").width (max);
    $("#share_commit").width (max); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <button type="button" class="btn btn-secondary" id="share_cancel">SHORT</button>
    <button type="button" class="btn btn-success" id="share_commit">LOOOOOOOOONG</button>

Answer 6

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