How can I hide a div using Bootstrap 3.3.0?

You can hide a div in Bootstrap 3.3.0 using several methods. Here are the most common approaches:

1. Using the 'hidden' Class:

- The simplest way to hide a div is by applying the hidden class. This class sets display: none;, effectively removing the div from the document flow. It won't take up space on the page and won't be visible.

- Example: <div class="hidden">This div is hidden</div>

2. Using Responsive Visibility Classes:

- Bootstrap 3.3.0 provides responsive classes to control visibility based on screen sizes. These classes include .visible-xs-, .visible-sm-, .visible-md-, .visible-lg- for showing elements at specific sizes, and .hidden-xs, .hidden-sm, .hidden-md, .hidden-lg for hiding elements at specific sizes. Replace '' with 'block', 'inline', or 'inline-block'.

- Example: <div class="hidden-sm hidden-xs">This div is hidden on small and extra small screens</div>

- In this example, the div will be hidden on screens that are extra small (xs) and small (sm), but visible on medium (md) and large (lg) screens.

3. Using Inline CSS with 'style' Attribute:

- You can also use inline CSS to hide a div. This approach applies display: none; directly to the element via the style attribute, but it's generally less maintainable than using CSS classes.

- Example: <div style="display: none;">This div is also hidden.</div>

4. Hiding via Javascript:

- Although this question is specific to Bootstrap, it's common to hide or show elements via Javascript. You can use JavaScript to dynamically toggle or modify the visibility of the div by manipulating it's class or style properties. For example, to add the 'hidden' class in JavaScript, you would use:

const myDiv = document.getElementById('myDiv');
myDiv.classList.add('hidden');

And to show the same div, you would use:

const myDiv = document.getElementById('myDiv');
myDiv.classList.remove('hidden');

To change the 'display' style property directly, you would use

const myDiv = document.getElementById('myDiv');
myDiv.style.display = 'none'; // To hide
myDiv.style.display = 'block'; // To show

The most common method for hiding a div in Bootstrap 3.3.0 is using the hidden class or the responsive visibility classes, as they are designed to work seamlessly with Bootstrap’s grid system and responsive behavior. Choose the method that best fits the requirements of your project.

Learn more about this