Example
You can use the .link-* classes to colorize links. Unlike the .text-* classes, these classes have a :hover and :focus state.
Primary link
Secondary link
Success link
Danger link
Warning link
Info link
Light link
Dark link
Emphasis link
<a class="link-primary d-block" href="#!">Primary link</a>
<a class="link-secondary d-block" href="#!">Secondary link</a>
<a class="link-success d-block" href="#!">Success link</a>
<a class="link-danger d-block" href="#!">Danger link</a>
<a class="link-warning d-block" href="#!">Warning link</a>
<a class="link-info d-block" href="#!">Info link</a>
<a class="link-light d-block" href="#!">Light link</a>
<a class="link-dark d-block" href="#!">Dark link</a>
<a class="link-body-emphasis d-block" href="#!">Emphasis link</a>Grays
Link 1100
Link 1000
Link 900
Link 800
Link 700
Link 600
Link 500
Link 400
Link 300
Link 200
Link 100
<a class="d-block link-1100" href="#!">Link 1100</a>
<a class="d-block link-1000" href="#!">Link 1000</a>
<a class="d-block link-900" href="#!">Link 900</a>
<a class="d-block link-800" href="#!">Link 800</a>
<a class="d-block link-700" href="#!">Link 700</a>
<a class="d-block link-600" href="#!">Link 600</a>
<a class="d-block link-500" href="#!">Link 500</a>
<a class="d-block link-400" href="#!">Link 400</a>
<a class="d-block link-300" href="#!">Link 300</a>
<a class="d-block link-200" href="#!">Link 200</a>
<a class="d-block link-100" href="#!">Link 100</a>Link utilities
Primary link
Secondary link
Success link
Danger link
Warning link
Info link
Light link
Dark link
Emphasis link
<a class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover d-block" href="#!">Primary link</a>
<a class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover d-block" href="#!">Secondary link</a>
<a class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover d-block" href="#!">Success link</a>
<a class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover d-block" href="#!">Danger link</a>
<a class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover d-block" href="#!">Warning link</a>
<a class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover d-block" href="#!">Info link</a>
<a class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover d-block" href="#!">Light link</a>
<a class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover d-block" href="#!">Dark link</a>
<a class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover d-block" href="#!">Emphasis link</a>
