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.
This page must be refreshed to complete your login.
You will lose any unsaved work once the page is refreshed.
Click "No" to cancel the login process.
Click "Yes" to continue...
Unlimited plys. Unlimited downloads. No Ads.