BootstrapVue best way to vertically align content?

Question

Is there an optimal way to vertically align my content? I have 3 buttons that I'd like to align vertically.

        <b-container>
            <b-row>
                <b-col><b-button class="main-navigation-button" variant="primary">Create</b-button></b-col>
                <b-col><b-button class="main-navigation-button" variant="primary">Search</b-button></b-col>
                <b-col><b-button class="main-navigation-button" variant="primary">Edit</b-button></b-col>
            </b-row>
        </b-container>

Solution 1

The following should do the trick for you:

<b-container>
  <b-row class="vh-100 text-center" align-v="center">
    <b-col><b-button class="main-navigation-button" variant="primary">Create</b-button></b-col>
    <b-col><b-button class="main-navigation-button" variant="primary">Search</b-button></b-col>
    <b-col><b-button class="main-navigation-button" variant="primary">Edit</b-button></b-col>
  </b-row>
</b-container>

The class vh-100 sets the row height to 100% of the viewport height, and we set the prop align-v to center (centers the columns vertically in the middle of the row). Class text-center aligns the button in the center of the columns.

Solution 2

You can align elements of a grid vertically like this:

<b-row class="my-1">
  <b-col sm="3" align-self="center">
    123
  </b-col>
  <b-col sm="3" align-self="center">
    456
  </b-col>
</b-row>

The alignment can be start, center or end.

Comments

[Troy Morehouse]

<b-row> is actually a flex container and accepts various props (or classes) for controling vertical/horizontal alignment and justifications