Twitter Bootstrap is a mobile first responsive utility, and what this means is that many of its baseline styles are meant for mobile, and then additional rules are added to the style sheet using @media queries.
Baseline Styles |
Greater than 768px Wide |
Greater than 992px Wide |
Greater than 1,200px Wide |
.element-selector { font-size: 16px; font-weight: normal; } |
.element-selector { display: inline-block; } |
.element-selector { color: blue; } |
.element-selector { display: block; font-weight: bold; } |
Because @media queries are arranged to be cumulative as the screen size increases, using the above styles as an example, the resulting style definitions for this element on screen sizes larger than 1200pixels wide would be:
.element-selector { color: blue; display: inline-block; display: block; font-weight: normal; font-weight: bold; font-size: 16px; } |
You’ll notice in the cumulative style definition above, that display: inline-block; and
font-weight: normal; are crossed out and red. These values for font-weight and display have been overridden by values defined in the @media ( min-width : 1200px ) query. Just like in a regular CSS cascade, individual styles for each element can be added or updated based on the device or viewport width.
