I am currently exploring the intricacies of the bootstrap grid system.
My goal is to create a set of buttons that look like this:
https://i.sstatic.net/V5meG.png
Each button should expand to fill the width and height of its container.
However, when a button contains more text, it wraps onto a new line and the close button becomes misaligned as shown below: https://i.sstatic.net/6PaWN.png
Here is the code I am using :
<div class="container-fluid ">
<div class="btn-group" style="width:100%">
<div class="row gy-5">
<div class="col p-2 border border-1">
<button class="btn-danger">Button Row 1</button>
</div>
<div class="col p-2 border border-1">
<button class="btn-danger">Button Row 1</button>
</div>
<div class="col p-2 border border-1">
<button class="btn-danger">Button Row 1</button>
</div>
</div>
</div>
<div class="btn-group" style="width:100%">
<div class="row">
<div class="col p-2 border border-1">
<button class="btn-danger">Button Row 2</button>
</div>
<div class="col p-2 border border-1">
<button class="btn-danger">Button Row 2</button>
</div>
<div class="col p-2 border border-1">
<button class="btn-danger">Button</button>
</div>
</div>
</div>
<div class="container">
<div class="btn-group" style="width:100%">
<div class="row">
<div class="col p-2 border border-1">
<button>Close</button>
</div>
</div>
</div>
</div>
</div>
I would appreciate any suggestions on how to ensure the buttons fill each box with padding, and all boxes have consistent height and width based on the largest button size.