160

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>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Thibs
  • 8,058
  • 13
  • 54
  • 85
  • 1
    For the new version of bootstrap, I found this working shortcut : https://getbootstrap.com/docs/4.0/utilities/flex/#direction – Irshad Khan Apr 13 '20 at 12:50

5 Answers5

308

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>

http://codeply.com/go/oPTBdCw1JV

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.

Bootstrap 4 align right examples

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
57

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>
Bexultan Myrzatay
  • 1,105
  • 10
  • 17
36

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 https://jsfiddle.net/Julesezaar/tx08zveL/

Julesezaar
  • 2,658
  • 1
  • 21
  • 21
3

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>

Docs

Jordan.J.D
  • 7,999
  • 11
  • 48
  • 78
  • 4
    @Guilherme , the bootstrap 4 tags were added by someone else (after I had answered). The original question only had twitter-bootstrap tag. – Jordan.J.D Apr 30 '18 at 20:34
1

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>
jozef koko
  • 82
  • 5