Hiding elements in responsive layout?

by

New visible classes added to Bootstrap

Extra small devices
Phones (<768px) (Class names : .visible-xs-block, hidden-xs)

Small devices
Tablets (≥768px) (Class names : .visible-sm-block, hidden-sm)

Medium devices
Desktops (≥992px) (Class names : .visible-md-block, hidden-md)

Large devices
Desktops (≥1200px) (Class names : .visible-lg-block, hidden-lg)

For more information : http://getbootstrap.com/css/#responsive-utilities

Below is deprecated as of v3.2.0

Extra small devices
Phones (<768px) (Class names : .visible-xs, hidden-xs)

Small devices
Tablets (≥768px) (Class names : .visible-sm, hidden-sm)

Medium devices
Desktops (≥992px) (Class names : .visible-md, hidden-md)

Large devices
Desktops (≥1200px) (Class names : .visible-lg, hidden-lg)

Much older Bootstrap

.hidden-phone, .hidden-tablet etc. are unsupported/obsolete.

UPDATE:

In Bootstrap 4 there are 2 types of classes:

  • The hidden-*-up which hide the element when the viewport is at the given breakpoint or wider.
  • hidden-*-down which hide the element when the viewport is at the given breakpoint or smaller.

Also, the new xl viewport is added for devices that are more then 1200px width. For more information click here.

More Related Contents:

  1. Bootstrap row with columns of different height
  2. How to place a div over a image? [closed]
  3. Setting columns in bootstrap grid
  4. What are the steps to make a HTML design responsive? [closed]
  5. Bootstrap height
  6. What is sr-only in Bootstrap 3?
  7. Table fixed header and scrollable body
  8. How do I change Bootstrap 3 column order on mobile layout?
  9. IE8 support for CSS Media Query
  10. Twitter Bootstrap 3, vertically center content [duplicate]
  11. Bootstrap 3 two columns full height
  12. Animate/Shrink NavBar on scroll using Bootstrap
  13. One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
  14. Align the form to the center in Bootstrap 4 [duplicate]
  15. Is it possible to set a background in a bootstrap column that oversizes the div? [duplicate]
  16. Mosaic of images HTML/CSS
  17. Table headers position:sticky and border issue
  18. Use Fieldset Legend with bootstrap
  19. Responsive tables, the smart way
  20. Bootstrap navbar link color won’t change
  21. Empty vertical space between columns in Bootstrap 4
  22. Responsive image align center bootstrap 3
  23. Bootstrap Grid, do I need a container?
  24. Bootstrap 3 – show collapsed navigation for all screen sizes
  25. How to make bootstrap carousel image responsive?
  26. Why aren’t my bootstrap 4 columns the same height?
  27. Bootstrap 5 layout for different sizes cards – like Pinterest
  28. Can a div have multiple classes (Twitter Bootstrap) [duplicate]
  29. How to work with ellipsis in bootstrap responsive table
  30. CSS float-right not working in Bootstrap 4 Navbar [duplicate]

Leave a Comment