Home » Design » CSS » Bootstrap 4 – How to get button groups that span the full width of a parent

Bootstrap 4 – How to get button groups that span the full width of a parent

posted in: Bootstrap, CSS, Design, HTML, Programming 0

In Bootstrap 4, we can get a button group like the following

<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>

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 )

The solution is just using <div class=”btn-group d-flex” role=”group”></div> as a wrapper around elements with .w-100

This is the correct markup:


<div class="btn-group d-flex w-100" 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>


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.