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

User · Answer

Expanding  kravits88 answer   This will stretch the buttons to fit whole width    lt div className  btn-group-justified  gt   lt div className  btn-group  gt     lt button type  button  className  btn btn-primary  gt SAVE MY DEAR  lt  button gt   lt  div gt   lt div className  btn-group  gt     lt button type  button  className  btn btn-default  gt CANCEL lt  button gt   lt  div gt   lt  div gt

User · Answer

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    x000D   x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-beta 3 css bootstrap min css  rel  stylesheet    gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt p gt  x000D    Using btn-block x000D   lt  p gt  x000D   lt div class  container-fluid  gt  x000D     lt div class  btn-group col  role  group  aria-label  Basic example  gt  x000D       lt button type  button  class  btn btn-outline-secondary  gt Left lt  button gt  x000D       lt button type  button  class  btn btn-outline-secondary btn-block  gt Middle lt  button gt  x000D       lt button type  button  class  btn btn-outline-secondary  gt Right lt  button gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt p gt  x000D    Using w-100 x000D   lt  p gt  x000D   lt div class  container-fluid  gt  x000D     lt div class  btn-group col  role  group  aria-label  Basic example  gt  x000D       lt button type  button  class  btn btn-outline-secondary  gt Left lt  button gt  x000D       lt button type  button  class  btn btn-outline-secondary w-100  gt Middle lt  button gt  x000D       lt button type  button  class  btn btn-outline-secondary  gt Right lt  button gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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   lt button class  save button  gt Save lt  button gt    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

User · Answer

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    lt div class  btn-group  gt     lt button type  button  class  btn btn-default  gt Left lt  button gt     lt button type  button  class  btn btn-default  gt Middle lt  button gt     lt button type  button  class  btn btn-default  gt Right lt  button gt   lt  div gt     Bootstrap Button Groups

User · Answer

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      lt input type  submit  class  btn btn-primary  value     Calculate      gt       lt input type  reset  class  btn btn-primary value       Reset          gt    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

User · Answer

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   gt bwidth  bwidth   v  width           button btnGroup   width bwidth

User · Answer

Best way to the solution of your problem is to use button block btn-block with desired column width   x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D       lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D       lt script src  https   stackpath bootstrapcdn com bootstrap 4 1 3 js bootstrap min js  gt  lt  script gt  x000D       lt link href  https   stackpath bootstrapcdn com bootstrap 4 1 3 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   x000D       lt div class  col-md-12  gt  x000D         lt button class  btn btn-primary btn-block  gt Save lt  button gt  x000D       lt  div gt  x000D       lt div class  col-md-12  gt  x000D           lt button class  btn btn-success btn-block  gt Download lt  button gt  x000D       lt  div gt  x000D   x000D   x000D

User · Answer

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  lt  width  longest   width          promise   done function                  button-controlled   width longest               It worked like a charm

User · Answer

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    lt p gt  lt button href     class  btn btn-primary custom  gt Save lt  button gt  lt  p gt   lt p gt  lt button href     class  btn btn-success custom  gt Download lt  button gt  lt  p gt    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

User · Answer

Just came upon the same need and was not satified with defining fixed width    So did it with jquery    x000D   x000D      var max   Math max      share cancel   width         share commit   width      x000D          share cancel   width  max   x000D          share commit   width  max    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D       lt button type  button  class  btn btn-secondary  id  share cancel  gt SHORT lt  button gt  x000D       lt button type  button  class  btn btn-success  id  share commit  gt LOOOOOOOOONG lt  button gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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    lt div class  span2  gt   lt p gt  lt button class  btn btn-primary btn-block  gt Save lt  button gt  lt  p gt   lt p gt  lt button class  btn btn-success btn-block  gt Download lt  button gt  lt  p gt   lt  div gt     x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet    gt  x000D   x000D   x000D   lt div class  span2  gt  x000D     lt p gt  lt button class  btn btn-primary btn-block  gt Save lt  button gt  lt  p gt  x000D     lt p gt  lt button class  btn btn-success btn-block  gt Download lt  button gt  lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

[css] Fixed width buttons with Bootstrap

Examples related to css

Examples related to twitter-bootstrap