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>
5 Answers
Bootstrap 5 (update 2021)
To right align elements in Bootstrap 5...
float-right is now float-end
text-right is now text-end
ml-auto is now ms-auto
Bootstrap 4 (original answer)
Use float-right for block elements, or text-right for inline elements:
<div class="row">
<div class="col">left</div>
<div class="col text-right">inline content needs to be right aligned</div>
</div>
<div class="row">
<div class="col">left</div>
<div class="col">
<div class="float-right">element needs to be right aligned</div>
</div>
</div>
If float-right is not working, remember that Bootstrap 4 is now flexbox, and many elements are display:flex which can prevent float-right from working.
In some cases, the utility classes like align-self-end or ml-auto work to right align elements that are inside a flexbox container like the Bootstrap 4 .row, Card or Nav. The ml-auto (margin-left:auto) is used in a flexbox element to push elements to the right.
How about this? Bootstrap 4
<div class="row justify-content-end">
<div class="col-3">
The content is positioned as if there was
"col-9" classed div appending this one.
</div>
</div>
For Bootstrap 4 I find the following very handy because:
- the column on the right takes exactly the space it needs and will pull right
- while the left col always gets the maximum amount of space!.
It is the combination of col and col-auto which does the magic. So you don't have to define a col width (like col-2,...)
<div class="row">
<div class="col">Left</div>
<div class="col-auto">Right</div>
</div>
Ideal for aligning words, icons, buttons,... to the right.
An example to have this responsive on small devices:
<div class="row">
<div class="col">Left</div>
<div class="col-12 col-sm-auto">Right (Left on small)</div>
</div>
Check this Fiddle
From the documentation, you do it like:
<div class="row">
<div class="col-md-6">left</div>
<div class="col-md-push-6">content needs to be right aligned</div>
</div>
For The Bootstrap 4+
This Code Worked Well for me
<div class="row">
<div class="col">
<div class="ml-auto">
this content will be in the Right
</div>
</div>
<div class="col mr-auto">
<div class="mr-auto">
this content will be in the leftt
</div>
</div>
</div>
