Responsive Design with Twitter Bootstrap

Responsive Design

Responsive design is fundamentally the concept of changing the way your application looks and behaves as the screen size gets smaller. This is done using CSS3 media queries.

Media Queries

Media query is a really fancy term for "conditional CSS rule". It simply apples some CSS based on certain conditions set forth. If those conditions are met, the style is applied.

Media queries are supported in IE9+ and pretty much every other browser, including mobile where they are particularly applicable. If you want to get simple Media Query support for IE7 and 8, you can use the popular Respond.js pollyfill.

Media queries have two parts, a device specification and then a size rule.

Making our application responsive

Twitter Bootstrap includes a response.css file which will take care of Bootstrap's stake in our little application's success. Go ahead and add that file to your application's header underneath the bootstrap link.

<link href="css/bootstrap-min.css" rel="stylesheet"><link href="css/bootstrap-responsive-min.css" rel="stylesheet">