How to vertical align buttons within a div?

web
mobile

Topic: How to vertical align buttons within a div?

davout pro premium asked 2 months ago

I have a group of buttons within a div. How can I set the div so that the buttons are set to centred vertically?


Arkadiusz Idzikowski staff answered 2 months ago

Please take a look at our documentation for button groups:

https://mdbootstrap.com/docs/angular/components/buttons-group/

Here is an example for vertical button group that is displayed in the center of the screen:

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

Edit, fix for buttons width:

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

davout pro premium commented 2 months ago

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


Arkadiusz Idzikowski staff commented 2 months 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.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Angular
  • MDB Version: 8.8.1
  • Device: PC
  • Browser: Chrime
  • OS: Windows10
  • Provided sample code: No
  • Provided link: No
Tags