How does the responsive utilities of Bootstrap work?

Asked

Viewed 866 times

5

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

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

css twitter-bootstrap bootstrap-3 responsive-layout grid
  • 2

    In the source of version 3 only saw display:none being applied. The same for version 4 (developing). If these classes only do this, it just won’t let the browser render/display the content, "underneath the scenes" it will load normally. As I don’t use this framework I don’t know how to answer with details, but apparently does no magic to save resources. :)

1 answer

5


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;
  }
}

From what you can see there’s not much secret, the classes visible-* receive display: block and the hidden-* receive display: none, the difference is the use of @media which verify which resolution specifies to trigger the class.

There is also the class hidden, acting in all resolutions.

Some examples of how they are executed:Jsfiddle

Browser other questions tagged css twitter-bootstrap bootstrap-3 responsive-layout grid

You are not signed in. Login or sign up in order to post.