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:
Example
Try this code »<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:
Example
Try this code »<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:
