v4 Beta now available! Try it out! Feedback welcome!
Looking for v3 docs?

Vertical Alignment

Adjust the vertical alignment of inlined or table cell content.

Page Contents

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.

baseline - top - middle - bottom - text-top - text-bottom
<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.

baseline top middle bottom text-top text-bottom
<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.

Name Type Default Description
$enable-utility-valign boolean true Enable the generation of the vertical alignment utility classes.

Mixins #

No mixins available.