Menu
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> 
239
Add class . btn-block to create a block level button that spans the entire width of the parent element.
How can set full width button in Bootstrap? Create block level buttons—those that span the full width of a parent—by adding . btn-block .
For full- width button, we have used width:100% and display: block .
How do I get my bootstrap buttons the same size or width ? Use btn-block, (other optional elements below are: btn-lg for large and btn-primary for blue primary buttons. Use col-sm-4 for narrow and col-sm-12 or entire row for full length buttons.
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
68
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
