Bootstrap and Responsive Web Design

• 1) Fluid grids
• 2) Flexible images
• 3) Media queries

• Ethan Marcotte, May 25, 2010
• "Responsive Web Design", A List Apart

Responsive web design uses "media queries" to determine the resolution of the device it's being served on.  Flexible images and fluid grids then size correctly to fit the screen.

• Break up the website's layout into modules that can be moved and resized as needed
• Provides a framework for organizing content
• The elements in the layout resize their widths in relation to one another
• The process uses percentages, not pixels
• This entails complex math

960 pixels but typically the center 940 pixels are used and can be divided up proportionately for use in a fluid grid system.  960 pixels fits on a majority of screens and is easily divided as needed for collapsing columns.

12 column or 16 column

target / context = results

• Component size is not set in pixels but in proportional terms
• Columns are a percentage of the size of it's contained elements