Lars-Petter Hansen Lars-Petter Hansen - 1 month ago 11
CSS Question

Showcase the first n-items in a bootstrap grid

I work on a page with a responsive design utilising the bootstrap grid. According to specification I need to be able to showcase the first line in the grid with bigger images. Typically i want 3 images in the first row when the rest of the grid has four images in each row.

What I try to accomplish is best illustrated with the following image:
enter image description here

How can I make this work? Solutions with classes, css and javascript are all accepted as I control all the client code.

Answer

This should get you started: http://codepen.io/panchroma/pen/BLrvAw

All the elements are in the same row so they can float as the grid changes, everything else uses standard bootstrap classes.

Good luck!

<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">1</div>
  <div class="col-md-4 col-sm-6 col-xs-6">2</div>
  <div class="col-md-4 col-sm-4 col-xs-6">3</div>

<div class="col-md-3 col-sm-4 col-xs-6">4</div>
  <div class="col-md-3 col-sm-4 col-xs-6">5</div>
  <div class="col-md-3 col-sm-4 hidden-xs">6</div>
  <div class="col-md-3 col-sm-4 hidden-xs">7</div>

<div class="col-md-3 col-sm-4 hidden-xs">8</div>
  <div class="col-md-3 col-sm-4 hidden-xs">9</div>
  <div class="col-md-3 col-sm-4 hidden-xs">10</div>
  <div class="col-md-3 col-sm-4 hidden-xs">11</div>
</div>