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
Light link light
Dark link
<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 light</a>
<a href="#" class="link-dark">Dark link</a>
Bordered
Use .link-bordered to add border-bottom style.
.link-primary.link-bordered
.link-secondary.link-bordered
.link-success.link-bordered
.link-danger.link-bordered
.link-warning.link-bordered
.link-info.link-bordered
.link-light.link-bordered
.link-dark.link-bordered
<a href="#" class="link-primary link-bordered">.link-primary.link-bordered</a>
<a href="#" class="link-secondary link-bordered">.link-secondary.link-bordered</a>
<a href="#" class="link-success link-bordered">.link-success.link-bordered</a>
<a href="#" class="link-danger link-bordered">.link-danger.link-bordered</a>
<a href="#" class="link-warning link-bordered">.link-warning.link-bordered</a>
<a href="#" class="link-info link-bordered">.link-info.link-bordered</a>
<a href="#" class="link-light link-bordered">.link-light.link-bordered</a>
<a href="#" class="link-dark link-bordered">.link-dark.link-bordered</a>
Pointer
Use .link-pointer to add arrow pointer style.
.link-primary.link-pointer
.link-secondary.link-pointer
.link-success.link-pointer
.link-danger.link-pointer
.link-warning.link-pointer
.link-info.link-pointer
.link-light.link-pointer
.link-dark.link-pointer
<a href="#" class="link-primary link-pointer">.link-primary.link-pointer</a>
<a href="#" class="link-secondary link-pointer">.link-secondary.link-pointer</a>
<a href="#" class="link-success link-pointer">.link-success.link-pointer</a>
<a href="#" class="link-danger link-pointer">.link-danger.link-pointer</a>
<a href="#" class="link-warning link-pointer">.link-warning.link-pointer</a>
<a href="#" class="link-info link-pointer">.link-info.link-pointer</a>
<a href="#" class="link-light link-pointer">.link-light.link-pointer</a>
<a href="#" class="link-dark link-pointer">.link-dark.link-pointer</a>
Link classes
Use .link class for bolder text styling
<a href="#" class="link link-primary">Primary link</a>
<a href="#" class="link link-secondary">Secondary link</a>
<a href="#" class="link link-success">Success link</a>
<a href="#" class="link link-danger">Danger link</a>
<a href="#" class="link link-warning">Warning link</a>
<a href="#" class="link link-info">Info link</a>
<a href="#" class="link link-light">Light link</a>
<a href="#" class="link link-dark">Dark link</a>
Size
Use .link-sm for smaller size.
.link-primary.link-sm
.link-secondary.link-sm
.link-success.link-sm
.link-danger.link-sm
.link-warning.link-sm
.link-info.link-sm
.link-light.link-sm
.link-dark.link-sm
<a href="#" class="link-primary link-sm">.link-primary.link-sm</a>
<a href="#" class="link-secondary link-sm">.link-secondary.link-sm</a>
<a href="#" class="link-success link-sm">.link-success.link-sm</a>
<a href="#" class="link-danger link-sm">.link-danger.link-sm</a>
<a href="#" class="link-warning link-sm">.link-warning.link-sm</a>
<a href="#" class="link-info link-sm">.link-info.link-sm</a>
<a href="#" class="link-light link-sm">.link-light.link-sm</a>
<a href="#" class="link-dark link-sm">.link-dark.link-sm</a>