# 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: Large devices, Desktops (≥1200px) Medium devices, Desktops (≥992px) Small devices, Tablets (≥768px) Extra small devices, Phones (<768px)

### 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: Large devices, Desktops (≥1200px) Medium devices, Desktops (≥992px) Small devices, Tablets (≥768px) Extra small devices, Phones (<768px)

### 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