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>

<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>

<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>

<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>

<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:

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

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

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

<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:

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

<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>

<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 icon-link-hover" href="#"> Icon link <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg> </a>

<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:

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

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

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

<div class="ratio ratio-1x1"> <iframe src="..."></iframe> </div>

<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>

<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>

<div class="hstack gap-3"> <button class="btn btn-secondary">Left</button> <div class="vr"></div>  <button class="btn btn-secondary ms-auto">Right</button> </div>

<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>

<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:

<div class="text-truncate" style="max-width: 150px;"> This text is too long and will be truncated with an ellipsis. </div>

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

Vertical Rule

Vertical dividers:

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

<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:

<h2 class="visually-hidden">Title for screen readers</h2>

<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

bootstrap-helpers

Safety Notice

Copy this and send it to your AI assistant to learn

Source Transparency

Related Skills

bootstrap-layout

bootstrap-components

bootstrap-customize

bootstrap-icons