bootstrap-helpers

What problem does it solve?

The bootstrap-helpers skill makes it easy to apply Bootstrap’s helper and utility classes to build consistent, accessible user interfaces without guessing which class to use.

Core Features & Use Cases

• Clearfix: Clear floats within a container for stable layouts.
• Color & Background: Apply contrast-ready text and background combinations.
• Colored Links: Use link color utilities for consistent navigation styling.
• Focus Ring: Implement accessible focus indicators on interactive elements.
• Icon Link: Create compact links with optional icons and hover effects.
• Position & Ratio: Use fixed, sticky, and aspect-ratio utilities for responsive layouts.
• Stacks & Text Truncation: Build vstack/hstack patterns and gracefully truncate long text.
• Stretched Link: Make an entire card or block clickable to improve UX.
• Visually Hidden: Provide screen-reader friendly patterns and skip links.
• Sass Customization: Extend utilities via Sass variables and mixins for branding.

Quick Start

1. Open references/helpers-reference.md to review available helper classes and recommended usage.
2. Apply the relevant classes to your HTML elements (e.g., clearfix on floated containers, text-truncate for ellipsis, focus-ring for focus styling).
3. If needed, customize defaults using Sass variables before importing Bootstrap in your build pipeline.