How to vertical align buttons within a div?

Topic: How to vertical align buttons within a div?

davout free asked 5 years 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?

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

<p>Please take a look at our documentation for button groups:</p>

<p><a href="https://mdbootstrap.com/docs/angular/components/buttons-group/" target="_blank">https://mdbootstrap.com/docs/angular/components/buttons-group/</a></p>

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

<pre class="prettyprint"><code><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>
</code></pre>

<p>Edit, fix for buttons width:</p>

<pre class="prettyprint"><code>.btn-group-vertical .btn {
    width: initial;
}
</code></pre>

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 8.8.1
Device: PC
Browser: Chrime
OS: Windows10
Provided sample code: No
Provided link: No

davout

129Support score
19Questions 3Answers 0Snippets