WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

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

Topic: Bootstrap / LessPrev|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:

Advertisements
Bootstrap UI Design Templates

Your Feedback:

We would love to hear from you, please drop us a line.