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 · Accepted 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):

<div class="row">
   <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
   <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

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

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

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

Examples related to twitter-bootstrap-3

Examples related to offset