How to get button groups that span the full width of a parent in Bootstrap?

Question

In Bootstrap, how can I get a button group like the following that span the full width of a parent element? (like with the ".btn-block" class, but applied to a group http://getbootstrap.com/css/#buttons-sizes )

<div class="btn-group" role="group" aria-label="...">
  <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>

Possibly this [Justified button groups](https://getbootstrap.com/components/#btn-groups-justified) — vanburen, May 12 '16 at 14:53

Diego P. Steiner · Answer 1 · 2021-10-08T15:19:21.933

109

Correct solution for Bootstrap 4 and Bootstrap 5 (from Bootstrap 4 migration documentation):

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.

Example:

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

Source: https://getbootstrap.com/docs/4.0/migration/#button-group

Edit: verified solution with Bootstrap 5

edited Oct 08 '21 at 15:19

answered Feb 08 '18 at 20:15

Diego P. Steiner

2,075
1
15
14

3

Works perfectly, simple, standard. Thanks. – Tomas Gonzalez Jul 30 '18 at 21:58
10

Add class `w-100` to the `.btn-group` element, too. – Flinsch Oct 22 '18 at 11:48
4

for me it also works fine without adding `w-100` to each button class in `bootstrap 4.5.2` – Roman Grinev Nov 04 '20 at 20:15

score 92 · Accepted Answer · answered May 12 '16 at 14:54

92

Flexbox can do that.

.btn-group.special {
  display: flex;
}

.special .btn {
  flex: 1
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group special" role="group" aria-label="...">
  <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>

answered May 12 '16 at 14:54

Paulie_D

107,962
13
142
161

best method to use – Caleb Pitman Jun 29 '17 at 17:30
2

I would upvote this twice if I could; this works like a charm – lgants Feb 13 '18 at 05:02
1

For those using bootstrap 4.5 just use .d-flex along .btn-group – vamsi Dec 07 '20 at 16:53

score 7 · Answer 3 · answered Sep 25 '19 at 06:22

You can also use bootstraps btn-block will span across parent.

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

https://getbootstrap.com/docs/4.0/components/buttons/

score 6 · Answer 4 · answered Mar 02 '18 at 23:07

In Bootstrap 4, make use of .d-flex on your .btn-group and .w-100 on individual buttons:

.btn-group.d-flex(role='group')
  button.w-100.btn.btn-lg.btn-success(type='button') 
  button.w-100.btn.btn-lg.btn-danger(type='button') 
  .btn-group(role='group')
    button#btnGroupDrop1.btn.btn-lg.btn-light.dropdown-toggle(type='button', data-toggle='dropdown')
      | &#8226;&#8226;&#8226;
    .dropdown-menu
      a.dropdown-item(href='#') An option
      a.dropdown-item(href='#') Another option

score 3 · Answer 5 · answered May 12 '16 at 15:10

3

You can also use .btn-group-justified.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="btn-group btn-group-justified">
    <a href="button" class="btn btn-default">Left</a>
    <a href="button" class="btn btn-default">Middle</a>
    <a href="button" class="btn btn-default">Right</a>
  </div>
</div>

answered May 12 '16 at 15:10

mhatch

4,441
6
36
62

1

Outdated. Removed .btn-group-justified. As a replacement you can use
as a wrapper around elements with .w-100. https://getbootstrap.com/docs/4.3/migration/#button-group – Luckylooke Oct 02 '19 at 15:21

score 2 · Answer 6 · answered Aug 07 '20 at 09:02

2

<div class="col-sm-12">
<div class="btn-group btn-block" role="group">
    <button class="btn btn-success col-sm-10" type="submit">Button 1</button>
    <button class="btn btn-danger col-sm-2" type="submit">Button 2</button>
</div>

answered Aug 07 '20 at 09:02

Pran

1,817
23
23

How to get button groups that span the full width of a parent in Bootstrap?

6 Answers6

Linked