I am currently trying to create a layout using Bootstrap 4 with three buttons, one large button on the left and two smaller buttons stacked on top of each other to the right. I am using btn-groups to achieve this layout. My goal is to have the large button on the left occupy the full column height (equal to the sum of the heights of the two smaller buttons) and have all the text centered within the buttons, like so:
<div class="btn-group btn-block">
<button type="button" class="btn btn-primary p-5 w-50">1</button>
<div class="btn-group-vertical w-50">
<button type="button" class="btn btn-secondary p-5">2</button>
<button type="button" class="btn btn-success p-5">3</button>
</div>
</div>
However, when I replace the buttons with anchors like so:
<div class="btn-group btn-block">
<a href="#" role="button" class="btn btn-primary p-5 w-50">1</a>
<div class="btn-group-vertical w-50">
<a href="#" role="button" class="btn btn-secondary p-5">2</a>
<a href="#" role="button" class="btn btn-success p-5">3</a>
</div>
</div>
The "1" no longer aligns vertically, even though the anchor tag still occupies the correct space. I have tried various tricks to solve this issue, but none have produced the desired result (I could center the left button, but it wouldn't occupy the full column).
What am I missing when transitioning from buttons to anchors? While I could use onclick or other methods to work around this, I am interested in understanding what changes when moving from buttons to anchors.
[EDIT: Although this question was flagged as a duplicate of other vertical-align queries, it specifically addresses the differences encountered when switching from a button to an anchor tag. @Bdeering provided a perfect answer by suggesting that the issue may be related to losing flex behavior when using anchor tags.]