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

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.

Show code

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.

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.

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

Related resources