Vintage Black Glass Beads


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.

Red Vintage
Click image to enlarge & Info
#5449 New
Measures 12x9mm

Sold in lots of 12 pcs for $10.79

Click image to enlarge & Info
#110h

Measures 8x18mm
Sold in lots of 6 pcs for $5.99

Click image to enlarge & Info
#325b

Measures 7x9mm
Sold in lots of 6 pcs for $4.99

Click image to enlarge & Info
#079

Measures 8x8mm
Sold in lots of 6 pcs for $11.99

Click image to enlarge & Info
#5460

Measures 11mm
Sold in lots of 12 pcs for $9.99

Click image to enlarge & Info
#5484

Measures 10X16mm
Sold in lots of 6 pcs for $11.99

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 gri