How to align two col to the right? bootstrap 3 grid

Question

I have three columns displayed in one row, I need to align last two to the right corner, it works fine with one column but when I try to pull-right two it messes up grid and pushes elements to the next row down. The question is how to align one column to the right and other next to it.

       <div class="row ">
                    <div class="col-sm-4">
                    ...
                    </div>

                    <div class="col-sm-3" >
                     ...
                    </div>

                    <div class="col-sm-5 pull-right">
                        <div class=" pull-right">
                          ...
                        </div>
                    </div>
        </div>

Current:

|[     ]       [      ]       [     ]|

Wanted:

|[     ]              [      ][     ]|

It first thing I tried,middle col goes to right-corner and right col goes to the next line down. — user2998105, Mar 06 '14 at 22:21
Possible duplicate of [Left align and right align within div in Bootstrap](https://stackoverflow.com/questions/18672452/left-align-and-right-align-within-div-in-bootstrap) — Organic Advocate, Aug 11 '17 at 20:54

Carol Skelly · Accepted Answer · 2017-02-16T21:40:36.293

It depends on whether you're right aligning text inside the middle column, or some another container inside the column.. Here are a few examples that may work for you..

http://www.bootply.com/119747

<div class="row ">
  <div class="col-sm-4">
    1 text here 
  </div>
  <div class="col-sm-3 text-right">
    2 text here 
  </div>
  <div class="col-sm-5">
    3 text here 
  </div>
</div>

<div class="row ">
  <div class="col-sm-4">
    <div class="well"> 
      content
    </div>
  </div>
  <div class="col-sm-3">
    <div class="well pull-right"> 
      content pull-right 
    </div>
  </div>
  <div class="col-sm-5">
    <div class="well"> 
      content
    </div>
  </div>
</div>

score 4 · Answer 2 · edited Oct 03 '15 at 15:44

4

Use lower col size with offset like this:

<div class="col-sm-3"></div>
<div class="col-sm-3 offset-col-sm-3"></div>
<div class="col-sm-3"></div>

edited Oct 03 '15 at 15:44

IKavanagh

6,089
11
42
47

answered Oct 03 '15 at 15:25

molikh

1,274
13
24

How to align two col to the right? bootstrap 3 grid

2 Answers2