How can I hide a div responsively using Bootstrap 3.3.0?

To hide a div responsively using Bootstrap 3.3.0, you can utilize the built-in responsive utility classes that Bootstrap provides. These classes allow you to show or hide elements based on the viewport size.

Here's how you can do it:

1. Understand Bootstrap's Responsive Classes:

- Bootstrap 3.3.0 uses the following responsive prefixes: xs (for extra small screens, like phones), sm (for small screens, like tablets), md (for medium screens, like desktops), and lg (for large screens, like larger desktops).

- Classes available for hiding and showing elements:
- .hidden-xs: Hides the element on extra small devices (phones).
- .hidden-sm: Hides the element on small devices (tablets).
- .hidden-md: Hides the element on medium devices (desktops).
- .hidden-lg: Hides the element on large devices (larger desktops).
- .visible-xs: Shows the element only on extra small devices (phones).
- .visible-sm: Shows the element only on small devices (tablets).
- .visible-md: Shows the element only on medium devices (desktops).
- .visible-lg: Shows the element only on large devices (larger desktops).

2. Applying the Classes to Your div:

- To hide a div on specific screen sizes, you add the appropriate hidden- class to the div element. For example, to hide a div on phones and tablets, use <div class="hidden-xs hidden-sm">.

3. Example Usage:

Let's say you want a div to be visible on desktops and large desktops but hidden on phones and tablets. You would use the following:

<div class="hidden-xs hidden-sm">
   This div will be hidden on extra small and small screens.
</div>

Or if you want something to be displayed only on tablets:

<div class="visible-sm">
   This div will be visible only on small screens.
</div>

4. Combining Classes:

- You can combine multiple hidden- or visible- classes to achieve your desired responsive behavior. For example, <div class="hidden-xs visible-md visible-lg"> will hide the div on extra-small screens and make it visible on medium and large screens.

5. Best Practices:

- Use .hidden- classes when you want to hide an element by default and show on larger sizes or .visible- when you want to show on specific viewport sizes.

By using Bootstrap’s responsive utility classes, you can easily control the visibility of your divs on different screen sizes, making your web pages more user-friendly and responsive.

Learn more about this