23

I have this code <div class="col col-md-12 col-sm-6 col-sm-offset-1 hidden-xs"> and bootstrap is making the offset to the col-md-12 too, I'm checking the code and I have no clue why this is happening, I think that this wasn't happening before, but I have go back a lot of steps in the code maybe to the point it was working and nothing.

If I remove the offset it works as suppose...but I don't have the offset on smaller resolutions.

This is the page where you can see the problem: Test page

Is the block where it puts "Especial 52º Aniversario"

Thanks for the help, is driving me nuts

amibumping
  • 245
  • 1
  • 2
  • 13
  • what line number of your source code do you think is causing the error? – bob May 24 '14 at 12:29
  • The one that I put in the message "div class="col col-md-12 col-sm-6 col-sm-offset-1 hidden-xs">" for some reason on large resolution is applying the offset I put on small res. – amibumping May 24 '14 at 12:35

2 Answers2

71

The offset applies from sm all the way up to max size. To stop it, add in col-md-offset-0 to prevent the offset applying to larger sizes.

DavidG
  • 113,891
  • 12
  • 217
  • 223
  • YES!!! THANKS a lot! I didn't know that, I think that info is not on the bootstrap documentation, but thanks :) – amibumping May 24 '14 at 12:46
  • 1
    @user3652601 It is in the docs. From http://getbootstrap.com/css/#grid : "Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present." – cvrebert May 25 '14 at 00:32
  • Thank you DavidG for your nice, clear and simple answer – Mohammad Saberi Mar 09 '16 at 08:11
2

Bootstrap 3 = Mobile first.

Any styles you apply in the xs 'size' range will be carried through to the larger 'sizes' unless you are using the helper utilities like .visible-sm class

If you want to have a one column offset that is visible during the small range only:

    <div class="row">
      <div class="col col-md-12 col-sm-6 col-sm-offset-1 hidden-xs">
        <div class="col-sm-1 visible-sm"><div>
        <div>
          ...continue your content
        </div>
bob
  • 983
  • 11
  • 21