Horizontal alignment

React Bootstrap 5 Horizontal alignment component

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

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. 

        
            
            import React from "react";
    
            export default function App(){
              return (
                <div className="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>
              );
            }

Center image

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

        
            
            import React from "react";
    
            export default function App(){
              return (
                <div className="text-center">
                  <img src="https://mdbootstrap.com/img/logo/mdb192x192.webp" className="img-fluid" alt="" />
                </div>
              );
            }

Center button

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

        
            
            import React from "react";
    
            export default function App(){
              return (
                <div className="text-center">
                  <MDBBtn>Primary</MDBBtn>
                </div>
              );
            }

Center column

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

This is a row
This column (.col-md-6) is centered 
        
            
            import React from "react";
            import { MDBCol, MDBRow, } from 'mdb-react-ui-kit';
    
            export default function App(){
              return (
                <MDBRow className='d-flex justify-content-center'>
                  This is a row
                  <MDBCol md='6' className='bg-primary mt-5 text-white'>
                    This column (.col-md-6) is centered
                  </MDBCol>
                </MDBRow>
              );
            }

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.

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
Flex item
Flex item
Flex item
        
            
            import React from "react";
    
            export default function App(){
              return (
                <>
                  <div className="d-flex justify-content-start">...</div>
                  <div className="d-flex justify-content-end">...</div>
                  <div className="d-flex justify-content-center">...</div>
                  <div className="d-flex justify-content-between">...</div>
                  <div className="d-flex justify-content-around">...</div>
                  <div className="d-flex justify-content-evenly">...</div>
                </>
              );
            }

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