We will take the 'bootstrap-responsive.css' in consideration and try to understand the nuances of how this 'Responsive Design' stuff is achieved. But before that, you must know that you have to ad the following line within head section of your webpage: view plainprint? <meta name="viewport" content="width=device-width, initial-scale=1.0"> The view port meta tag, as it is commonly called as, overrides the default viewport and helps to load the style related to the specific viewport. width property sets the width of the screen. It may contain a value like 320, denoting 320 pixels or may have the value 'device-width' which tells the browser to use the native resolution(or width you may say for simplicity) of the device. initial-scale property is the initial scale of the viewport as a multiplier. So, when set to 1.0, it represents the native width of the device in question. And of course, after that you must add the responsive CSS of Twitter Bootstrap like following: view plainprint? <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> Now, if you look at the responsive CSS file, you would find that after declaring some general stuff (from line number 10 to 22), there are various sections starting with '@media'. And this is how styles for various device sizes are written. The first of this sections starts with '@media (max-width: 480px)', which sets styles for devices whose maximum width is 480 pixels. The second section starts with '@media (max-width: 767px)', which sets styles for devices whose maximum width is 767 pixels. The third section starts with '@media (min-width: 768px) and (max-width: 979px)', which sets styles for devices whose minimum width is 768 pixels and maximum width is 979 pixels. The next section is for devices with maximum width of 979 pixels. So, it starts with '@media (max-width: 979px)'. Last two sections starts with '@media (min-width: 980px)' and '@media (min-width: 1200px)'; so the first one is for devices with minimum width 980 pixels and 1200 pixels. So, what basically this style sheet does is, storing styles according to minimum and maximum widths of the devices using 'min-width' and 'max-width' properties. A little explanation To make the layout responsive, Twitter Bootstrap does these three things : 1. It modifies the width of the column in the grid. 2. Whenever required, it uses stack element instead of float. if you are not very much clear about what is this stack element stuff, then the following form w3.org may be helpful: The root element (html) forms the root stacking context. Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of 'z-index' other than 'auto'. Stacking contexts are not necessarily related to containing blocks. 3. To render headings and text properly, it resizes them when required. Develop mobile-friendly layouts faster Twitter Bootstrap has several utility classes for developing mobile-friendly layouts faster. These classes are available on 'responsive.less'. .visible-phone, visible on Phones of width 767px and below, hidden on Tablets of 979px to 768px and also hidden on Desktops, which is default. .visible-tablet, hidden on Phones of width 767px and below, visible on Tablets of 979px to 768px and hidden on Desktops, which is default. .visible-desktop, hidden on Phones of width 767px and below, hidden on Tablets of 979px to 768px and visible on Desktops, which is default. .hidden-phone, hidden on Phones of width 767px and below, visible on Tablets of 979px to 768px and visible on Desktops, which is default. .hidden-tablet, visible on Phones of width 767px and below, hidden on Tablets of 979px to 768px and visible on Desktops, which is default. .hidden-desktop, visible on Phones of width 767px and below, visible on Tablets of 979px to 768px and hidden on Desktops, which is default.