Bootstrap

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

    <div class="clearfix bg-info">
     <div class="pull-left"> Cost</div>
     <div class="pull-right">$30</div>
    </div>

    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.

    About the author

    Nadia Bano

    I am an enthusiastic and forward-looking software engineer with an aim to explore the global software industry. I love to write articles on advanced-level designing, coding, and testing.