I have successfully implemented the desired design using HTML and CSS, but I am currently using image placeholders.
I am seeking to achieve a similar effect with CSS for div elements instead of images.
<div class="item-box">{{ item.title }}</div> <!--styled using CSS for .item-box-->
Here is the HTML code:
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-2">
<img src="http://placehold.it/200x200/336699" alt="">
</div>
...
<div class="col-xs-6 col-sm-3 col-md-2">
<img src="http://placehold.it/200x200" alt="">
</div>
</div>
Along with the corresponding CSS:
.row {
margin: 0;
}
img {
width: 100%;
}
.col-xs-6 {
padding: 1.5%;
margin: 0;;
}
.col-sm-3 {
padding: 1.5%;
margin: 0;
}
.col-md-2 {
padding: 1.5%;
margin: 0;
}
You can also view a responsive demo in this fiddle: http://jsfiddle.net/3hHC9/embedded/result/