How to Hide Elements in Responsive Layouts with Bootstrap?

Hiding Elements in Responsive Layouts with Bootstrap

When designing responsive layouts, managing space becomes crucial, especially on smaller screens. Bootstrap provides support for collapsing menu bar items for mobile devices, but what if you want to hide other page elements similarly?

Solution:

Bootstrap offers classes that allow you to hide elements based on screen size:

• Extra Small Devices: Phones (<768px) - .visible-xs-* (show), .hidden-xs (hide)
• Small Devices: Tablets (≥768px) - .visible-sm-* (show), .hidden-sm (hide)
• Medium Devices: Desktops (≥992px) - .visible-md-* (show), .hidden-md (hide)
• Large Devices: Desktops (≥1200px) - .visible-lg-* (show), .hidden-lg (hide)

Example Usage:

To hide a .nav-pills element on small screens:

  ...
Additional Notes:

For Bootstrap 4, use hidden-*-up (hides for larger breakpoints) or hidden-*-down (hides for smaller breakpoints).
Bootstrap 3.2.0 deprecated .hidden-* in favor of .visible-*.
In older Bootstrap versions, .hidden-phone and .hidden-tablet are obsolete.

The above is the detailed content of How to Hide Elements in Responsive Layouts with Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!