How to Center the Content inside a Column in Bootstrap?

Last Updated : 02 May, 2024

Centering content inside a Bootstrap column involves aligning text, images, etc., horizontally for improved visual presentation and readability. Use text-center for inline elements or mx-auto for block elements, and Use d-flex property to ensure proper alignment and visual appeal.

Table of Content

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

Using text-center class

Utilize the text-center class to center content inside a Bootstrap column, ensuring horizontal alignment for enhanced visual presentation and readability. Ideal for inline elements, it simplifies the process of achieving centered layout.

Example: Below is the implementation of the above approach.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Bootstrap 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">
        <h2 class="text-center">
            Centering content inside a Bootstrap column
        </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:

bootstrap center column content Example Output

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

Using the d-flex, align-items-center and justify-content-center classes in Bootstrap to center content inside columns, aligning text, images, etc., both vertically and horizontally for enhanced visual presentation and readability with flexible alignment options.

Example: Below is the implementation of the above approach.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
          Bootstrap 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">

        <h2 class="text-center">
            bootstrap center column content
        </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>