MrD MrD - 5 months ago 25
PHP Question

Bootstrap grid with different number of elements per column depending on screen size

I am using a bootstrap grid to display picture thumbnails, where the number of thumbnails displayed depends on the number of matches to a user's search criteria. I am displaying a different number of thumbnails per row depending on the screen's size, defined as:

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">


I then use the following PHP construct to create new row div elements:

<?php

for ($i = 0; $i < sizeof($products); $i++):

if ($i % 3 == 0) {

if ($i > 0)
echo "</div>";

echo "<div class=\"row\">";

}

$product = $products[$i];

?>


This works well for -md and -lg but obviously not for -sm and -xs for which I'd need
i%2
and
i%1
. Anybody knows some way I can retrieve from PHP the column size that boostrap is using?

Answer

Bootstrap allows you to use only one row with a large number of cells inside.

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

For example:

.photoes img {
  height: auto;
  margin-bottom: 12px;
  width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row photoes">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/c69/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/9c6/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/69c/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/6c9/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/96c/?text=Photo" alt=""></div>
    
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/c69/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/9c6/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/69c/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/6c9/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/96c/?text=Photo" alt=""></div>
    
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/c69/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/9c6/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/69c/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/6c9/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/96c/?text=Photo" alt=""></div>
  </div>
</div>

Comments