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     lt div class  col-xs-2 col-xs-offset-1  gt col lt  div gt    http   jsfiddle net petran zMcs5 2

User · Accepted Answer

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

User · Answer

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

User · Answer

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    lt div class  col-xs-11 col-xs-offset-1 col-sm-3  gt     xs has an offset of 1    lt div class  col-xs-11 col-xs-offset-1 col-sm-offset-0 col-sm-3  gt     xs and sm have an offset of 1    lt div class  col-xs-11 col-xs-offset-1 col-md-offset-0 col-sm-3  gt     xs  sm and md will have an offset of 1    lt div class  col-xs-11 col-xs-offset-1 col-lg-offset-0 col-sm-3  gt        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

User · Answer

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

User · Answer

Alternatively  you can add an empty div for the xs-offset  would save you having to manage the content in more than one place    lt div class  col-xs-1 visible-xs  gt  lt  div gt  lt div class  col-xs-2  gt col lt  div gt    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

User · Answer

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

User · Answer

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

User · Answer

As per the latest bootstrap v3 3 7 xs-offseting is allowed  See the documentation here bootstrap offseting  So you can use   lt div class  col-xs-2 col-xs-offset-1  gt  col-xs-2  col-xs-offset-1 lt  div gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

As of Boostrap 4 x  just as col-xs-6 is now just col-6  offset-xs-6 is now just offset-6   Already tried it  definitely works

User · Answer

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

User · Answer

Remove the dot in front of your class so it looks like this    lt div class  col-xs-2 col-xs-offset-1  gt col lt  div gt

User · Answer

it works in bootstrap 4  there was some changes in documentation We dont need prefix col-  just offset-lg-3 e g    lt div class  row  gt      lt div class  offset-lg-3 col-lg-6  gt  Some content        lt  div gt   lt  div gt       here doc   http   v4-alpha getbootstrap com layout grid  example-offsetting-columns

User · Answer

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

[twitter-bootstrap] Bootstrap 3 .col-xs-offset-* doesn't work?

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3