How to make multiple bootstrap buttons share a certain width in a row?

Question

As based on my example below, how can I make <div id="full"> take the full width of the parent and have the 3 buttons inside share this width and have the same sizes with gaps between them?

?

Is there a Bootstrap class that can do that?

<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js integrity=undefined crossorigin=anonymous></script>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css integrity=undefined crossorigin=anonymous>

<div class="d-grid gap1">
  <div id="full">
    <button type="button" class="btn btn-success">shared width button</button>
    <button type="button" class="btn btn-success">shared width button</button>
    <button type="button" class="btn btn-success">shared width button</button>
  </div>
  <button type="button" class="btn btn-primary">full width button</button>
</div>

Answer 1

You can use Bootstrap flex to achieve this.

Add the d-flex class to the parent container of the buttons, then flex-fill to each button. You can also use the spacing classes to add gutters between the buttons and the following content.

<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js integrity=undefined crossorigin=anonymous></script>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css integrity=undefined crossorigin=anonymous>
<div class="d-grid gap1">
  <div id="full" class="d-flex mb-1">
    <button type="button" class="btn btn-success flex-fill me-1">shared width button</button>
    <button type="button" class="btn btn-success flex-fill me-1">shared width button</button>
    <button type="button" class="btn btn-success flex-fill">shared width button</button>
  </div>
  <button type="button" class="btn btn-primary">full width button</button>
</div>