Vertical alignment

Bootstrap vertical alignment

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 huge 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.
upgrade with discount

It’s easy change the vertical-alignment of inline, inline-block, inline-table, and table cell elements.

Just choose from the classes .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.

With inline elements

Use vertical alignment to align content vertically.

baseline top middle bottom text-top text-bottom

Show code Edit in sandbox

HTML

        
            

        <span class="align-baseline">baseline</span>
        <span class="align-top">top</span>
        <span class="align-middle">middle</span>
        <span class="align-bottom">bottom</span>
        <span class="align-text-top">text-top</span>
        <span class="align-text-bottom">text-bottom</span>

With table cells

Use vertical alignment to align content vertically with table cells.

baseline

top

middle

bottom

text-top

text-bottom

Show code Edit in sandbox

HTML

        
            

        <table style="height: 100px;">
          <tbody>
            <tr>
              <td class="align-baseline">baseline</td>
              <td class="align-top">top</td>
              <td class="align-middle">middle</td>
              <td class="align-bottom">bottom</td>
              <td class="align-text-top">text-top</td>
              <td class="align-text-bottom">text-bottom</td>
            </tr>
          </tbody>
        </table>

Example with images

Show code Edit in sandbox

HTML

        
            
        <table style="height: 100px;">
          <tbody>
            <tr>
              <td class="align-baseline">
                <img class="mx-2" src="https://mdbootstrap.com/img/Photos/Others/placeholder7.webp" alt="Generic placeholder image">
              </td>
              <td class="align-top">
                <img class="mx-2" src="https://mdbootstrap.com/img/Photos/Others/placeholder6.webp" alt="Generic placeholder image">
              </td>
              <td class="align-middle">
                <img class="mx-2" src="https://mdbootstrap.com/img/Photos/Others/placeholder5.webp" alt="Generic placeholder image">
              </td>
              <td class="align-bottom">
                <img class="mx-2" src="https://mdbootstrap.com/img/Photos/Others/placeholder4.webp" alt="Generic placeholder image">
              </td>
            </tr>
          </tbody>
        </table>