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:

<div class="span8 background">
<div class="btn-group btn-block" id="colours">
<span class="btn"><input type='checkbox' name='size' value='red'/>red</span>
<span class="btn"><input type='checkbox' name='size' value='orange'/>orange</span>
<span class="btn"><input type='checkbox' name='size' value='yellow'/>yellow</span>
</div> <!-- /btn-group -->
</div>

And here is my current CSS, which doesn't work:

#colours { 
  width: 100%;
}

score 157 · Answer 1 · edited Apr 17 '15 at 08:10

157

Bootstrap has the .btn-group-justified css class.

How it's structured is based on the type of tags you use.

With <a> tags

<div class="btn-group btn-group-justified" role="group" aria-label="...">
   ...
</div>

With <button> tags

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

edited Apr 17 '15 at 08:10

Cesar Bielich

4,754
9
39
81

answered Feb 27 '14 at 22:10

Sam Axe

33,313
9
55
89

7

an example could be usefull. – Rafael Herscovici Jan 13 '15 at 09:37
2

It is important to point out that with using `.btn-group-justified` there is a difference on how you structure it based on either `` and ` – Cesar Bielich Apr 17 '15 at 07:01
4

This should definitively be the accepted answer. Do you know why we need to wrap each `.btn` in a `.btn-group` ? – Gabriel Aug 21 '16 at 14:44
This is what I was looking for thanks. when we modify width It definitely kills the responsiveness. This works perfect. :-) – Sundararajan Sep 12 '17 at 14:25
I have used above
for my two buttons width issue and its worked like a charm...thank you @Sam Axe
– Jignesh Vagh Jun 05 '18 at 14:43
3

This option has been removed in Bootstrap 4: https://getbootstrap.com/docs/4.2/migration/#button-group – marcovtwout Jul 26 '19 at 18:58

score 42 · Answer 2 · edited Apr 19 '15 at 19:13

42

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

    <div class="form-group">

            <div class="btn-group btn-group-justified">
                <div class="btn-group">
                    <button type="submit" id="like" class="btn btn-lg btn-success ">Like</button>
                </div>
                <div class="btn-group">
                    <button type="submit" id="nope" class="btn btn-lg btn-danger ">Nope</button>
                </div>
            </div>

        </div>

edited Apr 19 '15 at 19:13

potashin

44,205
11
83
107

answered May 10 '14 at 15:14

Simon Katan

706
7
11

3

This will split the buttons equally, if you want to have one button larger than the other, you need to set the width of each button: `
` `
` would give you an 80-20 split.
– Silver Paladin Jan 15 '15 at 21:17

khollenbeck · Accepted Answer · 2014-11-24T21:22:19.710

23

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

edited Nov 24 '14 at 21:22

answered Jan 07 '13 at 22:26

khollenbeck

16,028
18
66
101

Done! (just had to wait 5 mins till SO would let me accept.) Thanks again. – Richard Jan 07 '13 at 22:44
2

CHeck the css3-rule "flex"! – mr_app Aug 21 '13 at 13:09
2

@andersoyvind Thanks for the info, however I am not totally sold on w3fools.com. I have used box-sizing:border-box; so I know it works and I know that the syntax / information listed on this particular page is accurate. Keep in mind any page documenting code is prone to error and the best way to see if it works is by testing it. – khollenbeck Jan 23 '14 at 01:07
What if you don't know the number of buttons beforehand ? – CDT Oct 06 '18 at 13:08
@CDT, You could probably use flex now days. Assuming you don't have to support older versions of IE. OregonJeff has an example of flex in his answer. – khollenbeck Oct 08 '18 at 12:03

OregonJeff · Answer 4 · 2018-02-24T00:29:36.567

12

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 > .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 > .btn {
    flex: 1;
}

Here's a fiddle: http://jsfiddle.net/DEwX8/124/

edited Feb 24 '18 at 00:29

answered Feb 18 '14 at 09:16

OregonJeff

2,295
1
14
11

4

Oh and second: For Bootstrap 3 use `.btn-group-justified` – HenningCash Feb 20 '14 at 13:11
This doesn't produce equal length for individual buttons. Anything to add? – Malay Desai Feb 22 '18 at 21:14
@PiotrekZatorski, you're incorrect. The example I offered is using Bootstrap 2, but this updated version is using Bootstrap 3.3.6. http://jsfiddle.net/DEwX8/138/ – OregonJeff Mar 03 '18 at 02:36
@MalayDesai, my second fiddle absolutely produces equal width buttons (within reason). If you put an enormous amount of text in one and very little in the others, it obviously won't but for similar length button strings, they'll all be the same width. In the second fiddle, they're all 96px wide. – OregonJeff Mar 03 '18 at 02:41

Leandro Bardelli · Answer 5 · 2018-04-25T18:48:21.027

10

For bootstrap 4 just add this class:

w-100

edited Apr 25 '18 at 18:48

answered Mar 04 '18 at 00:51

Leandro Bardelli

10,561
15
79
116

1

Also add h-100 if one button in a row has wrapping text but another doesn't. – Jim Neff Dec 13 '19 at 13:55

score 5 · Answer 6 · answered Feb 27 '20 at 17:54

5

Bootstrap 4 removed .btn-group-justified. As a replacement you can use <div class="btn-group d-flex" role="group"></div> as a wrapper around elements with .w-100.

Try this:

<div class="btn-group d-flex" role="group>
  <button type="button" class="btn btn-primary w-100">Submit</button>
  <button type="button" class="btn btn-primary w-100">Cancel</button>
</div>

answered Feb 27 '20 at 17:54

tdahman1325

210
3
6

This answer is great, get the size of the buttons to adapt to the resolution of the screen. – Mar 30 '20 at 09:22

score 2 · Answer 7 · answered Jun 02 '16 at 22:57

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.

<div class="btn-group"
     style="width: 100%;">
    <button ng-repeat="thing in things"
            class="btn btn-default"
            ng-style="{width: (100/things.length)+'%'}">
        {{thing}}
    </button>
</div>

score 0 · Answer 8 · answered Jul 21 '16 at 07:38

<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="btn-group btn-block">
  <button type="button" data-toggle="dropdown" class="btn btn-default btn-xs  btn-block  dropdown-toggle">Actions <span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span></button><ul role="menu" class="dropdown-menu"><li><a href="#">Action one</a></li><li class="divider"></li><li><a href="#" >Action Two</a></li></ul></div>

score 0 · Answer 9 · answered Feb 07 '17 at 12:12

0

Bootstrap 4

            <ul class="nav nav-pills nav-fill">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Active</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Longer nav link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>

answered Feb 07 '17 at 12:12

Yianni

69
2

5

Code snippets should always come with some sort of explanation as to why that code works. Thanks! – AT82 Feb 07 '17 at 12:34
Answered here for https://stackoverflow.com/questions/37190248/how-to-get-button-groups-that-span-the-full-width-of-a-parent-in-bootstrap Bootstrap 4 – Fakeer Oct 07 '17 at 11:54

score 0 · Answer 10 · answered Sep 03 '19 at 10:41

Bootstrap 4 Solution

<div class="btn-group w-100">
    <button type="button" class="btn">One</button>
    <button type="button" class="btn">Two</button>
    <button type="button" class="btn">Three</button>
</div>

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.

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

10 Answers10