How to vertical align buttons within a div?

<div class="d-flex justify-content-center">
  <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
    <button mdbBtn type="button" color="amber" class="waves-light" mdbWavesEffect>Button</button>
    <button mdbBtn type="button" color="amber" class="waves-light" mdbWavesEffect>Button</button>
    <button mdbBtn type="button" color="amber" class="waves-light" mdbWavesEffect>Button</button>
    <button mdbBtn type="button" color="amber" class="waves-light" mdbWavesEffect>Button</button>
    <button mdbBtn type="button" color="amber" class="waves-light" mdbWavesEffect>Button</button>
    <button mdbBtn type="button" color="amber" class="waves-light" mdbWavesEffect>Button</button>
  </div>
</div>

.btn-group-vertical .btn {
    width: initial;
}

davout commented 5 years ago

That sort of works, but the problem is that it makes the buttons vertically larger than they were before

---

Arkadiusz Idzikowski staff commented 5 years ago

@davout that's how bootstrap styles buttons inside the button group. You can change those styles if you want, I added example css rule to my answer, just add it to your global styles.scss file.

---