bootstrap-helpers

Bootstrap 5.3 Helpers

Bootstrap provides helper classes for common utility patterns that extend the base utility classes.

Clearfix

Clear floats within a container:

<div class="clearfix">
  <button class="btn btn-secondary float-start">Left float</button>
  <button class="btn btn-secondary float-end">Right float</button>
</div>

Color & Background

Combined color and background helpers for proper contrast:

<div class="text-bg-primary p-3">Primary with proper contrast</div>
<div class="text-bg-secondary p-3">Secondary</div>
<div class="text-bg-success p-3">Success</div>
<div class="text-bg-danger p-3">Danger</div>
<div class="text-bg-warning p-3">Warning</div>
<div class="text-bg-info p-3">Info</div>
<div class="text-bg-light p-3">Light</div>
<div class="text-bg-dark p-3">Dark</div>

These ensure proper text color contrast automatically.

Colored Links

Link colors with hover states:

<a href="#" class="link-primary">Primary link</a>
<a href="#" class="link-secondary">Secondary link</a>
<a href="#" class="link-success">Success link</a>
<a href="#" class="link-danger">Danger link</a>
<a href="#" class="link-warning">Warning link</a>
<a href="#" class="link-info">Info link</a>
<a href="#" class="link-light">Light link</a>
<a href="#" class="link-dark">Dark link</a>
<a href="#" class="link-body-emphasis">Body emphasis link</a>

<!-- Link with opacity -->
<a href="#" class="link-primary link-opacity-10">10% opacity</a>
<a href="#" class="link-primary link-opacity-25">25% opacity</a>
<a href="#" class="link-primary link-opacity-50">50% opacity</a>
<a href="#" class="link-primary link-opacity-75">75% opacity</a>
<a href="#" class="link-primary link-opacity-100">100% opacity</a>

<!-- Underline utilities (requires base class) -->
<!-- .link-underline or .link-underline-{color} must be applied for opacity classes to work -->
<a href="#" class="link-underline link-underline-opacity-50">Base underline with 50% opacity</a>
<a href="#" class="link-underline-primary link-underline-opacity-25">Primary underline at 25%</a>

<!-- Combining link color with underline opacity (requires .link-underline base) -->
<a href="#" class="link-primary link-underline link-underline-opacity-0">No underline</a>
<a href="#" class="link-primary link-underline link-underline-opacity-10">Light underline</a>

<!-- Underline offset works directly with link colors (no base class needed) -->
<a href="#" class="link-primary link-offset-2">Offset underline</a>
<a href="#" class="link-primary link-offset-3">More offset</a>

Hover Variants

Link utilities include hover variants for dynamic effects:

<!-- Opacity changes on hover -->
<a href="#" class="link-primary link-opacity-50 link-opacity-100-hover">Brightens on hover</a>

<!-- Underline appears on hover -->
<a href="#" class="link-primary link-underline-opacity-0 link-underline-opacity-100-hover">Underline on hover</a>

<!-- Offset changes on hover -->
<a href="#" class="link-primary link-offset-2 link-offset-3-hover">Offset increases on hover</a>

<!-- Combined hover effect -->
<a href="#" class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover">
  Underline appears on hover
</a>

Focus Ring

Custom focus ring styling:

<!-- Default focus ring -->
<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
  Custom focus ring
</a>

<!-- Colored focus rings -->
<a href="#" class="d-inline-flex focus-ring focus-ring-primary">Primary</a>
<a href="#" class="d-inline-flex focus-ring focus-ring-secondary">Secondary</a>
<a href="#" class="d-inline-flex focus-ring focus-ring-success">Success</a>
<a href="#" class="d-inline-flex focus-ring focus-ring-danger">Danger</a>

<!-- Custom focus ring via CSS variable -->
<a href="#" class="d-inline-flex focus-ring" style="--bs-focus-ring-color: rgba(118, 169, 250, .5)">
  Custom color
</a>

Icon Link

Style links that include icons:

<a class="icon-link" href="#">
  <svg class="bi" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
  Icon link
</a>

<a class="icon-link" href="#">
  Icon link
  <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>

<!-- Icon link with hover animation -->
<a class="icon-link icon-link-hover" href="#">
  Icon link
  <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
</a>

<!-- Custom styling -->
<a class="icon-link icon-link-hover" style="--bs-icon-link-transform: translate3d(0, -.125rem, 0);" href="#">
  <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>
  Icon link
</a>

Position

Position helpers for common patterns:

Fixed Position

<div class="fixed-top">Fixed to top</div>
<div class="fixed-bottom">Fixed to bottom</div>

Sticky Position

<div class="sticky-top">Sticky top</div>
<div class="sticky-sm-top">Sticky top on sm+</div>
<div class="sticky-md-top">Sticky top on md+</div>
<div class="sticky-lg-top">Sticky top on lg+</div>
<div class="sticky-xl-top">Sticky top on xl+</div>
<div class="sticky-xxl-top">Sticky top on xxl+</div>

<div class="sticky-bottom">Sticky bottom</div>
<div class="sticky-sm-bottom">Sticky bottom on sm+</div>
<div class="sticky-md-bottom">Sticky bottom on md+</div>
<div class="sticky-lg-bottom">Sticky bottom on lg+</div>
<div class="sticky-xl-bottom">Sticky bottom on xl+</div>
<div class="sticky-xxl-bottom">Sticky bottom on xxl+</div>

Ratio

Maintain aspect ratios for embeds and videos:

<!-- 16:9 ratio (default) -->
<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/..." title="YouTube video"></iframe>
</div>

<!-- 21:9 ratio -->
<div class="ratio ratio-21x9">
  <iframe src="..."></iframe>
</div>

<!-- 4:3 ratio -->
<div class="ratio ratio-4x3">
  <iframe src="..."></iframe>
</div>

<!-- 1:1 ratio (square) -->
<div class="ratio ratio-1x1">
  <iframe src="..."></iframe>
</div>

<!-- Custom ratio via CSS variable -->
<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <iframe src="..."></iframe>
</div>

Stacks

Quick flexbox layouts:

Vertical Stack (vstack)

<div class="vstack gap-3">
  <div class="p-2">First item</div>
  <div class="p-2">Second item</div>
  <div class="p-2">Third item</div>
</div>

<!-- With spacer -->
<div class="vstack gap-2">
  <button class="btn btn-secondary">Top</button>
  <button class="btn btn-secondary mt-auto">Bottom</button>
</div>

Horizontal Stack (hstack)

<div class="hstack gap-3">
  <div class="p-2">First</div>
  <div class="p-2">Second</div>
  <div class="p-2">Third</div>
</div>

<!-- With spacer -->
<div class="hstack gap-3">
  <button class="btn btn-secondary">Left</button>
  <div class="vr"></div>  <!-- Vertical divider -->
  <button class="btn btn-secondary ms-auto">Right</button>
</div>

<!-- Form inline with stacks -->
<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Add your item here...">
  <button type="button" class="btn btn-secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</button>
</div>

Browser Support Note: Gap utilities (.gap-*) with flexbox aren't fully supported in Safari versions prior to 14.5. Grid layout is unaffected. For broader browser support, consider using margin utilities instead.

Stretched Link

Make entire container clickable:

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some text that will appear.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

<!-- Works with position: relative parent -->
<div class="row g-0 bg-body-secondary position-relative">
  <div class="col-md-6">
    <img src="..." class="w-100" alt="...">
  </div>
  <div class="col-md-6 p-4">
    <h5>Columns with stretched link</h5>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

Note: The parent must have position: relative (cards have this by default).

Identifying the containing block: If the stretched link doesn't work as expected, check for these CSS properties on parent elements which also create containing blocks: transform, perspective, filter (Firefox only), or will-change set to transform or perspective.

Text Truncation

Truncate long text with ellipsis:

<!-- Block level (requires block display) -->
<div class="text-truncate" style="max-width: 150px;">
  This text is too long and will be truncated with an ellipsis.
</div>

<!-- Inline with d-inline-block -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
  This text is truncated.
</span>

Vertical Rule

Vertical dividers:

<div class="vr"></div>

<!-- In flexbox -->
<div class="d-flex" style="height: 200px;">
  <div class="vr"></div>
</div>

<!-- In stacks -->
<div class="hstack gap-3">
  <div>Item 1</div>
  <div class="vr"></div>
  <div>Item 2</div>
  <div class="vr"></div>
  <div>Item 3</div>
</div>

Visually Hidden

Hide content visually but keep accessible to screen readers:

<!-- Completely hidden from visual users -->
<h2 class="visually-hidden">Title for screen readers</h2>

<!-- Hidden but focusable (for skip links) -->
<a class="visually-hidden-focusable" href="#main-content">Skip to main content</a>

Use cases:

• Skip navigation links
• Form labels when visual context is sufficient
• Additional context for icons/images
• Headings for document structure

Sass mixins available for custom classes:

@import "bootstrap/scss/mixins/visually-hidden";

.custom-sr-only {
  @include visually-hidden;
}

Sass Customization

Many helpers support build-time customization via Sass variables:

• Focus Ring: $focus-ring-width, $focus-ring-opacity, $focus-ring-blur
• Icon Link: $icon-link-gap, $icon-link-icon-size, $icon-link-icon-transform
• Ratio: $aspect-ratios map for custom aspect ratios

Additional Resources

Reference Files

• references/helpers-reference.md - Complete helper class reference and Sass customization options

Example Files

• examples/accessibility-patterns.html - Visually hidden, focus ring, skip links, and screen reader utilities
• examples/link-helpers-patterns.html - Colored links, icon links, stretched links, and link utilities
• examples/position-layout-patterns.html - Fixed and sticky positioning patterns
• examples/ratio-embed-patterns.html - Responsive video embeds and aspect ratio utilities
• examples/stack-patterns.html - Comprehensive vstack/hstack patterns including gap variations