How does Bootstrap responsive utilities work?

Question

How does Bootstrap responsive utilities work?

Navigation

#1 by (5 votes)

5

From the point of view of application performance, how does the hidden-** and visible-** classes work?

If I put a div with hidden-xs it will load on an xs device and it will not be visible, or the bootstrap does this check before loading - sparing network resources and data -

css twitter-bootstrap layout-responsivo grid bootstrap-3

asked by anonymous 27.10.2015 / 23:09

1 answer

Cut a piece of the image using mouse Why can not I display the MessageBoxButtons if it is not a string?

score 5 · Accepted Answer

If you take a look at the bootstrap css you will notice the following code:

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .visible-xs {
    display: block !important;
  }
  table.visible-xs {
    display: table !important;
  }
  tr.visible-xs {
    display: table-row !important;
  }
  th.visible-xs,
  td.visible-xs {
    display: table-cell !important;
  }
}

As you can see there is not much secret, visible-* classes receive display: block and hidden-* receive display: none , the difference is the use of @media that verify which resolution specifies to be triggered by class.

There is also the class hidden , which acts on all resolutions.

Some examples of how they run: Jsfiddle