How to align content bottom on Bootstrap 4 col ?

Last Updated : 21 Nov, 2023

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.

Table of Content

Using align-items-end
Using align-self-end

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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1"> 
    <link rel="stylesheet" href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
</head> 
  
<body> 
    <div class="container"> 
        <h2 class="text-center text-success"> 
            GeeksforGeeks 
        </h2> 
        <h2> 
              How to align content bottom 
              on Bootstrap 4 col ? 
          </h2> 
        <div class="row border align-items-end"> 
            <div class="col"> 
                1 (row align-items-end) 
                <br /> 
                2<br /> 
                3<br /> 
            </div> 
            <div class="col"> 
                1 
            </div> 
            <div class="col"> 
                2 
            </div> 
            <div class="col"> 
                3 
            </div> 
            <div class="col"> 
                4 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

z139

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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                    initial-scale=1"> 
    <link rel="stylesheet" href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
</head> 
  
<body> 
    <div class="container"> 
        <h2 class="text-center text-success"> 
            GeeksforGeeks 
        </h2> 
        <h2> 
              How to align content bottom 
              on Bootstrap 4 col ? 
          </h2> 
        <div class="row border "> 
            <div class="col"> 
                1 (row align-self-end) 
                <br /> 
                2<br /> 
                3<br /> 
            </div> 
            <div class="col"> 
                1 
            </div> 
            <div class="col"> 
                2 
            </div> 
            <div class="col"> 
                3 
            </div> 
            <div class="col align-self-end"> 
                4 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>