Vertical Alignment

Overview

Give some vertical alignment to elements by manipulating their vertical-align property.

Note that only items with the following display properties can be vertically aligned:

• inline
• inline-block
• inline-table
• table-cell

The alignments consist of the items in the following list and are also available in responsive variants, in the form .visible-{breakpoint}-{alignment}. Please refer to how our breakpoint nomenclature is used.

• .valign-baseline
• .valign-top
• .valign-middle
• .valign-bottom
• .valign-text-top
• .valign-text-bottom

To align non-inline content, such as <div> containers, refer to the flexbox utilites.

Examples

Example with inline elements.

<div class="bg-gray-50">
  <span class="bg-cyan-100 valign-baseline">baseline</span>
  -
  <span class="bg-cyan-100 valign-top">top</span>
  -
  <span class="bg-cyan-100 valign-middle">middle</span>
  -
  <span class="bg-cyan-100 valign-bottom">bottom</span>
  -
  <span class="bg-cyan-100 valign-text-top">text-top</span>
  -
  <span class="bg-cyan-100 valign-text-bottom">text-bottom</span>
</div>

Using table cells.

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

Slightly more complex uses, such as being able to align items in a row, become quick and easy.

<div class="bg-gray-50 w-100 d-table">
  <div class="d-table-cell valign-bottom">
    <a href="#">View more in teacher's guide</a> |
    <a href="#">Common Core alignment</a>
  </div>
  <div class="d-table-cell valign-bottom text-end">
    <button type="button" class="btn btn-primary btn-lg">Continue</button>
  </div>
</div>

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

Mixins

No mixins available.