How to Style Links in Bootstrap

Link utilities are used to style your anchors to adjust their color, opacity, underline offset, underline color, and more.

1. Colored Links

Unlike the .text-* classes, these classes have a :hover and :focus state. For example,

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

Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.

2. Link Opacity

You can change the alpha opacity of the link rgba() color value with utilities. However, changes to a color's opacity can lead to links with insufficient contrast.

For example,

<p><a class="link-opacity-10" href="#">Link opacity 10</a></p>
<p><a class="link-opacity-25" href="#">Link opacity 25</a></p>
<p><a class="link-opacity-50" href="#">Link opacity 50</a></p>
<p><a class="link-opacity-75" href="#">Link opacity 75</a></p>
<p><a class="link-opacity-100" href="#">Link opacity 100</a></p>

3. Link Hover Opacity

You can also change the opacity level on hover. For example,

<p><a class="link-opacity-10-hover" href="#">Link hover opacity 10</a></p>
<p><a class="link-opacity-25-hover" href="#">Link hover opacity 25</a></p>
<p><a class="link-opacity-50-hover" href="#">Link hover opacity 50</a></p>
<p><a class="link-opacity-75-hover" href="#">Link hover opacity 75</a></p>
<p><a class="link-opacity-100-hover" href="#">Link hover opacity 100</a></p>