Bootstrap - Responsive

bootstrap

http://www.sitepoint.com/responsive-web-design-tips-bootstrap-css/

What are the device classes?

  1. Extra small devices: Phones (<768px)
  2. Small devices: Tablets (≥768px)
  3. Medium devices: Desktops (≥992px)
  4. Large devices: Desktops (≥1200px)

What are the CSS classes?

  1. visible-xs-*: visible only on extra small device, hidden on all other devices.
  2. visible-sm-*: visible only on small device, hidden on all other devices
  3. visible-md-*
  4. visible-lg-*
  5. hidden-xs
  6. hidden-sm
  7. hidden-md
  8. hidden-lg
  9. visible-xs-block
  10. visible-xs-inline
  11. visible-xs-inline-block

If needed, we can combine appropriate classes together to achieve the desired effect.

As of v3.2.0, the .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below:

  • visible-*-block
  • visible-*-inline
  • visible-*-inline-block

So, for extra small (xs) screens for example, the available .visible-*-* classes are: .visible-xs-block, .visible-xs-inline, and .visible-xs-inline-block. The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg also exist, but are deprecated as of v3.2.0. They are approximately equivalent to .visible-*-block, except with additional special cases for toggling <table>-related elements.

What are the print CSS classes?

  • visible-print-block: visible when printed, but hidden by the browser
  • visible-print-inline
  • visible-print-inline-block
  • hidden-print

The class .visible-print also exists but is deprecated as of v3.2.0. It is approximately equivalent to .visible-print-block, except with additional special cases for <table>-related elements.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License