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