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...
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-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 columns on desktop, 4 columns on tablets, 3 columns on phones
3 columns on desktop, 2 columns on tablets, 1 columns on phones