Vertical alignment

React Bootstrap 5 Vertical alignment component

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.


          import React from "react";
          import { MDBBtn } from "mdb-react-ui-kit";

          export default function App(){
            return (
              <div
                className="border d-flex align-items-center justify-content-center"
              >
                <MDBBtn>Example button</MDBBtn>
              </div>
            );
          }
        

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


          import React from "react";
          import { MDBBtn } from "mdb-react-ui-kit";
  
          export default function App(){
            return (
              <div
                className="border d-flex align-items-center justify-content-center"
              >
                <div className="border d-flex align-items-center" style="height: 350px;">
                  <MDBBtn>Example button</MDBBtn>
                </div>
              </div>
            );
          }
        

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

          import React from "react";
  
          export default function App(){
            return (
              <>
                <div className="d-flex align-items-start">...</div>
                <div className="d-flex align-items-end">...</div>
                <div className="d-flex align-items-center">...</div>
                <div className="d-flex align-items-baseline">...</div>
                <div className="d-flex align-items-stretch">...</div>
              </>
            );
          }
        

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