Bootstrap Vertical Alignment

Pre-requisite

• Bootstrap Grid
• Bootstrap
• HTML tables
• CSS Alignment

Introduction

It is often required to change the alignment of the text or components whether it is the close button, the footer, or headings and subheadings.

Bootstrap Vertical alignments are used to vertically align components with the help of vertical-alignment utilities. These utilities only affect inline, inline-block, inline-table, and table cell elements. Inline elements are single line components such as span, and inline-block elements are single line block with width and height values.

The very commonly used bootstrap vertical-align is using div. Vertical alignment can also be set using CSS but using Bootstrap is simpler and easier.

To change the vertical alignment of the components Bootstrap provides special built-in classes namely, align-items-center and d-flex.

The image below shows what the alignment of the 3 columns of the same row looks like.

How to Vertical Align in Bootstrap?

Many classes of bootstrap can be used to achieve the functionality of bootstrap vertical align. These classes and methods are discussed below.

Using Class align-items-center of Flexbox Alignment Utility

From Bootstrap 5 onwards, to align a div element in the center, top, bottom, stretch, or baseline, etc., class align-items-center is used for the parent element of the div to be centered. Classes align-items are part of the flexbox alignment utilities to vertically or horizontally align columns and provide a responsive structure to the website.

Using Class d-flex with Class align-items-center

In the above section, we saw how we can align elements of the containers. In this section, we will see that bootstrap vertical-align can also be applied to the div elements using the d-flex class and align-items-center and other classes. The d-flex class provides the same effect as we apply the CSS property display: flex;.

Look at the screenshot of the webpage below, the webpage has three boxes each containing the same three images but they are aligned vertically at the start, center, and end. Let us see how we can vertically align various items using d-flex class as shown below.

To achieve this functionality we have created three divs each containing given images. Next, we applied the d-flex and align-items class to each div.

Also, note that the justify-content-center in the above example changes the horizontal alignment of the images. The box class defines between style tags defines borders so that it is easy to depict the effect of the vertical alignment.

Change the Vertical Alignment of Table Cell Elements

It is easy to change the bootstrap vertical align of inline, inline-block, inline-table, and table-cell elements using Bootstrap. The vertical-alignment utilities are used to change the alignment of the elements.

Various classes available are .align-top, .align-middle, .align-bottom, .align-baseline, .align-text-bottom, and .align-text-top.

Let us create a table in HTML using <TABLE>, <TR>, and <TD> tags.

HTML

CSS

We have created an HTML table with a single row and four columns. Each column has its different alignment. This shows how we can vertically align table components using Bootstrap.

Grid System: Vertical Alignment

The grid system in Bootstrap facilitates building layouts of all shapes and sizes with twelve column system, etc., and dozens of predefined classes.

Flexbox utilities are used to vertically and horizontally align columns of the grid. It is applied to the rows i.e. parent element of the columns in HTML as well as to columns i.e. elements themselves.

To create a grid we have to create a div with the class container. This container can have multiple rows and each row can have several columns(usually at max 12 columns only). We will see the vertical alignment of the columns using a flexbox.

HTML

CSS

In the example above, instead of applying bootstrap vertical align to the row that affects all the columns, vertical alignment is applied to individual columns only.