CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-designtwitter-bootstrap-3
jhamm
jhamm

Reputation: 25032

How does Bootstrap switch from one class to the next?

I am trying to understand Bootstrap 3's responsiveness. I understand in css if you have 2 classes on an element, then the 2nd class will override the first class. But, when you create a responsive design with Bootstrap, your element will look something like this:

<div class="col-sm-1 col-md-6 col-lg-11"></div>

Is it the css that switches between these classes depending on the size of the screen? Or does the javascript manage this? From my understanding, the attributes in col-lg-11 would always overwrite the other 2 classes, but obviously my understanding is incomplete.

Upvotes: 0

Views: 1421

Answers (2)

zessx
zessx

Reputation: 68790

It's managed by CSS.

The CSS rules are written in a specific order, and it's this order which make Bootstrap "mobile first". You'll apply, in the right order :

  • col-xs-n
  • col-sm-n
  • col-md-n
  • col-lg-n

Example for <div class="col-xs-1 col-sm-1 col-md-6 col-lg-11"></div> :

...
.col-xs-1 {}
...
@media (min-width: 768px) {
  ...
  .col-sm-1 {}
  ...
}
@media (min-width: 992px) {
  ...
  .col-md-6 {}
  ...
}
@media (min-width: 1200px) {
  ...
  .col-lg-11 {}
  ...
}
  1. You'll first have col-xs-1 rules applied.
  2. If your screen has a width >= 768px, then you apply col-sm-1 rules. As the same element have both classes, col-sm-1 will override col-xs-1 (the last rule written always gain the upper hand).
  3. If your screen has a width >= 992px, then you apply col-md-6 rules, which will override col-sm-1.
  4. If your screen has a width >= 1200px, then you apply col-md-11 rules, which will override col-md-6.

Upvotes: 2

Carol Skelly
Carol Skelly

Reputation: 362430

It is indeed the CSS that switches between these classes depending on the size of the screen using CSS @media queries (no javascript).

The col-lg-11 does not "override" the others. The col-md-6 is applied on medium width screens, and the col-sm-1 is applied on small width screens, so in this way the other classes override the col-lg-11.

Upvotes: 1

Related Questions