Bootstrap 3 Responsive Image Grid


Non-stacking grid example

Uses the tiny .col-* grid classes

This layout displays 4 images per row. Bootstrap 3 sizes images "responsively" using the img-responsive CSS class. As browser width shrinks, the columns and images scale down accordingly...

This demonstrates a completely percentage-based responsive (A.K.A. "fluid") layout. The negative aspect of this layout is that it starts to look like the last line of an eye chart at smaller widths.

Since the "eye chart" aspect isn't really a good thing, let's see how we can use Bootstrap's three powerful grid sizes to improve our design...




4-3-2 grid example

Uses all 3 grid sizes

Rather that simply scaling down image size proportionally as the browser size shrinks, a better responsive design would adjust and re-layout the image grid accordingly. The following example uses this technique. This layout shows 4 columns on large (ie: desktop) displays. As screen width shrinks on smaller (ie: tablets), 3 columns are displayed. At the smallest widths (ie: mobile phones), only 2 columns are displayed.

This improved responsive layout is achieved using Bootstrap's tiny, small and large grid sizes. By combining use of the col-*,col-sm-* and col-lg-* CSS class. Just like before, the images scale down accordingly, but now our column layout adjusts accordingly too. The column adjustment occurs at pre-defined "breakpoints" that are defined on the Bootstrap CSS media queries. These breakpoints align with common device sizes and widths.

Behold the power of the Bootstrap 3's mobile first grid! Now we can come up with even more combinations.




6-4-3 grid example

6 columns on desktop, 4 columns on tablets, 3 columns on phones




3-2-1 grid example

3 columns on desktop, 2 columns on tablets, 1 columns on phones