Responsive Utilities

Sometimes an entire block of content should only exist at certain screen sizes - a filter panel that only makes sense once there's room for it, or a compact summary that only phones need. Bootstrap 3 handles this with a set of simple show/hide classes tied to the same four breakpoints as the grid.

The .visible-* and .hidden-* Classes

.hidden-{bp} hides an element only at that breakpoint, leaving it visible everywhere else. .visible-{bp} does the reverse - it hides the element everywhere except that one breakpoint:

The visible-* Display Variants

Because .visible-* has to know what display value to restore the element to, each one actually comes in three suffixed variants - -block, -inline, and -inline-block - matching how the element should render when it's shown:

<div class="visible-xs-block">Only shown as a block on phones</div>
<span class="visible-md-inline">Only shown inline on small desktops</span>

TrailMap Example: Hiding the Filter Panel on Small Screens

The trail listing page has a sidebar filter panel (difficulty, distance, elevation sliders) that needs real width to be usable. On phones there simply isn't room for it next to the trail cards, so it's hidden below the sm breakpoint with .hidden-xs:

<div class="row">
  <div class="col-sm-3 hidden-xs">
    <div class="panel panel-default">
      <div class="panel-heading">Filter Trails</div>
      <div class="panel-body">Difficulty, distance, elevation</div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-9">
    <!-- trail cards -->
  </div>
</div>

On phones the filter panel disappears entirely and the trail cards column takes the full width; from the sm breakpoint up, the filter panel reappears in its own col-sm-3 alongside the listing.