Use bootstrap grid with variable number of cells

Question

I have a photo album application where a user can upload up to 50 pictures. I want the pictures to display 4 pictures to a row. The photo album is dynamic meaning a user can add and delete pictures via ajax.

How can the bootstrap grid be used if cells are added/deleted without having to re-adjust the DOM elements and rows constantly?

For example if a user loads an existing photo album with 5 pictures the bootstrap grid looks like this:

<div class="row">    <div class="col-md-3"> a bunch of html here </div>    <div class="col-md-3"> a bunch of html here </div>    <div class="col-md-3"> a bunch of html here </div>    <div class="col-md-3"> a bunch of html here </div> </div>  <div class="row">    <div class="col-md-3"> a bunch of html here </div> </div> 

If the user deletes picture #2 the grid would be (no 2nd row, 5 element gets shifted to 4th element)

<div class="row">    <div class="col-md-3"> a bunch of html here </div>    <div class="col-md-3"> a bunch of html here </div>    <div class="col-md-3"> a bunch of html here </div>    <div class="col-md-3"> a bunch of html here </div> </div> 

Then the user adds 2 new pictures (via ajax), a new row is needed and 2 more columns.

<div class="row">    <div class="col-md-3"> a bunch of html here </div>    <div class="col-md-3"> a bunch of html here </div>    <div class="col-md-3"> a bunch of html here </div>    <div class="col-md-3"> a bunch of html here </div> </div>  <div class="row">    <div class="col-md-3"> a bunch of html here </div>    <div class="col-md-3"> a bunch of html here </div> </div> 

Can bootstrap responsive design do this without rows or should I just use floating divs? Keep in mind these columns are all added/deleted via ajax (except for the initial page load) so I'm manipulating the DOM (rows/columns). Re-calculating rows/columns for every change would be a pain.

Answer 1

First, to directly answer your question, you can simply put all columns in a single row.

<div class="row">     <div class="col-md-3"> <img src="1"> </div>     <div class="col-md-3"> <img src="2"> </div>     <div class="col-md-3"> <img src="3"> </div>     <div class="col-md-3"> <img src="4"> </div>     <div class="col-md-3"> <img src="5"> </div>     ...     <div class="col-md-3"> <img src="50"> </div> </div> 

Every 4th item (since the grid is 12 columns and we're using 3 column width grids = 4 columns). Also, this technique always requires equal height columns or your columns won't wrap as expected. So if your pictures are different sizes and you're not scaling them fit inside a fixed height, you'll have some trouble.

It's not Bootstrap "illegal" do to the above. If fact, you'll see the Bootstrap site doing this by applying multiple column size per screen size classes on a single column, like this example off the Bootstrap site:

<div class="row">     <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>     <div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div> </div> <div class="row">     <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>     <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>     <!-- Optional: clear the XS cols if their content doesn't match in height -->     <div class="clearfix visible-xs"></div>     <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> </div> 

When the above is considered "Extra Small" (-xs-), the first column in the first row will span the entire width while the second column will span only half the width.

In the second row, you can see a similar thing. At "Extra Small" size, you will have three "505" width columns, which will give you two rows.

Also, you can see an example of how to Clearfix columns if column rows don't match in height. They recommend inserting an empty div to clearfix.

I would also consider using a list and recommend not over-thinking it (which I find myself doing when using Bootstrap).

In this case, consider something like this:

<ul id="image-list" class="row">     <li class="col-sm-3"><img src="1"></li>     <li class="col-sm-3"><img src="2"></li>     ...     <li class="col-sm-3"><img src="n-1"></li>     <li class="col-sm-3"><img src="n"></li> </ul> 

I hope that helps!

Cheers