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.

        
            
            <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>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBBtn } from 'mdb-vue-ui-kit';
            </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

        
            
            <template>
              <div class="border d-flex align-items-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>
          
        
    
        
            
            <script setup lang="ts">
              import { MDBBtn } from 'mdb-vue-ui-kit';
            </script>
          
        
    

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
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
        
            
            <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