Links
Style semantic links with accessible defaults, muted and subtle variants, plain presentation, and reliable interaction states.
Links
Every anchor with an href receives a themed color, underline, hover treatment, and the global visible focus ring. Add a link class only when its surrounding context calls for different emphasis.
Default links
Keep the underline for links inside prose so they remain identifiable without color.
Read the installation guide, browse components, or visit an external resource.
<p>Read the <a href="/docs">installation guide</a>.</p>Muted and subtle links
Use muted or subtle color when the destination is supplementary. The underline and interaction states still communicate that the text is actionable.
<a class="bs-link" href="/account">Primary link</a>
<a class="bs-link-muted" href="/terms">Muted link</a>
<a class="bs-link-subtle" href="/history">Subtle link</a>Plain links in composed components
Remove the underline only when shape, placement, and surrounding component styling already make the target unmistakable.
<a class="bs-link-plain bs-card bs-card-subtle bs-card-body" href="/settings">
<strong>View project settings</strong>
<span class="bs-text-muted">Manage members, billing, and security.</span>
</a>Use anchors for navigation
Use <a href> when activation changes the URL. Use a button for an in-page action.
Name the destination
Write link text that makes sense out of context. Avoid repeated “click here” labels.
Do not remove focus
Boobstrap’s global focus ring is part of the contract. Never suppress it without an equally visible replacement.
Link API
| Class | Purpose |
|---|---|
.bs-link | Explicit primary link color. |
.bs-link-muted | Secondary text color with link semantics intact. |
.bs-link-subtle | Lowest-emphasis link color. |
.bs-link-plain | Inherits text color and removes the underline for clearly composed targets. |