CODEWITHSUNDEEP
twitter-bootstrapvue.jsbootstrap-vue
Rugo
Rugo

Reputation: 383

BootstrapVue best way to vertically align content?

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>

Upvotes: 3

Views: 28713

Answers (3)

Dirk Richter
Dirk Richter

Reputation: 41

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.

Upvotes: 4

Troy Morehouse
Troy Morehouse

Reputation: 5435

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.

Upvotes: 17

Lowry
Lowry

Reputation: 448

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/

Upvotes: 0

Related Questions