Horizontal alignment

Vue Bootstrap 5 Horizontal alignment

Utilities for horizontal alignment.

Note: For advanced usage read our Flexbox docs.

Center text

To center text add .text-center class to the parent element

        
            
            <template>
              <div class="text-center">
                <p>
                  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae nihil hic
                  delectus excepturi ipsam reprehenderit iusto rem, quam, repellendus accusantium culpa
                  reiciendis sit dolorum aut aperiam a architecto. Fuga, sit.
                </p>
              </div>
            </template>
          
        
    

Center image

You can also center the image by adding the .text-center class to the image's parent element.

Show code

        
            
            <template>
              <div class="text-center">
                <img src="https://mdbootstrap.com/img/logo/mdb192x192.webp" class="img-fluid" alt="" />
              </div>
            </template>
          
        
    

Center button

The same as above, add the .text-center to the parent element of the button to center it.

        
            
            <template>
              <div class="text-center">
                <MDBBtn color="primary">Primary</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>
          
        
    

Center column

By using flexbox you can center the entire the column of the grid.

        
            
            <template>
               <!--Grid row-->
               <MDBRow center class="d-flex">
                <!--Grid column-->
                <MDBCol md="6">
                  This column is centered
                </MDBCol>
                <!--Grid column-->
              </MDBRow>
              <!--Grid row-->
            </template>
          
        
    

        
            
            <script>
              import { MDBCol, MDBRow } from 'mdb-vue-ui-kit';

              export default {
                components: {
                  MDBCol,
                  MDBRow
                },
              };
            </script>
          
        
    

        
            
            <script setup lang="ts">
              import { MDBCol, MDBRow } from 'mdb-vue-ui-kit';
            </script>
          
        
    

Flexbox options

Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, around, or evenly.

        
            
            <template>
              <div class="d-flex justify-content-start">...</div>
              <div class="d-flex justify-content-end">...</div>
              <div class="d-flex justify-content-center">...</div>
              <div class="d-flex justify-content-between">...</div>
              <div class="d-flex justify-content-around">...</div>
              <div class="d-flex justify-content-evenly">...</div>
            </template>
          
        
    

Responsive variations also exist for justify-content.

• .justify-content-start
• .justify-content-end
• .justify-content-center
• .justify-content-between
• .justify-content-around
• .justify-content-evenly
• .justify-content-sm-start
• .justify-content-sm-end
• .justify-content-sm-center
• .justify-content-sm-between
• .justify-content-sm-around
• .justify-content-sm-evenly
• .justify-content-md-start
• .justify-content-md-end
• .justify-content-md-center
• .justify-content-md-between
• .justify-content-md-around
• .justify-content-md-evenly
• .justify-content-lg-start
• .justify-content-lg-end
• .justify-content-lg-center
• .justify-content-lg-between
• .justify-content-lg-around
• .justify-content-lg-evenly
• .justify-content-xl-start
• .justify-content-xl-end
• .justify-content-xl-center
• .justify-content-xl-between
• .justify-content-xl-around
• .justify-content-xl-evenly
• .justify-content-xxl-start
• .justify-content-xxl-end
• .justify-content-xxl-center
• .justify-content-xxl-between
• .justify-content-xxl-around
• .justify-content-xxl-evenly

Related resources