Bootstrap 3 .col-xs-offset-* doesn't work?

Question

I am using bootstrap 3 grid system loved it so far and everything was working well, I am trying to use col-xs-offset-1 and doesn't work although .col-sm-offset-1 works. What am I missing here ?

<div class="col-xs-2 col-xs-offset-1">col</div>

http://jsfiddle.net/petran/zMcs5/2/

@Vixed The answer is ***not*** out of date, as the question clearly refers to Bootstrap v3. See current [master](https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L1738). For `-xs` being dropped in v4, see [this](http://stackoverflow.com/questions/41794746/col-xs-not-working-in-bootstrap-4/41795300#41795300). — tao, Jan 27 '17 at 23:41
I know you're right, but nobody posted an alternative right now ;) — Vixed, Jan 27 '17 at 23:50
@Vixed I am reluctant to add a v4 answer to a v3 question. Instead, I edited [this answer](http://stackoverflow.com/a/41795300/1891677), as it's a v4 question regarding `col-xs-*` classes. — tao, Jan 28 '17 at 00:52

score 100 · Accepted Answer · edited Jan 06 '15 at 13:10

100

Edit: as of Bootstrap 3.1 .col-xs-offset-* does exist, see bootstrap :: grid options

.col-xs-offset-* doesn't exist. Offset and column ordering are only for small and more. (ONLY .col-sm-offset-*, .col-md-offset-* and .col-lg-offset-*)

See the official documentation : bootstrap :: grid options

edited Jan 06 '15 at 13:10

Pez Cuckow

14,048
16
80
130

answered Sep 17 '13 at 15:46

bobybx

1,024
1
8
4

12

I'm not sure if this link is now replaced by newer documentation, but it states that Offsets are available for every device size. It still doesn't work however so I suppose it's still not supported :( – DanH Feb 06 '14 at 14:23
2

" .col-xs-offset-* " Appears to be working fine now. – Senthil Sep 07 '14 at 06:05
6

`.col-xs-offset-*` does exist in bootstrap 3 – Dio Oct 11 '14 at 20:14

score 26 · Answer 2 · answered Dec 23 '13 at 15:56

Alternatively, you can add an empty div for the xs-offset (would save you having to manage the content in more than one place)

<div class="col-xs-1 visible-xs"></div><div class="col-xs-2">col</div>

The bootstrap devs seem to be refusing to add those xs- ofsets and push/pull classes, see here: https://github.com/twbs/bootstrap/issues/9689

score 12 · Answer 3 · answered Aug 11 '14 at 02:43

12

You could get the offset set only for xs devises by negating the higher pixels with 0 offset. Like so,

class="col-xs-offset-1 col-md-offset-0"

answered Aug 11 '14 at 02:43

thanikkal

3,326
3
27
45

score 6 · Answer 4 · edited Mar 28 '15 at 21:55

A suggestion for when you want to do an offset but find yourself incapable at extra small widths:

Use .hidden-xs and .visible-xs to make one version of your html block for extra small widths, and one for everything else (where you can still use an offset)

Example:

<div class="hero container">
  <div class="row">
    <div class="hidden-xs col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4 text-center">
      <h2>This is a banner at the top of my site. It shows in everything except XS</h2>
      <p>Here are some supporting details about my banner.</p>
    </div>
    <div class="visible-xs col-xs-12">
      <h2 class="pull-right">This is my banner at XS width.</h2>
      <p class="pull-right">This is my supporting content at XS width.</p>
    </div>
  </div>
</div>

score 6 · Answer 5 · answered Dec 30 '15 at 09:41

6

col-md-offset-4 does not work if you manually apply margin to the same element. For example

In the above code, offset will not be applied. Instead a margin of 0 auto will be applied

answered Dec 30 '15 at 09:41

Shivani

347
2
6

score 3 · Answer 6 · answered Nov 07 '13 at 22:16

This was really frustrating so I wrote a gist you can grab that enables col-offset-xs-*. I also noticed that Bootstrap SASS repo Bower installed this week did not include col-offset-sm-0 so that is shimmed too but will be redundant in many cases.

Bootstrap 3 xs offset shim

score 2 · Answer 7 · answered Jul 18 '15 at 20:57

  /*

  Include this after bootstrap.css

  Add a class of 'col-xs-offset-*' and 
  if you want to disable the offset at a larger size add in 'col-*-offset-0'

  Examples:
  All display sizes (xs,sm,md,lg) have an offset of 1
  <div class="col-xs-11 col-xs-offset-1 col-sm-3">

  xs has an offset of 1
  <div class="col-xs-11 col-xs-offset-1 col-sm-offset-0 col-sm-3">

  xs and sm have an offset of 1
  <div class="col-xs-11 col-xs-offset-1 col-md-offset-0 col-sm-3">

  xs, sm and md will have an offset of 1
  <div class="col-xs-11 col-xs-offset-1 col-lg-offset-0 col-sm-3">

*/

.col-xs-offset-12 {
    margin-left: 100%;
}
.col-xs-offset-11 {
    margin-left: 91.66666666666666%;
}
.col-xs-offset-10 {
    margin-left: 83.33333333333334%;
}
.col-xs-offset-9 {
    margin-left: 75%;
}
.col-xs-offset-8 {
    margin-left: 66.66666666666666%;
}
.col-xs-offset-7 {
    margin-left: 58.333333333333336%;
}
.col-xs-offset-6 {
    margin-left: 50%;
}
.col-xs-offset-5 {
    margin-left: 41.66666666666667%;
}
.col-xs-offset-4 {
    margin-left: 33.33333333333333%;
}
.col-xs-offset-3 {
    margin-left: 25%;
}
.col-xs-offset-2 {
    margin-left: 16.666666666666664%;
}
.col-xs-offset-1 {
    margin-left: 8.333333333333332%;
}
.col-xs-offset-0 {
    margin-left: 0;
}

/* Ensure that all of the zero offsets are available - recent SASS version did not include .col-sm-offset-0 */
@media (min-width: 768px) {
    .col-sm-offset-0,
    .col-md-offset-0,
    .col-lg-offset-0 {
        margin-left: 0;
    }
}

https://gist.github.com/dylanvalade/7362739

score 2 · Answer 8 · edited Jan 30 '22 at 06:55

2

As of Boostrap 4.x, just as col-xs-6 is now just col-6

offset-xs-6 is now just offset-6 (and col-lg-offset-2 is now offset-lg-2).

Already tried it, definitely works.

edited Jan 30 '22 at 06:55

Top-Master

7,611
5
39
71

answered Mar 07 '19 at 21:40

Mindsect Team

2,311
5
29
36

score 1 · Answer 9 · edited Mar 28 '15 at 21:46

1

Its not working because col-xs-offset-* is mentioned out of the media query. if you want to use it, you have to mention all the offset (eg: class="col-xs-offset-3 col-sm-offset-2 col-md-offset-1 col-lg-offset-0")

But this is not right, they should mention col-xs-offset-* in the media query

edited Mar 28 '15 at 21:46

Pbk1303

3,702
2
32
47

answered Aug 16 '14 at 10:27

Mofarjul

11
1

score 1 · Answer 10 · answered Feb 03 '17 at 13:51

1

The bootstrap css used in the jsfiddle link, dont have the css for col-xs-offset-*, thats why the css are not been applied. Refer the latest bootstrap css.

answered Feb 03 '17 at 13:51

frontend engineer

224
1
6

score 0 · Answer 11 · answered Oct 26 '14 at 01:55

0

The problem is that you're putting .name class instead of nameclass

answered Oct 26 '14 at 01:55

Andres

11
1

score 0 · Answer 12 · answered Aug 06 '16 at 07:18

0

instead of using col-md-offset-4 use instead offset-md-4, you no longer have to use col when you're offsetting. In your case use offset-xs-1 and this will work. make sure you've called the bootstrap.css folder into your html as follows .

answered Aug 06 '16 at 07:18

Dante

51
1
2

all of these answers above are wrong this is and I can promise you the best answer to anyone that has this problem. – Dante Aug 06 '16 at 07:21

score 0 · Answer 13 · answered Sep 26 '16 at 13:44

0

// it works in bootstrap 4, there was some changes in documentation.We dont need prefix col-, just offset-lg-3 e.g.

<div class="row">
   <div class="offset-lg-3 col-lg-6"> Some content...
   </div>
</div>

// here doc: http://v4-alpha.getbootstrap.com/layout/grid/#example-offsetting-columns

answered Sep 26 '16 at 13:44

Vasyl Gutnyk

4,813
2
34
37

I believe the OP is asking about the `xs` offset, not offsets in general. I can't find anything in the docs about an xs offset, nor can I get it to trigger by adding xs offset classes in the DOM. Hopefully I'm wrong, but I can't figure it out. – Jason Jul 09 '18 at 20:38
@JasonFry Lol i dont care, but what problem i described general solution-problem:) – Vasyl Gutnyk Jul 10 '18 at 07:38

score 0 · Answer 14 · answered Feb 03 '17 at 05:37

0

As per the latest bootstrap v3.3.7 xs-offseting is allowed. See the documentation here bootstrap offseting. So you can use

<div class="col-xs-2 col-xs-offset-1">.col-xs-2 .col-xs-offset-1</div>

answered Feb 03 '17 at 05:37

Adeeb basheer

1,422
10
19

score 0 · Answer 15 · answered Mar 28 '17 at 22:34

Just in case someone makes the same error I did before stumbling on this page, that is, adding CSS reset rules (like the very popular reset by Eric Meyer used on millions of websites) after including bootstrap.

Also, perhaps I should point out that such reset won't be necessary with bootstrap given bootsrap actually implements the normalize.css v3.0.2 reset.

score -3 · Answer 16 · answered Jun 24 '15 at 23:56

-3

Remove the dot in front of your class so it looks like this:

<div class="col-xs-2 col-xs-offset-1">col</div>

answered Jun 24 '15 at 23:56

ReduxDJ

480
7
14

Bootstrap 3 .col-xs-offset-* doesn't work?

16 Answers16

Linked