Bootstrap Grid System allows up to 12 columns across the page. You can use each of them individually or merge them together for wider columns. All combinations of values summing up to 12 can be used. In this article, we will learn about How to align content bottom on Bootstrap 4 col.

Using align-items-end

• Make a basic structure of the web page With the help of different elements. Use different Bootstrap utility classes to give style to the element.
• The five columns have Bootstrap utility class col wrapped inside the div element.
• This div element has the class align-items-end to align all the content of the columns at the bottom.

Example: All the columns in the entire row use align-items-end on the row. This will help to align the content of all the cols in the end.

Output:

Using align-self-end

• Make a basic structure of the web page With the help of different elements. Use different Bootstrap utility classes to give style to the element.
• The five columns have Bootstrap utility class col wrapped inside the div element.
• The last column has the class align-self-end to align the content of the particular column at the end.

Example: For a single column use align-self-end on the col. This will help to align the content of a particular col in the end.

Output: