Bootstrap Vertical Alignment

The vertical alignment of the web-page components is a helpful styling feature.

You can align the positioning of the elements might not always go as expected especially when you’re using the different type of elements in one line (like text with image).

In such cases, altering the vertical alignment can help with a better neat positioning.

To understand the concept of Vertical alignment better, let’s have a look at the following CSS code:

From the above code, we can understand that  vertical alignment can be controlled using following basic properties:

  • baseline: Vertically aligning the element with the baseline of the parent element
  • text-top: Vertically aligning the element with the top of the parent’s font
  • text-bottom: Vertically aligning the element with the bottom of the parent’s font
  • sub: Vertically aligning the element with the subscript of the parent
  • super: Vertically aligning the element with the superscript of the parent

Now that, you are familiar with the basic ways in which an element can be vertically aligned then lets dive into the concepts of Bootstrap to know about its features and support for this.

Controlling Vertical Alignment in Bootstrap

With the help of Bootstrap, you can control the vertical alignment of the following elements:

  • inline
  • inline-block
  • inline-table
  • table cell elements.

Here’s the list of Bootstrap utilities for vertical alignment. You can easily draw similarities between these and the CSS properties we just saw:

  • .align-baseline: Vertically aligning the element with the baseline of the parent element
  • .align-top: Vertically aligning the element with the top of the element that is the tallest in the line
  • .align-middle: Vertically positioning the element in the middle of its parent element
  • .align-bottom: Vertically alignin the element with the element that is the lowest in the line
  • .align-text-bottom: Vertically aligning the element with the bottom of the parent’s font
  • .align-text-top: Vertically aligning the element with the top of the parent’s font

These utility classes will be used to control the vertical alignment of the element on the web page.

Let us now check out how different type of elements, are vertically aligned in Bootstrap:

Bootstrap Inline elements

The below code will illustrate vertical alignment for inline elements for baseline, top, middle, bottom, text-top and text-bottom

Table Cells