Basic link
The example below a link with default behavior.
<div class="d-flex flex-column">
<a href="#">Default link</a>
</div>Colored links
You can use the .link-* classes to colorize links. Unlike the .text-* classes, these classes have a :hover and :focus state.
<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">Emphasis link</a>Reset link color
Reset a link’s color with .text-reset, so that it inherits the color from its parent.
Muted text with a reset link.
<p class="text-danger">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Link opacity
The below table are available CSS utilities for link opacity.
| CSS | Desc |
|---|---|
.link-opacity-10 | –bs-link-opacity: .1 |
.link-opacity-25 | –bs-link-opacity: .25 |
.link-opacity-50 | –bs-link-opacity: .5 |
.link-opacity-75 | –bs-link-opacity: .75 |
.link-opacity-100 | –bs-link-opacity: 100 |
<a class="link-opacity-25" href="#">Link 1</a>
<a class="link-opacity-75" href="#">Link 2</a>
<a class="link-opacity-100" href="#">Link 3</a>You can even change the opacity level on hover by .link-opacity-*-hover.
<a class="link-opacity-10-hover" href="#">Link 1</a>
<a class="link-opacity-75-hover" href="#">Link 2</a>
<a class="link-opacity-100-hover" href="#">Link 3</a>Link underlines
Add a .link-underline to the link element to display underline.
<a href="#" class="link-underline">Underline link</a>Underline color
Change the underline’s color independent of the link text color by .link-underline-{color}.
<a href="#" class="link-underline-primary">Primary underline</a>
<a href="#" class="link-underline-secondary">Secondary underline</a>
<a href="#" class="link-underline-success">Success underline</a>
<a href="#" class="link-underline-danger">Danger underline</a>
<a href="#" class="link-underline-warning">Warning underline</a>
<a href="#" class="link-underline-info">Info underline</a>
<a href="#" class="link-underline-light">Light underline</a>
<a href="#" class="link-underline-dark">Dark underline</a>Underline offset
Change the underline’s distance from your text. Offset is set in em units to automatically scale with the element’s current font-size.
<a class="link-underline" href="#">Default link</a>
<a class="link-underline link-offset-1" href="#">Offset 1 link</a>
<a class="link-underline link-offset-2" href="#">Offset 2 link</a>
<a class="link-underline link-offset-3" href="#">Offset 3 link</a>Underline opacity
| CSS | Desc |
|---|---|
.link-underline-opacity-10 | –bs-link-underline-opacity: .1 |
.link-underline-opacity-25 | –bs-link-underline-opacity: .25 |
.link-underline-opacity-50 | –bs-link-underline-opacity: .5 |
.link-underline-opacity-75 | –bs-link-underline-opacity: .75 |
.link-underline-opacity-100 | –bs-link-underline-opacity: 100 |
<a href="#" class="link-primary link-underline link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a>
<a href="#" class="link-secondary link-underline link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a>Hover variants
ust like the .link-opacity-*-hover utilities, .link-offset and .link-underline-opacity utilities include :hover variants by default. Mix and match to create unique link styles.
<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#">
Underline opacity 0
</a>No underline
Use the text decoration utilities text-decoration-none to remove the underline when mouse hover a link.
<div class="d-flex flex-column">
<a href="#" class="text-decoration-none">This ia a link</a>
</div>