Bootstrap supports text alignment within the html.
By adding references to the relevant bootstrap css classes the text within a div maybe aligned: left; right; centred or justified according to CSS. Ids and classes assigned to the relevant parts.
Why not make use of the Bootstrap support for the alignment of text?
Adding the relevant classes to your HTML will make it clear the intended action. Easy to add and the class support is already within Bootstrap.
Here’s an example
<div class="row"> <div class="col-lg-6 col-md-6 ">Copyright © 2018</div> <div class="col-lg-6 col-md-6 text-right">Privacy Policy | Terms</div> </div>
In the above I am laying out the footer of the page with the copyright on the left and the links to the legal pages right aligned in the other half of the page. Its this part which I am interested in configuring the div to right align the text.
Further options
In the earlier example the content of the second div is right aligned to the right edge of the page. It looks wrong starting at the mid point of the page and not reaching the right hand edge.
With the introduction of Bootstrap 4 text alignment variations and rules just like the simplistic 12th width controls are supported.
By using these variations we can set the justification according to the screen width positioning. For example, in our footer text code at the top of the article, when the page is at tablet or mobile width it would be better to centre align rather than left, or the initially configured right. For this the sm, md, lg and so on variations can be set, giving:
Code for the above is given below
<div class="row">
<div class="col-lg-6 col-md-6 text-xs-center text-sm-center">Copyright © 2018</div>
<div class="col-lg-6 col-md-6 text-xs-center text-sm-center text-md-right">Privacy Policy | Terms</div>
</div>
Further reading about the justification of text:
https://getbootstrap.com/docs/3.3/components/
https://getbootstrap.com/docs/4.0/utilities/text/
https://getbootstrap.com/docs/5.0/utilities/text/
