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

user_14718856 0
Viewed 273

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?

enter image description here?

Is there a Bootstrap class that can do that?

<script src=https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js integrity=undefined crossorigin=anonymous></script>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/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>

bootstrap-5 css html
2 Answers

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/bootstrap@5.0.1/dist/js/bootstrap.min.js integrity=undefined crossorigin=anonymous></script>
<link rel=stylesheet href=https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/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>

user_5194130

you can use custom class for #full:

.custom-flex { 
    display:flex; 
    gap:30px;                  /* custom gap */
}
.custom-flex > * { 
   flex:1;                    /* add full width for children */
}
user_140210640
Related