-2

I'm trying to get 3 buttons with bootstrap4 with one large to the left, and 2 smaller ones one on top of another to the right, and am doing so with btn-groups. I'd expect the large button to the left to occupy the full column (ie be the height of the sum of the two other buttons on top of another), and have all the text of the buttons centered, like that:

+-------+-------+
|       |   2   |
|   1   +-------+
|       |   3   |
+-------+-------+

It works well if I use buttons but when I use an anchor I can't get the first large button to have its content vertically centered.

What works is:

<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>

Giving the output I want, with the "1" vertically-centered. But when I change it to

<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" isn't vertically aligned anymore, while the button still occupies all the space it should. I tried quite a few tricks but none gave the expected result (I could get the left button centered but not occupying the full column). What am I missing when going from button to anchor? I could probably use onlick or other methods but I'm really curious about understanding what happens when I go to anchors.

[EDIT: while this was marked as duplicate of other vertical align questions, this question was specific about what happens when going from a button to an anchor. The answer of @Bdeering was perfect in suggesting the issue was losing the flex behavior when going to anchor]

Xavier Bertou
  • 1
  • 2

1 Answers1

0

Not sure why this doesn't work properly, but you can fix it with some custom styles.

Just add this to your css and the text inside each anchor will be centered:

a.btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

(or using a style tag in your html)

<style>
  a.btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
Bdeering
  • 338
  • 3
  • 14