3

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>
2
  • Are you looking to have the buttons stacked on top of each other? or are you referring to alignment with respect to the page/viewport? Apr 29, 2020 at 18:46
  • @TroyMorehouse the buttons are supposed to be displayed next to each other but vertically centered in the page :)
    – Rugo
    Apr 30, 2020 at 6:33

3 Answers 3

16

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.

4

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.

0

Flex is a way to easily align elements.

<div class="d-flex flex-row">
  <div class="p-2">
    <b-button class="main-navigation-button" variant="primary">Create</b-button>
  </div>
  <div class="p-2">
    <b-button class="main-navigation-button" variant="primary">Search</b-button>
  </div>
  <div class="p-2">
    <b-button class="main-navigation-button" variant="primary">Edit</b-button>
  </div>
</div>

https://getbootstrap.com/docs/4.1/utilities/flex/

1
  • <b-row> is actually a flex container and accepts various props (or classes) for controling vertical/horizontal alignment and justifications Apr 29, 2020 at 18:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.