How to Left and Right Align Text within a DIV in Bootstrap

Topic: Bootstrap / SassPrev|Next

Answer: Use the justify-content-between Class

You can simply use the class .justify-content-between in combination with the class .d-flex to left align and right align text content within a <div> container in Bootstrap 4.

Let's try out the following example to understand how it basically works:

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

If you're using the Bootstrap 3 version, you can use the .pull-left and .pull-right classes to both left and right align text within same DIV element. Also, don't forget to apply the class .clearfix on the parent <div>, if it is not a grid column (i.e., .col-*). Here's an example:

<div class="bg-light clearfix">
    <div class="pull-left">Total Cost</div>
    <div class="pull-right">$50</div>
</div>

You can also use this solution in Bootstrap 4 by replacing the class pull-left class with float-left class, and pull-right class with float-right class respectively.

Related FAQ

Here are some more FAQ related to this topic:

• How to center buttons in Bootstrap
• How to align responsive image in center in Bootstrap
• How to vertical align a DIV in Bootstrap