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>
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>
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>