Bootstrap 3: pull-right for col-lg only

Question

New to bootstrap 3.... In my layout I have:

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6">
         <div class="pull-right">
            elements 2
         </div>
    </div>
</div>

I would like the 'elements 2' to NOT be aligned right on smaller than col-lg screens. So effectively having the class pull-right only for col-lg-6...

How could I achieve this?

Here is a fiddle: http://jsfiddle.net/thibs/Y6WPz/

Thank-you

Seems like this [might be a supported feature in Bootstrap 4](https://github.com/twbs/bootstrap/issues/13690#issuecomment-48149431) — eggy, May 28 '15 at 08:23
So this is [now a thing in Bootstrap 4](https://getbootstrap.com/docs/4.0/utilities/flex/#order). Just use `order-lg-1`, `order-lg-2`, etc.on your columns. — limfinity, Jun 11 '19 at 17:51

Carol Skelly · Accepted Answer · 2018-02-22T14:10:21.157

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

thanks for this, but the content must use the full 6 cols otherwise it wraps, which we don't want. — Thibs, Oct 16 '13 at 14:11
was hoping not to have a media query, but it will do. Thank-you — Thibs, Oct 16 '13 at 19:24

score 28 · Answer 2 · answered Mar 11 '14 at 17:25

Try this LESS snippet (It's created from the examples above & the media query mixins in grid.less).

@media (min-width: @screen-sm-min) {
.pull-right-sm {
  float: right;
}
}
@media (min-width: @screen-md-min) {
.pull-right-md {
  float: right;
}
}
@media (min-width: @screen-lg-min) {
.pull-right-lg {
  float: right;
}
}

score 21 · Answer 3 · edited Apr 15 '16 at 13:05

.pull-right-not-xs, .pull-right-not-sm, .pull-right-not-md, .pull-right-not-lg{
    float: right;
}

.pull-left-not-xs, .pull-left-not-sm, .pull-left-not-md, .pull-left-not-lg{
    float: left;
}
@media (max-width: 767px) {    
    .pull-right-not-xs, .pull-left-not-xs{
        float: none;
    }
    .pull-right-xs {
        float: right;
    }
    .pull-left-xs {
        float: left;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .pull-right-not-sm, .pull-left-not-sm{
        float: none;
    }
    .pull-right-sm {
        float: right;
    }
    .pull-left-sm {
        float: left;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .pull-right-not-md, .pull-left-not-md{
        float: none;
    }
    .pull-right-md {
        float: right;
    }
    .pull-left-md {
        float: left;
    }
}
@media (min-width: 1200px) {
    .pull-right-not-lg, .pull-left-not-lg{
        float: none;
    }
    .pull-right-lg {
        float: right;
    }
    .pull-left-lg {
        float: left;
    }
}

score 12 · Answer 4 · edited Feb 28 '15 at 09:20

There is no need to create your own class with media queries. Bootstrap 3 already has float ordering for media breakpoints under Column Ordering: http://getbootstrap.com/css/#grid-column-ordering

The syntax for the class is col-<#grid-size>-(push|pull)-<#cols> where <#grid-size> is xs, sm, md or lg and <#cols> is how far you want the column to move for that grid size. Push or pull is left or right of course.

I use it all the time so I know it works well.

score 3 · Answer 5 · answered Mar 27 '14 at 17:40

3

Works fine too:

/* small screen portrait */

@media (max-width: 321px) {

  .pull-right { 
    float: none!important; 
  }

}


/* small screen lanscape */

@media (max-width: 480px) {

  .pull-right {
    float: none!important; 
  }

}

answered Mar 27 '14 at 17:40

Greg

31
1

score 3 · Answer 6 · answered Jan 18 '17 at 23:13

Adding the CSS shown below to your Bootstrap 3 application enables support for

pull-{ε|sm-|md-|lg-}left
pull-{ε|sm-|md-|lg-}right

classes that work exactly like the new

float-{ε|sm-|md-|lg-|xl-}left
float-{ε|sm-|md-|lg-|xl-}right

classes that have been introduced in Bootstrap 4:

@media (min-width: 768px) {
    .pull-sm-left {
        float: left !important;
    }
    .pull-sm-right {
        float: right !important;
    }
    .pull-sm-none {
        float: none !important;
    }
}
@media (min-width: 992px) {
    .pull-md-left {
        float: left !important;
    }
    .pull-md-right {
        float: right !important;
    }
    .pull-md-none {
        float: none !important;
    }
}
@media (min-width: 1200px) {
    .pull-lg-left {
        float: left !important;
    }
    .pull-lg-right {
        float: right !important;
    }
    .pull-lg-none {
        float: none !important;
    }
}
.pull-none {
    float: none !important;
}

Apart from that, it adds

pull-{ε|sm-|md-|lg-}none

for completeness, being compatible with

float-{ε|sm-|md-|lg-|xl-}none

from Bootstrap 4.

score 2 · Answer 7 · answered May 17 '18 at 15:30

For those interested in text alignment, a simple solution is to create a new class:

.text-right-large {
    text-align: right;
}
@media (max-width: 991px) {
    .text-right-large {
        text-align: left;
    }
}

Then add that class:

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6 text-right-large">
        elements 2
    </div>
</div>

score 2 · Answer 8 · edited Dec 17 '18 at 15:13

2

It is very simple using Sass, just use @extend:

.pull-right-xs { 
    @extend .pull-right;
 }

edited Dec 17 '18 at 15:13

Laerte

7,013
3
32
50

answered Dec 17 '18 at 14:53

Rogerio Orioli

121
1
2

score 1 · Answer 9 · answered Jun 18 '14 at 09:21

This is what i am using . change @screen-md-max for other sizes

/* Pull left in lg resolutions */
@media (min-width: @screen-md-max) {
    .pull-xs-right {
        float: right !important;
    }
    .pull-xs-left {
        float: left !important;
    }

    .radio-inline.pull-xs-left  + .radio-inline.pull-xs-left ,
    .checkbox-inline.pull-xs-left  + .checkbox-inline.pull-xs-left  {
        margin-left: 0;
    }
    .radio-inline.pull-xs-left, .checkbox-inline.pull-xs-left{
        margin-right: 10px;
    }
}

score 1 · Answer 10 · answered Dec 17 '15 at 00:50

1

This problem is solved in bootstrap-4-alpha-2.

Here is the link: http://blog.getbootstrap.com/2015/12/08/bootstrap-4-alpha-2/

Clone it on github: https://github.com/twbs/bootstrap/tree/v4.0.0-alpha.2

answered Dec 17 '15 at 00:50

AlbertSamuel

584
10
33

it is well explained here: http://v4-alpha.getbootstrap.com/components/utilities/#responsive-floats – tirenweb Jul 25 '16 at 11:09

luke · Answer 11 · 2016-08-09T09:58:20.390

Just use bootstrap's responsive utility classes!

The best solution for that task is to use the following code:

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6 text-right">
        <div class="visible-lg-inline-block visible-md-block visible-sm-block visible-xs-block">
            elements 2
        </div>
    </div>
</div>

Element will be aligned to the right only on lg screens - on the rest the display attribute will be set to block as it is by default for div element. This approach is using text-right class on the parent element instead of pull-right.

Alternative solution:

The biggest disadvantage is that the html code inside needs to be repeated twice.

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6">
         <div class="pull-right visible-lg">
            elements 2
         </div>
         <div class="hidden-lg">
            elements 2
         </div>
    </div>
</div>

score 1 · Answer 12 · answered May 10 '18 at 11:39

You can use push and pull to change column ordering. You pull one column and push the other on large devices:

<div class="row">
    <div class="col-lg-6 col-md-6 col-lg-pull-6">elements 1</div>
    <div class="col-lg-6 col-md-6 col-lg-push-6">
         <div>
            elements 2
         </div>
    </div>
</div>

score 0 · Answer 13 · answered Sep 02 '16 at 08:17

now include bootstrap 4:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css');

and code should be like this:

<div class="row">
    <div class="col-lg-6 col-md-6" style="border:solid 1px red">elements 1</div>
    <div class="col-lg-6 col-md-6" style="border:solid 1px red">
         <div class="pull-lg-right pull-xl-right">
            elements 2
         </div>
    </div>
</div>

Bootstrap 3: pull-right for col-lg only

13 Answers13

Linked

Related