Adaptiveness

Where many aspects of the page can change based on the browser's width.

Test resize your browser.

Fixed layout

These values will change as you resize your browser:

Header

12/12 columns wide

Font size changes based on Bootstraps default media queries.

Content

8/12 columns wide

Content changes from 4 columns to 1 column on phones.

Lorem ipsum.

Dolor sit amet, consectetur adipiscing elit.

Aliquam eget sapien commodo ex egestas tempor. Etiam imperdiet at mauris non faucibus.

Quisque nisl nulla.

Footer

12/12 columns wide

Fluid layout

These values will change as you resize your browser:

Header

12/12 columns wide

Font size changes based on Bootstraps default media queries.

Content

9/12 columns wide on large screens

8/12 columns wide on medium screens

6/12 columns wide on extra-small/small screens

Content changes from 4 columns to 1 column on phones.

Lorem ipsum.

Dolor sit amet, consectetur adipiscing elit.

Aliquam eget sapien commodo ex egestas tempor. Etiam imperdiet at mauris non faucibus.

Quisque nisl nulla.

Footer

12/12 columns wide