← ClaudeAtlas

bootstrap-helperslisted

This skill should be used when the user asks about Bootstrap helpers, Bootstrap clearfix, Bootstrap color and background helpers, Bootstrap colored links, Bootstrap focus ring, Bootstrap icon link, Bootstrap position helpers, Bootstrap ratio helpers, Bootstrap stacks, Bootstrap stretched link, Bootstrap text truncation, Bootstrap vertical rule, Bootstrap visually hidden, or needs help with Bootstrap helper classes.
ronnieiscoo/bootstrap-expert · ★ 0 · Web & Frontend · score 63
Install: claude install-skill ronnieiscoo/bootstrap-expert
# Bootstrap 5.3 Helpers Bootstrap provides helper classes for common utility patterns that extend the base utility classes. ## Clearfix Clear floats within a container: ```html <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: ```html <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: ```html <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="#" cla