Helper Classes

Bootstrap 3 includes a small grab-bag of single-purpose utility classes that don't fit neatly into typography, tables or images but come up constantly in real layouts: fixing broken float layouts, centering a block element, quickly showing or hiding content, hiding content visually while keeping it available to screen readers, and the little triangle used inside dropdown toggles.

1. Clearing Floats: .clearfix

When a container holds only floated children, the container's own height collapses to zero because floated elements don't contribute to it. Add .clearfix to the parent to force it to wrap around its floated content properly.

<div class="clearfix">
  <img src="trail-1.jpg" style="float:left;width:120px">
  <img src="trail-2.jpg" style="float:left;width:120px">
</div>
<!-- without .clearfix, whatever comes after this div would ride up
     underneath the floated images instead of starting below them -->

2. Centering a Block: .center-block

Add .center-block to a block-level element to horizontally center it — it sets display: block and auto left/right margins, the same trick you'd otherwise write by hand.

<img src="logo.png" class="center-block" alt="TrailMap logo">

3. Showing and Hiding: .show / .hidden

.show forces an element to display: block !important, and .hidden forces display: none !important — a quick way to toggle visibility from JavaScript by adding or removing the class.

<div id="filterPanel" class="hidden">
  <!-- filter controls, hidden until the user clicks "Filter" -->
</div>

4. Screen-Reader-Only Content: .sr-only / .sr-only-focusable

.sr-only hides an element visually while keeping it in the accessibility tree, so screen readers still announce it — useful for a label that's obvious visually but still needs an explicit text equivalent. Add .sr-only-focusable alongside it to make the element reappear visually the moment it receives keyboard focus, which is the standard pattern for a "skip to main content" link.

<label for="trailSearch" class="sr-only">Search trails</label>
<input type="text" id="trailSearch" class="form-control" placeholder="Search trails">

<a href="#main" class="sr-only sr-only-focusable">Skip to main content</a>

5. The Dropdown Caret: .caret

.caret draws a small downward-pointing triangle out of CSS borders — no image, no icon font. It's the standard marker placed inside a dropdown toggle button to signal that clicking it opens a menu.

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  Sort by <span class="caret"></span>
</button>

6. Worked Example: TrailMap Floated Gallery with Clearfix

A small photo strip on a trail page: each thumbnail floats left so they sit in a row, and .clearfix on the wrapping <div> makes sure the caption paragraph underneath starts below the photos instead of overlapping them.

<div class="clearfix">
  <img src="ridgeline-1.jpg" class="img-thumbnail" style="float:left;width:100px;margin-right:8px">
  <img src="ridgeline-2.jpg" class="img-thumbnail" style="float:left;width:100px;margin-right:8px">
  <img src="ridgeline-3.jpg" class="img-thumbnail" style="float:left;width:100px">
</div>
<p class="text-muted">Photos submitted by hikers this month.</p>