• 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:

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:

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:

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.