Rate this docs

React Bootstrap Vertical Alignment

React Vertical Alignment - Bootstrap 4 & Material Design

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;