How to get button groups that span the full width of a parent in Bootstrap?

Question

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>

Answer 1

Correct solution for Bootstrap 4 (from its 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