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 way of extending Bootstrap?

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>