Classic Bootstrap:

<div class="container">

  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">my grid item</div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">my grid item</div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">my grid item</div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">my grid item</div>
  </div>

</div>

More semantic version:

// import all bootstrap less files first
@import "less/bootstrap";

// build your layout
main {
  .container();
}

section {

  .make-row();
  .clearfix();

  article {

    img {
      height: 100%;
      width: 100%;
    }

    .make-xs-column(6);
    .make-sm-column(4);
    .make-lg-column(2);
  }
}
<main>
  <section>
    <article>my grid item</article>
    <article>my grid item</article>
    <article>my grid item</article>
    <article>my grid item</article>
  </section>
</main>

 

Categories: CSSHTML