Utilities
Dozens of utility classes with a single purpose designed to reduce the frequency of highly repetitive declarations in your CSS while allowing for quick and easy development.
Vertical Alignment
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
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>