Vertical alignment

Bootstrap vertical alignment

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

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>