Bootstrap 3: Pull-Right for Col-Lg Only

Bootstrap 3: pull-right for col-lg only

You could put "element 2" in a smaller column (ie: col-2) and then use push on larger screens only:

<div class="row">
    <div class="col-lg-6 col-xs-6">elements 1</div>
    <div class="col-lg-6 col-xs-6">
      <div class="row">
       <div class="col-lg-2 col-lg-push-10 col-md-2 col-md-push-0 col-sm-2 col-sm-push-0 col-xs-2 col-xs-push-0">
         <div class="pull-right">elements 2</div>
       </div>
      </div>
    </div>
</div>

Demo: http://bootply.com/88095

Another option is to override the float of .pull-right using a @media query..

@media (max-width: 1200px) {
    .row .col-lg-6 > .pull-right {
        float: none !important;
    }
}

Lastly, another option is to create your own .pull-right-lg CSS class..

@media (min-width: 1200px) {
    .pull-right-lg {
        float: right;
    }
}

UPDATE

Bootstrap 4 includes responsive floats, so in this case you'd just use float-lg-right.
No extra CSS is needed.

Bootstrap 4 Demo

Bootstrap pull-right and mobile devices

Don't do that because those buttons are not part of your title and this would have some SEO drawbacks (Search engines algorithms use contents of <h1> element as your first level heading on your page ). instead do this:

@media screen and (min-width: 1100px){   .pull-right{    display:inline-block;  }}

<div class="row">    <div class="col-md-12">        <h1>Title</h1><!--        --><div class="pull-right">            <a href="#" class="btn btn-default">...</a>            <a href="#" class="btn btn-default">...</a>            <a href="#" class="btn btn-default">...</a>        </div>    </div></div>

Bootstrap change div order with pull-right, pull-left on 3 columns

Bootstrap 3

Using Bootstrap 3's grid system:

<div class="container">
  <div class="row">
    <div class="col-xs-4">Menu</div>
    <div class="col-xs-8">
      <div class="row">
        <div class="col-md-4 col-md-push-8">Right Content</div>
        <div class="col-md-8 col-md-pull-4">Content</div>
      </div>
    </div>
  </div>
</div>

Working example: http://bootply.com/93614

Explanation

First, we set two columns that will stay in place no matter the screen resolution (col-xs-*).

Next, we divide the larger, right hand column in to two columns that will collapse on top of each other on tablet sized devices and lower (col-md-*).

Finally, we shift the display order using the matching class (col-md-[push|pull]-*). You push the first column over by the amount of the second, and pull the second by the amount of the first.

Bootstrap 3 pull-right class pushing out of row

Add proper container/container-fluid class and row class.
When you are nesting columns inside column add div with row class.

Your button's padding is creating issue as it take some space and get collapsed down on small viewport.

Try to use col-xs-2 if there is not any issue with your requirement.

I have made changes to your code using css and mediaqueries.
This will help you

JSfiddle Complete Solution

<div class="container">
<div class="row">      <div class="col-xs-1 vertical-center col-padding-left5">        <button class="btn btn-link padding0 ">          <i class="fa fa-2x fa-trash text-red small-font"></i>        </button>      </div>            <div class="col-xs-10">                <div class="row">          <div class="col-lg-8 no-padding">            <label>Some input</label><br>            <input class="form-control no-padding">          </div>          <div class="col-xs-4">            <label>And</label><br>            <input type="number" class="form-control">          </div>          <div class="col-xs-8">            <label>More Input</label><br>            <input class="form-control">          </div>          <div class="col-lg-8 no-padding">            <label>Some input</label><br>            <input class="form-control no-padding">          </div>          <div class="col-xs-4">            <label>And</label><br>            <input type="number" class="form-control">          </div>          <div class="col-xs-8">            <label>More Input</label><br>            <input class="form-control">          </div>        </div>              </div>              <div class="col-xs-1 vertical-center col-padding-right5">        <button class="btn btn-link padding0 " data-ember-action="1284">          <i class="fa fa-2x fa-check text-green small-font"></i>        </button>      </div>    </div></div>

Pull-right even when Bootstrap Grid Columns are missing

use this code for col-md-1 style={float:right;}

Bootstrap 3 change Col-Nesting in MD/LG

Just swap the 2nd and 3rd div and add .pull-right like this

<div class="container">   <div class="row">
    <div class="col-md-12 col-lg-9 text-center">
      <h4>col-md-12 col-lg-9</h4>
    </div>
    <div class="col-sm-6 col-md-3 col-lg-3 text-center pull-right">
      <h4>col-sm-6 col-md-3 col-lg-3</h4>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
    </div>
    <div class="col-sm-6 col-md-9 col-lg-9 text-center">
      <h4>col-sm-6 col-md-9 col-lg-9</h4>
      .<br>
      .<br>
      .<br>
      .<br>
    </div>    </div> </div>

Check demo

For clearing float, check clearfix

Bootstrap 3 pull-right not working

add class="form-group col-md-12 nopadding" to div which was currently <div class="form-group">

Bootstrap col align right

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

Bootstrap 3: Pull-Right for Col-Lg Only