Bootstrap 3 grid issue

[aaron4osu]

I’m having an issue with the bootstrap grid. I’m trying to create (3) four column divs on medium screens, on small screens I’m trying to create six column divs that are offset 3 columns so they are centered. and on extra small screens twelve columns. Seems like something I’ve done a million times… but on medium or larger they are stacking using the .sm class… not sure what’s happening

<div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4">col-xs-12 col-sm-6 col-sm-offset-3 col-md-4</div><!-- close col -->
  <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4">col-xs-12 col-sm-6 col-sm-offset-3 col-md-4</div><!-- close col -->
  <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4">col-xs-12 col-sm-6 col-sm-offset-3 col-md-4</div><!-- close col -->
</div><!-- close row -->

here is a codepen showing the issue: https://codepen.io/aaron4osu/pen/Powpezo

[PaulOB]

Although I haven’t used bootsrap3 for years it seems you would need to put the offset on xs not md and then negate it with md. You would also need only 6 columns for small screen if you want a 25% margin on either side.

e.g.

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-xs-offset-3 col-md-offset-0 col-md-4">col-xs-6 col-sm-6 col-xs-offset-3 col-md-offset-0 col-md-4</div>
    <!-- close col -->
    <div class="col-xs-6 col-sm-6 col-xs-offset-3 col-md-offset-0  col-md-4">col-xs-6 col-sm-6 col-xs-offset-3 col-md-offset-0 col-md-4</div>
    <!-- close col -->
    <div class="col-xs-6 col-sm-6 col-xs-offset-3 col-md-offset-0  col-md-4">col-xs-6 col-sm-6 col-xs-offset-3 col-md-offset-0 col-md-4</div>
    <!-- close col -->
  </div>
  <!-- close row -->
</div>

There may be an easier way to do it but as I said I haven’t used bootstrap3 for years. Also your 25% margins on small screen is nonsense as you eat up all the real estate on the small screen and will possibly only fit a few words before they wrap (unless that’s what you wanted :)).

Bootstrap makes something so trivial in vanilla CSS a great struggle ;).