Best IT Recipes

How to get groups of buttons that span the entire width of a parent in Bootstrap?

In Bootstrap, how can I get a group of buttons, such as the following, that span the entire width of the parent element? (for example, with the class ".btn-block", but applies to the 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>
+6
html css class twitter-bootstrap buttongroup
May 12 '16 at 14:41
source share
4 answers

Flexbox can do this.

 .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>
+20
May 12 '16 at 14:54
source share

The correct solution for Bootstrap 4 (from the 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 .

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

+3
Feb 08 '18 at 20:15
source share

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>
+1
May 12 '16 at 3:10
source share

In Bootstrap 4, use .d-flex on your .btn-group and .w-100 on separate 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
0
Mar 02 '18 at 23:07
source share


More articles:


All Articles