CODEWITHSUNDEEP
cssvue.jsbootstrap-4vuetify.jsbootstrap-vue
Chawchawchaw
Chawchawchaw

Reputation: 233

BootstrapVue b-form-checkbox&radio vertical center in Vuetify?

I'm using Vuetify as our primary framework and added some of Bootstrap-Vue components like b-form-checkbox&radio.

I'm trying to figure it out how to vertical center my bootstrap-vue checkbox and text. so far, I've tried::

  1. vertical-align="baseline"
  2. align="center"
  3. justify="center" // I know it's for horizontal but... I've tried anyway
  4. class="align-middle"

My framework structure is

    <v-container>
      <v-card>
        <v-card-text>
          <v-row>
            <v-col>
              <b-form-checkbox>
                ABCD
              </b-form-checkbox>
   ....
    </v-container>

I've tried adding them into v-col, v-row and b-form-checkbox, and wrapped checkbox with span and added into span too but none of them worked.

Please help!

Upvotes: 0

Views: 2358

Answers (1)

DRich
DRich

Reputation: 972

I think this is what you're looking for:

https://codesandbox.io/s/quizzical-roentgen-hb2i5?fontsize=14&hidenavigation=1&theme=dark

The trick is that you have to set the position to relative on whatever element contains the components you want to center vertically. Then on the components you center vertically, you essentially say, "Put the top of this component half-way down its parent, then move it up by half of its height"

You can see that in the vertCenterContentContainer class and the vertCenteredContent class in the vue component style.

The salient portions are:

.vertCenterContentContainer{
  ...
  position: relative;
}

.vertCenteredContent{
  position:relative;
  top: 50%;
  transform: translateY(-50%);
  ...
}

Hope this helps!

Upvotes: 1

Related Questions