I'm trying to create a row with 2 cols. One col on the left with its contents aligned left, and the second col with its contents aligned right (old pull-right).
How to do I go about this in alpha-6?
I've tried a few things, but this is what I have so far. What am I missing?
<div class="row">
<div class="col">left</div>
<div class="col ml-auto">content needs to be right aligned</div>
</div>
Best Answer
Bootstrap 5 (update 2021)
To right align elements in Bootstrap 5...
float-right
is nowfloat-end
text-right
is nowtext-end
ml-auto
is nowms-auto
Bootstrap 4 (original answer)
Use
float-right
for block elements, ortext-right
for inline elements:http://codeply.com/go/oPTBdCw1JV
If
float-right
is not working, remember that Bootstrap 4 is now flexbox, and many elements aredisplay:flex
which can preventfloat-right
from working.In some cases, the utility classes like
align-self-end
orml-auto
work to right align elements that are inside a flexbox container like the Bootstrap 4 .row, Card or Nav. Theml-auto
(margin-left:auto) is used in a flexbox element to push elements to the right.Bootstrap 4 align right examples