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

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

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/[email protected]/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/[email protected]/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>

Output:

Screenshot-2024-03-28-114005


 


Reffered: https://www.geeksforgeeks.org

Bootstrap

Related
What is Bootstrap ? What is Bootstrap ?
How to Create Carousel with Progress Indicators in Bootstrap ? How to Create Carousel with Progress Indicators in Bootstrap ?
How to Create a Sticky and Split Footer in Bootstrap ? How to Create a Sticky and Split Footer in Bootstrap ?
How to Remove Outline from Accordion Buttons in Bootstrap? How to Remove Outline from Accordion Buttons in Bootstrap?
How to Create Dynamic Tabs in Bootstrap ? How to Create Dynamic Tabs in Bootstrap ?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 14



 

Horje