How to Left & Right Align Text within a Div in Bootstrap ?

Last Updated : 03 Apr, 2024

Bootstrap is used to customize the appearance and layout of web applications. To left and right align text within a <div> in Bootstrap, we can use utility classes such as text-start and text-end, combined with the grid system for responsive design.

Below are the approaches to let and right align text within a Div in Bootstrap:

Table of Content

Using Flexbox Classes
Using Utility Classes

Using Flexbox Classes

In this approach, we are using Bootstrap’s flexbox utility classes (d-flex, justify-content-start, justify-content-end) to left and right align text within <div> containers.

Example: The below example uses Flexbox Classes to Left and Right Align Text within a DIV in Bootstrap.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>To Left and Right Align Text</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
          rel="stylesheet">
</head>

<body>
    <div class="container mt-5">
        <h1 class="text-center mb-4">
              GeeksforGeeks
          </h1>
        <h3 class="text-center mb-4">
              Using Flexbox Classes
          </h3>
        <div class="row">
            <div class="col">
                <div class="d-flex justify-content-start 
                            border border-primary p-3">
                    <h3 class="text-start">
                          Left Aligned Text
                      </h3>
                </div>
            </div>
            <div class="col">
                <div class="d-flex justify-content-end 
                            border border-success p-3">
                    <h3 class="text-end">
                          Right Aligned Text
                      </h3>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Output:

Screenshot-2024-03-27-at-12-45-12-Exampl

Using Utility Classes

In this approach, we are using Bootstrap’s utility classes (text-start and text-end) to left-align and right-align text within the <div> containers, while also applying custom border styles (border-primary and border-success) for enhanced visual appeal.

Example: The below example uses Utility Classes to Left and Right Align Text within a DIV in Bootstrap.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>To Left and Right Align Text</title>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" 
          rel="stylesheet">
</head>

<body>
    <div class="container mt-5">
        <h1 class="text-center mb-4 text-success">
              GeeksforGeeks
          </h1>
        <h3 class="text-center mb-4">
              Using Utility Classes
          </h3>
        <div class="row">
            <div class="col text-start">
                <div class="border border-primary border-2 p-3">
                    <h3>Left Aligned Text</h3>
                </div>
            </div>
            <div class="col text-end">
                <div class="border border-success border-2 p-3">
                    <h3>Right Aligned Text</h3>
                </div>
            </div>
        </div>
    </div>
</body>

</html>