Bootstrap col align right

Question

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> 

Answer 1

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

Answer 2

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>