full-width – MaxVergelli.com https://www.maxvergelli.com sourcecode repository Tue, 07 Apr 2020 15:28:42 +0000 en-US hourly 1 https://i2.wp.com/www.maxvergelli.com/wp-content/uploads/2020/04/wp-1586823685141.png?fit=32%2C32&ssl=1 full-width – MaxVergelli.com https://www.maxvergelli.com 32 32 34603511 Bootstrap 4 – How to get button groups that span the full width of a parent https://www.maxvergelli.com/how-to-get-button-groups-that-span-the-full-width-of-a-parent-in-bootstrap-4/ https://www.maxvergelli.com/how-to-get-button-groups-that-span-the-full-width-of-a-parent-in-bootstrap-4/#respond Mon, 06 Apr 2020 16:08:22 +0000 http://www.maxvergelli.com/?p=149 Read More]]> 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>

]]> https://www.maxvergelli.com/how-to-get-button-groups-that-span-the-full-width-of-a-parent-in-bootstrap-4/feed/ 0 149