Vertical alignment

Vue Bootstrap 5 Vertical alignment

Flexbox utilities for vertical alignment.

Note: For advanced usage read our Flexbox docs.

Both vertically and horizontally

Add .d-flex to the parent element to enable flex mode. Then use (also on the parent element) .align-items-center to align content vertically and .justify-content-center to align content horizontally.

Show code

template
script

        
            
            <template>
              <div
                class="w-100 p-4 d-flex align-items-center justify-content-center"
                style="height: 350px;"
              >
                <MDBBtn color="primary">Example button</MDBBtn>
              </div>
            </template>

        
            
            <script>
              import { MDBBtn } from 'mdb-vue-ui-kit';
              export default {
                components: {
                  MDBBtn
                },
              };
            </script>

Only vertically

Add .d-flex to the parent element to enable flex mode. Then use (also on the parent element) .align-items-center to align content vertically

Show code

template
script

        
            
            <template>
              <div class="border d-flex align-items-center" style="height: 350px;">
                <MDBBtn color="primary">Example button</MDBBtn>
              </div>
            </template>

        
            
            import { MDBBtn } from 'mdb-vue-ui-kit';
            export default {
              components: {
                MDBBtn
              },
            };

Flexbox options

Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).

Flex item

Show code

template

        
            
            <template>
              <div class="d-flex align-items-start">...</div>
              <div class="d-flex align-items-end">...</div>
              <div class="d-flex align-items-center">...</div>
              <div class="d-flex align-items-baseline">...</div>
              <div class="d-flex align-items-stretch">...</div>
            </template>

Responsive variations also exist for align-items.

.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch
.align-items-xxl-start
.align-items-xxl-end
.align-items-xxl-center
.align-items-xxl-baseline
.align-items-xxl-stretch