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    lt div class  row  gt       lt div class  col  gt left lt  div gt       lt div class  col ml-auto  gt content needs to be right aligned lt  div gt   lt  div gt

User · Answer

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/

User · Answer

For The Bootstrap 4  This Code Worked Well for me  lt div class  quot row quot  gt           lt div class  quot col quot  gt               lt div class  quot ml-auto quot  gt                  this content will be in the Right              lt  div gt           lt  div gt           lt div class  quot col mr-auto quot  gt               lt div class  quot mr-auto quot  gt                  this content will be in the leftt              lt  div gt           lt  div gt       lt  div gt

User · Answer

Use float-right for block elements  or text-right for inline elements    lt div class  row  gt        lt div class  col  gt left lt  div gt        lt div class  col text-right  gt inline content needs to be right aligned lt  div gt   lt  div gt   lt div class  row  gt         lt div class  col  gt left lt  div gt         lt div class  col  gt             lt div class  float-right  gt element needs to be right aligned lt  div gt         lt  div gt   lt  div gt    http   www 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

User · Answer

How about this  Bootstrap 4   lt div class  row justify-content-end  gt       lt div class  col-3  gt          The content is positioned as if there was          col-9  classed div appending this one       lt  div gt   lt  div gt

User · Answer

From the documentation  you do it like    lt div class  row  gt       lt div class  col-md-6  gt left lt  div gt       lt div class  col-md-push-6  gt content needs to be right aligned lt  div gt   lt  div gt    Docs

[twitter-bootstrap] col align right

Examples related to twitter-bootstrap

Examples related to bootstrap-4