To properly address this inquiry, one must first grasp how Twitter Bootstrap's grid system operates.
How Does Twitter Bootstrap Identify Devices?
Media queries
We utilize specific media queries in our Less files to establish the key breakpoints within our grid system.
/* Extra small devices (phones, less than 768px) */
/* No media query is needed as this is Bootstrap's default setting */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
By using min-width, the subsequent code block will be implemented on all screen widths exceeding the breakpoint value.
For instance, CSS rules for medium devices will apply to devices with screen widths equal to or greater than 992px. Within this range, they will override any rules designated for small devices (in compliance with the order of col-sm-* col-md-*).
Regarding extra small devices, CSS rules are not specified by media queries but are typically included in the stylesheet and applied to elements regardless of the device's screen width, unless overridden by a @media query.
Using the following structure (Example here):
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
The resulting CSS would be:
- On extra small devices
- First div: Nothing; it expands to fill its parent's width as a block-level element.
- Second div:
.col-xs-6 { width: 50%; }
- On small devices
- First div: Nothing; it fills the entire width of its parent.
- Second div:
.col-xs-6 { width: 50%; }
- On medium devices
- On large devices
It can be observed that the first <div> behaves as a normal block-level element on Extra Small and Small devices, while on Medium devices, it responds to the media query.
Hence, reducing the window size below 992px will cause the first <div> to occupy the full horizontal space within its parent element.
Does Bootstrap intervene to facilitate this process(1), or does it remain unaltered(2)?
- (2) is accurate: Bootstrap leaves it unchanged.
When/Where Should Grid Classes Be Utilized?
The choice is ultimately yours. However, just because
col-xs-* can also be applied to large screens
, doesn't mean it
should or
must be used.
If you aim to arrange columns into vertical blocks on extra small devices, begin with col-sm-* grid classes. To achieve a similar effect on small devices, opt for col-md-* or col-lg-* classes.
Additionally, employing col-lg-* will supersede col-md-* on large devices. Ensure the class order follows this sequence:
<div class="col-xs-* col-sm-* col-md-* col-lg-*">