CODEWITHSUNDEEP
vue.jsbootstrap-4bootstrap-vue
Robert Strauch
Robert Strauch

Reputation: 12896

Aligning button and alert vertically in Bootstrap 4 + Vue

Using bootstrap-vue in my VueJS application I'd like to place a button and an alert next to each other in one row with both items aligned centered vertically. Although I used <b-row align-v="center"> this doesn't seem to work.

As you can see in this example on Codesandbox, the buttons are aligned but the alert is not.

How can I align all the items?

Upvotes: 0

Views: 563

Answers (1)

muka.gergely
muka.gergely

Reputation: 8329

The b-alert works a bit other than the buttons, so you have to apply different CSS rules to achieve the same effect:

<b-container>
  <b-row align-v="center">
    <b-col cols="2">
      <b-button variant="primary">Button 1</b-button>
    </b-col>
    <b-col cols="2">
      <b-button variant="secondary">Button 2</b-button>
    </b-col>
    <b-col class="d-flex align-items-center">
      <b-alert class="mb-0 w-100" show>An alert...</b-alert>
    </b-col>
  </b-row>
</b-container>

This will work.

  • aligns the items in the last b-col with the flex utility classes
  • remove the bottom margin (mb-0), so the item has nothing in the way to be positioned – applies width: 100% (with w-100 class), so the alert doesn't shrink because of the d-flex of the parent; instead of this class, you could use flex-grow-1, so the v-alert takes up the available space.

Upvotes: 1

Related Questions