React Bootstrap Vertical Alignment

React Vertical Alignment - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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;