Set a button group s width to 100 and make buttons equal width

Question

I m using Bootstrap  and I d like to set an entire btn-group to have a width of 100  of its parent element  I d also like the inner buttons to take equal widths  As it is  I can t achieve either    I ve made a JSFiddle here  http   jsfiddle net BcQZR 12   Here is the HTML     lt div class  span8 background  gt   lt div class  btn-group btn-block  id  colours  gt   lt span class  btn  gt  lt input type  checkbox  name  size  value  red   gt red lt  span gt   lt span class  btn  gt  lt input type  checkbox  name  size  value  orange   gt orange lt  span gt   lt span class  btn  gt  lt input type  checkbox  name  size  value  yellow   gt yellow lt  span gt   lt  div gt   lt  --  btn-group -- gt   lt  div gt    And here is my current CSS  which doesn t work    colours      width  100

User · Answer

Angular - equal width button group  Assuming you have an array of  things  in your scope      Make sure the parent div has a width of 100   Use ng-repeat to create the buttons within the button group  Use ng-style to calculate the width for each button       lt div class  btn-group       style  width  100    gt       lt button ng-repeat  thing in things              class  btn btn-default              ng-style   width   100 things length        gt            thing        lt  button gt   lt  div gt

User · Answer

Bootstrap has the  btn-group-justified css class   How it s structured is based on the type of tags you use   With  lt a gt  tags   lt div class  btn-group btn-group-justified  role  group  aria-label       gt          lt  div gt    With  lt button gt  tags   lt div class  btn-group btn-group-justified  role  group  aria-label       gt     lt div class  btn-group  role  group  gt       lt button type  button  class  btn btn-default  gt Left lt  button gt     lt  div gt     lt div class  btn-group  role  group  gt       lt button type  button  class  btn btn-default  gt Middle lt  button gt     lt  div gt     lt div class  btn-group  role  group  gt       lt button type  button  class  btn btn-default  gt Right lt  button gt     lt  div gt   lt  div gt

User · Answer

Bootstrap 4               lt ul class  nav nav-pills nav-fill  gt                   lt li class  nav-item  gt                       lt a class  nav-link active  href     gt Active lt  a gt                   lt  li gt                   lt li class  nav-item  gt                       lt a class  nav-link  href     gt Longer nav link lt  a gt                   lt  li gt                   lt li class  nav-item  gt                       lt a class  nav-link  href     gt Link lt  a gt                   lt  li gt                   lt li class  nav-item  gt                       lt a class  nav-link disabled  href     gt Disabled lt  a gt                   lt  li gt               lt  ul gt

User · Answer

There s no need for extra css the  btn-group-justified class does this   You have to add this to the parent element and then wrap each btn element in a div with  btn-group like this        lt div class  form-group  gt                lt div class  btn-group btn-group-justified  gt                   lt div class  btn-group  gt                       lt button type  submit  id  like  class  btn btn-lg btn-success   gt Like lt  button gt                   lt  div gt                   lt div class  btn-group  gt                       lt button type  submit  id  nope  class  btn btn-lg btn-danger   gt Nope lt  button gt                   lt  div gt               lt  div gt            lt  div gt

User · Answer

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 6 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt div class  btn-group btn-block  gt  x000D     lt button type  button  data-toggle  dropdown  class  btn btn-default btn-xs  btn-block  dropdown-toggle  gt Actions  lt span class  caret  gt  lt  span gt  x000D   lt span class  sr-only  gt Toggle Dropdown lt  span gt  lt  button gt  lt ul role  menu  class  dropdown-menu  gt  lt li gt  lt a href     gt Action one lt  a gt  lt  li gt  lt li class  divider  gt  lt  li gt  lt li gt  lt a href      gt Action Two lt  a gt  lt  li gt  lt  ul gt  lt  div gt  x000D   x000D   x000D

User · Answer

Bootstrap 4 removed  btn-group-justified  As a replacement you can use  lt div class  btn-group d-flex  role  group  gt  lt  div gt  as a wrapper around elements with  w-100   Try this    lt div class  btn-group d-flex  role  group gt     lt button type  button  class  btn btn-primary w-100  gt Submit lt  button gt     lt button type  button  class  btn btn-primary w-100  gt Cancel lt  button gt   lt  div gt

User · Answer

BOOTSTRAP 2  source   The problem is that there is no width set on the buttons  Try this    btn  width 20      EDIT   By default the buttons take an auto width of its text length plus some padding  so I guess for your example it is probably more like 14 5  for 5 buttons  to compensate for the padding    Note    If you don t want to try and compensate for padding you can use box-sizing border-box   http   www w3schools com cssref css3 pr box-sizing asp

User · Answer

For bootstrap 4 just add this class   w-100

User · Answer

Bootstrap 4 Solution   lt div class  btn-group w-100  gt       lt button type  button  class  btn  gt One lt  button gt       lt button type  button  class  btn  gt Two lt  button gt       lt button type  button  class  btn  gt Three lt  button gt   lt  div gt    You basically tell the btn-group container to have width 100  by adding w-100 class to it  The buttons inside will fill in the whole space automatically

User · Answer

I don t like the solution of settings widths on  btn because it assumes there ll always be the same number of items in the  btn-group  This is a faulty assumption and leads to bloated  presentation-specific CSS   A better solution is to change how  btn-group with  btn-block and child  btn s  are display  I believe this is what you re looking for    btn-group btn-block       display  table     btn-group btn-block  gt   btn       display  table-cell      Here s a fiddle  http   jsfiddle net DEwX8 123   If you d prefer to have equal-width buttons  within reason  and can support only browsers that support flexbox  try this instead    btn-group btn-block       display  flex     btn-group btn-block  gt   btn       flex  1      Here s a fiddle  http   jsfiddle net DEwX8 124

[css] Set a button group's width to 100% and make buttons equal width?

Examples related to css

Examples related to twitter-bootstrap