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).

        
            
            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

Related resources