How to get button groups that span the full width of a parent in Bootstrap?
HtmlCssTwitter BootstrapClassButtongroupHtml Problem Overview
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>
Html Solutions
Solution 1 - Html
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
Solution 2 - Html
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>
Solution 3 - Html
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>
Solution 4 - Html
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')
| •••
.dropdown-menu
a.dropdown-item(href='#') An option
a.dropdown-item(href='#') Another option
Solution 5 - Html
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>
Solution 6 - Html
<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>