Bootstrap 3 Offset isn t working

Question

I have this code     lt div class  row  gt     lt div class  col-sm-3 col-sm-offset-6 col-md-12 col-md-offset-0  gt  lt  div gt     lt div class  col-sm-3 col-md-12  gt  lt  div gt   lt  div gt    What I want for small  sm  screens is to have two divs that have three columns each  and an offset of 6 columns for the first div   For medium  md  screens  I would like to have two divs with twelve columns each  one horizontally stacked under the other   with no offsets    Somehow the browser doesn t recognize the class col-md-offset-0  It still uses the col-sm-offset-6 class  Any ideas why

User · Answer

If I get you right  you want something that seems to be the opposite of what is desired normally  you want a horizontal layout for small screens and vertically stacked elements on large screens  You may achieve this in a way like this    lt div class  container  gt       lt div class  row  gt           lt div class  hidden-md hidden-lg col-xs-3 col-xs-offset-6  gt a lt  div gt           lt div class  hidden-md hidden-lg col-xs-3  gt b lt  div gt       lt  div gt       lt div class  row  gt           lt div class  hidden-xs hidden-sm  gt c lt  div gt        lt  div gt   lt  div gt    On small screens  i e  xs and sm  this generates one row with two columns with an offset of 6  On larger screens  i e  md and lg  it generates two vertically stacked elements in full width  12 columns

User · Answer

Which version of bootstrap are you using   The early versions of Bootstrap 3  3 0  3 0 1  didn t work with this functionality   col-md-offset-0 should be working as seen in this bootstrap example found here  http   getbootstrap com css  grid-responsive-resets     lt div class  row  gt      lt div class  col-sm-5 col-md-6  gt  col-sm-5  col-md-6 lt  div gt      lt div class  col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0  gt  col-sm-5  col-sm-offset-2  col-md-6  col-md-offset-0 lt  div gt   lt  div gt

User · Answer

There is no col-  -offset-0   All  rows  assume there is no offset unless it has been specified   I think you are wanting 3 rows on a small screen and 1 row on a medium screen   To get the result I believe you are looking for try this    lt div class  container  gt       lt div class  row  gt         lt div class  col-sm-4 col-md-12  gt           lt p gt On small screen there are 3 rows  and on a medium screen 1 row lt  p gt         lt  div gt         lt div class  col-sm-4 col-md-12  gt           lt p gt On small screen there are 3 rows  and on a medium screen 1 row lt  p gt         lt  div gt         lt div class  col-sm-4 col-md-12  gt           lt p gt On small screen there are 3 rows  and on a medium screen 1 row lt  p gt         lt  div gt       lt  div gt     lt  div gt    Keep in mind you will only see a difference on a small tablet with what you described   Medium  large  and extra small screens the columns are spanning 12   Hope this helps

[twitter-bootstrap-3] Bootstrap 3: Offset isn't working?

Examples related to twitter-bootstrap-3

Examples related to offset