How to Left and Right Align Text Within a Div in Bootstrap

The arrangement of the elements of the application is referred to as alignment. It helps in creating a neat design and keeps them away from being a disorderly mess. Bootstrap provides many predefined classes that are utilized for this purpose. These classes include “pull-left”, “pull-right”, “float-left”, and many more.

This write-up will explain how to set the right and left alignment of the text within a “<div>” in Bootstrap.

How to Right and Left Align Text Within a Div Using Bootstrap?

Several ways are utilized to adjust the text alignment within a

container. However, we will discuss the following:

Method 1: Set Left and Right Alignment Using “pull-left” and “pull-right” Class
Method 2: Set Right and Left Alignment Using the “float-right” and “float-left” Classes
Method 3: Left and Right Alignment Using the “justify-content-between” Class

Method 1: Set Left and Right Align Text Using “pull-left” and “pull-right” Class

In Bootstrap 3, the “pull-right” and “pull-left” classes are utilized to set the text’s alignment on the right and left sides, respectively.

The below example shows the practical demonstration of the above-discussed classes:

First, add a “<div>” with the “clearfix” and “bg-info” classes.

Inside the created container, add two more “<div>” tags holding some content. The first one is assigned the “pull-left” class, and the other one is assigned the “pull-right” class.

HTML

Here:

“clearfix” class is utilized to clear floated content. Without it, the layout would be broken.
“pull-left” class aligns the text on the left side.
“pull-right” class aligns the text on the right side.

It can be observed that the text “Cost” is left aligned whereas the relevant dollar value is aligned right:

Method 2: Set Right and Left Align Text Using the “float-right” and “float-left” Classes

In Bootstrap 4, the “float-left” and “float-right” classes are utilized to align the elements left and right. To utilize them, we will first:

Add a “<div>” element and assign it “bg-warning” and “clearfix” classes.
Inside this, add two more “<div>” elements containing text.
Specify the “float-left” class to the first container which will float the text to the left.
Assign the “float-right” to the “<div>” which will float the text to the right.

Here is the HTML code:

<div class="bg-warning clearfix">
<div class="float-left">Scores</div>
<div class="float-right">500</div>
</div>

Output

Method 3: Left and Right Align Text Using the “justify-content-between” Class

In Bootstrap 4, the “justify-content-between” class distributes equal space between the flexible elements.

The below example shows a “<div>” class having “bg-info”, “d-flex”, and “justify-content-between” classes:

<div class="bg-info d-flex justify-content-between">
<div>Total Cost</div>
<div>$50</div>
</div>

Output

Using these Bootstrap classes, the text within the “<div>” container is right and left-aligned.

Bonus Tip
If you want to align all flexible items to the left, use the Bootstrap “justify-content-start” class, and if the flexible items need to be aligned right, use the “justify-content-end” class.

Conclusion

To right and left align text within a “<div>” element, several classes are utilized. In Bootstrap 3, the “pull-left” and “pull-right” classes are utilized. In Bootstrap 4, the “float-left” and “float-right” classes can be used. The flexible elements are aligned by utilizing the “justify-content-between” class. This post has explained how to set the left and right alignment of text within a “<div>” container in Bootstrap.