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
- 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:
- “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:
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:
Using these Bootstrap classes, the text within the “<div>” container is right and left-aligned.
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.
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.