Bootstrap - Vertical Align

Ethan D. - June 1, 2024

Bootstrap's Vertical Alignment Classes

Bootstrap has classes that vertically align elements within a container. You can use these classes on inline, inline-block, inline-table, and table cell elements. With these classes, you can control the vertical positioning of elements without writing custom CSS.

Bootstrap's vertical alignment classes are:

Class	Description
`.align-baseline`	Aligns the element's baseline with the parent's baseline.
`.align-top`	Aligns the element's top with the tallest element's top in the line.
`.align-middle`	Aligns the element's middle with the parent's middle.
`.align-bottom`	Aligns the element's bottom with the lowest element's bottom in the line.
`.align-text-top`	Aligns the element's top with the top of the parent element's font.
`.align-text-bottom`	Aligns the element's bottom with the bottom of the parent element's font.

Aligning Inline Elements

To vertically align inline elements, apply the alignment classes directly to the elements.

Example: Aligning Inline Elements

<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>

Each <span> element has a different alignment class, which controls its vertical positioning within the line.

Aligning Table Cells

You can use .align-top, .align-middle, and .align-bottom to vertically align content within table cells. Apply the class to the <td> or <th> element.

Example: Aligning Table Cells

<table>
  <tbody>
    <tr>
      <td class="align-top">Top-aligned</td>
      <td class="align-middle">Middle-aligned</td>
      <td class="align-bottom">Bottom-aligned</td>
    </tr>
  </tbody>
</table>

The content within each table cell is vertically aligned based on the class applied to the <td> element.

Vertical Alignment Using Flexbox

Flexbox is a layout system in CSS that makes it easy to vertically align elements within a container. Bootstrap has classes that use flexbox for vertical alignment. By applying the .d-flex class to a container element, you create a flex container and use the .align-items-* classes to control the vertical alignment of its child elements.

Aligning Flex Items

To vertically align flex items within a flex container, use the .align-items-* classes on the container element. Bootstrap provides these classes for aligning flex items:

Class	Description
`.align-items-start`	Aligns flex items at the top of the container.
`.align-items-center`	Centers flex items vertically within the container.
`.align-items-end`	Aligns flex items at the bottom of the container.
`.align-items-baseline`	Aligns flex items along their baselines.
`.align-items-stretch`	Stretches flex items to fill the container vertically (default).

Example: Aligning Flex Items

<div class="d-flex align-items-start">
  <div>Start</div>
  <div>Start</div>
  <div>Start</div>
</div>

<div class="d-flex align-items-center">
  <div>Center</div>
  <div>Center</div>
  <div>Center</div>
</div>

<div class="d-flex align-items-end">
  <div>End</div>
  <div>End</div>
  <div>End</div>
</div>

Aligning Individual Flex Items

You can also vertically align individual flex items using the .align-self-* classes. These classes override the alignment set by the container's .align-items-* class for specific flex items.

Bootstrap provides these .align-self-* classes:

Class	Description
`.align-self-start`	Aligns the flex item at the top of the container.
`.align-self-center`	Centers the flex item vertically within the container.
`.align-self-end`	Aligns the flex item at the bottom of the container.
`.align-self-baseline`	Aligns the flex item along its baseline.
`.align-self-stretch`	Stretches the flex item to fill the container vertically.

Example: Aligning Individual Flex Items

<div class="d-flex" style="height: 100px;">
  <div class="align-self-start">Start</div>
  <div class="align-self-center">Center</div>
  <div class="align-self-end">End</div>
  <div class="align-self-baseline">Baseline</div>
  <div class="align-self-stretch">Stretch</div>
</div>

Vertical Alignment Using CSS

In addition to using Bootstrap's built-in classes, you can also vertically align elements using custom CSS. CSS provides several properties that allow you to control the vertical alignment of elements within a container.

One common method is to use the vertical-align property. This property sets the vertical alignment of an inline or table-cell element. The vertical-align property accepts various values, such as top, middle, bottom, baseline, sub, super, text-top, and text-bottom. These values determine how the element is aligned relative to the line or its parent container.

Example: Vertical-align property

<div>
  <span style="vertical-align: top;">Top</span>
  <span style="vertical-align: middle;">Middle</span>
  <span style="vertical-align: bottom;">Bottom</span>
  <span style="vertical-align: baseline;">Baseline</span>
</div>

Another technique for vertical centering is to use the line-height property with padding. By setting the line-height of a container element equal to its height and adding equal padding to the top and bottom, you can vertically center the content within the container.

Example: Vertical centering with line-height and padding

<div style="height: 100px; line-height: 100px; padding: 0 10px;">
  <span>Vertically centered content</span>
</div>

These CSS techniques provide more control over the vertical alignment of elements compared to using Bootstrap's classes alone. You can use them with Bootstrap or as standalone solutions, depending on your specific requirements and design needs.