React Bootstrap Vertical Alignment

React Vertical Alignment - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

React Bootstrap vertical align is a utility that specifies the alignment of elements. Works with inline, inline-block, inline-table, and table cell elements only.

Choose from .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.

With inline elements

baseline top middle bottom text-top text-bottom 
        
            
          import React from 'react'
          import { MDBContainer } from 'mdbreact';

          const AlignmentPage = () => {
            return (
              <MDBContainer>
                <span className="align-baseline">baseline</span>
                <span className="align-top">top</span>
                <span className="align-middle">middle</span>
                <span className="align-bottom">bottom</span>
                <span className="align-text-top">text-top</span>
                <span className="align-text-bottom">text-bottom</span>
              </MDBContainer>
            )
          }

          export default AlignmentPage;

With table cells

baseline top middle bottom text-top text-bottom 
        
            
          import React from 'react'
          import { MDBContainer } from 'mdbreact';

          const AlignmentPage = () => {
            return (
              <MDBContainer>
                <table style={{height: "100px"}}>
                  <tbody>
                    <tr>
                      <td className="align-baseline">baseline</td>
                      <td className="align-top">top</td>
                      <td className="align-middle">middle</td>
                      <td className="align-bottom">bottom</td>
                      <td className="align-text-top">text-top</td>
                      <td className="align-text-bottom">text-bottom</td>
                    </tr>
                  </tbody>
                </table>
              </MDBContainer>
            )
          }

          export default AlignmentPage;