Visibility

Bootstrap provides visibility classes to show or hide content based on the screen size. This is essential for responsive design.

Visible Classes

Show elements only on specific screen sizes:

<div class="visible-xs-block">Only visible on phones</div>
<div class="visible-sm-block">Only visible on tablets</div>
<div class="visible-md-block">Only visible on desktops</div>
<div class="visible-lg-block">Only visible on large desktops</div>

Hidden Classes

Hide elements on specific screen sizes:

<div class="hidden-xs">Hidden on phones</div>
<div class="hidden-sm">Hidden on tablets</div>
<div class="hidden-md">Hidden on desktops</div>
<div class="hidden-lg">Hidden on large desktops</div>

Display Variations

<!-- Show as block -->
<div class="visible-md-block">Block on medium</div>

<!-- Show as inline -->
<span class="visible-md-inline">Inline on medium</span>

<!-- Show as inline-block -->
<span class="visible-md-inline-block">Inline-block on medium</span>

Practical Examples

<!-- Show full navigation on desktop, hamburger on mobile -->
<nav class="hidden-xs">Full navigation links</nav>
<button class="visible-xs-block">☰ Menu</button>

<!-- Different content for different devices -->
<p class="visible-xs-block">Tap here for more info</p>
<p class="hidden-xs">Click here for more information</p>

Print Classes

<div class="visible-print-block">Only shows when printing</div>
<div class="hidden-print">Hidden when printing</div>