How to Center the Content inside a Column in Bootstrap 5 ?

Last Updated : 04 Dec, 2023

Bootstrap Grid has row column classes to quickly create basic grid layouts for the webpage. You can specify the width of the columns control your card layouts and override when needed at the column level. In this article, we will learn How to center the content inside a column in Bootstrap 5. We have used two different ways to center the content these are with the help of text-center Bootstrap utility classes and d-flex align-items-center justify-content-center.

Table of Content

Using text-center class
Using d-flex align-items-center justify-content-center

Using text-center class

The text-center bootstrap 5 utility class is used to center the text inside a column.

Example: Below is the implementation of the above approach.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Bootstrap 5 Aligning Text 
    </title> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
          integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
          crossorigin="anonymous"> 
        </script> 
  
</head> 
  
<body> 
    <div class="container"> 
        <h1 class="text-success  
      text-center"> 
            GeeksforGeeks 
        </h1> 
  
        <h2 class="text-center"> 
            How to center the content 
            inside a column in Bootstrap 5? 
        </h2> 
  
        <div class="row"> 
            <div class="col bg-warning  
                        text-center "> 
  
                <span> 
                    I am Aligned Center 
                </span> 
  
            </div> 
            <div class="col bg-success  
                        text-light"> 
                Not Aligned Center 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output

z57

Using d-flex align-items-center justify-content-center

Using d-flex, align-items-center, and justify-content-center bootstrap 5 class. These classes will help to align the text to the center of the column.

Example: Below is the implementation of the above approach.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
          Bootstrap 5 Aligning Text 
      </title> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
        integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity= 
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"> 
    </script> 
  
</head> 
  
<body> 
    <div class="container"> 
        <h1 class="text-success  
                     text-center"> 
            GeeksforGeeks 
        </h1> 
  
        <h2 class="text-center"> 
            How to center the content inside  
            a column in Bootstrap 5? 
        </h2> 
  
        <div class="row"> 
            <div class="col bg-warning d-flex  
                        align-items-center  
                        justify-content-center"> 
  
                <span> 
                    I am Aligned Center 
                </span> 
  
            </div> 
            <div class="col bg-success  
                        text-light"> 
                Not Aligned Center 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>