Link
Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more.
Colored links
| Class name | Preview |
|---|---|
.link-primary |
|
.link-secondary |
|
.link-success |
|
.link-info |
|
.link-warning |
|
.link-danger |
|
.link-light |
|
.link-dark |
|
.link-body-emphasis |
Underline Color
| Class name | Preview |
|---|---|
.link-underline-primary |
Primary underline |
.link-underline-secondary |
Secondary underline |
.link-underline-success |
Success underline |
.link-underline-info |
Info underline |
.link-underline-warning |
Warning underline |
.link-underline-danger |
Danger underline |
.link-underline-light |
Light underline |
.link-underline-dark |
Dark underline |
Underline Offset
| Class name | Preview |
|---|---|
.link-offset-1 |
|
.link-offset-2 |
|
.link-offset-3 |
Underline Styles
| Class name | Preview |
|---|---|
.link-underline |
|
.link-underline-dashed |
|
.link-underline-dotted |
|
.link-underline-double |
|
.link-underline-wavy |
|
.link-underline-overline |
Link Opacity
Avalable Classes
.link-opacity-100 |
.link-opacity-90 |
|---|---|
.link-opacity-80 |
.link-opacity-75 |
.link-opacity-70 |
.link-opacity-60 |
.link-opacity-50 |
.link-opacity-40 |
.link-opacity-30 |
.link-opacity-25 |
.link-opacity-20 |
.link-opacity-10 |
Link Hover Opacity
Preview
Avalable Classes
.link-opacity-100-hover |
.link-opacity-90-hover |
|---|---|
.link-opacity-80-hover |
.link-opacity-75-hover |
.link-opacity-70-hover |
.link-opacity-60-hover |
.link-opacity-50-hover |
.link-opacity-40-hover |
.link-opacity-30-hover |
.link-opacity-25-hover |
.link-opacity-20-hover |
.link-opacity-10-hover |
Underline Opacity
Preview
Avalable Classes
.link-underline-opacity-100 |
.link-underline-opacity-75 |
|---|---|
.link-underline-opacity-50 |
.link-underline-opacity-25 |
.link-underline-opacity-10 |
.link-underline-opacity-0 |
Hover Variants
| Class name | Preview |
|---|---|
.link-underline-hover
|
Link underline |
.link-underline-dashed-hover
|
Dashed underline |
.link-underline-dotted-hover
|
Dotted underline |
.link-underline-double-hover
|
Double underline |
.link-underline-wavy-hover
|
Wavy underline |
.link-underline-overline-hover
|
Overline underline |
.link-offset-3-hover.link-underline.link-underline-opacity-0.link-underline-opacity-75-hover
|
Underline opacity 0 |
Stretched link
Card with stretched link
The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.
Go somewhereCards have position: relative by default in Bootstrap, so you can add the .stretched-link class to a link in the card.
Custom component with stretched link
A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.
Go somewhereAdd the .position-relative to the parent element to prevent the link from stretching outside.
