# Colored Linked

Change the alpha opacity of the link rgba() color value with utilities.

## Link opacity

Link opacity 10

Link opacity 25

Link opacity 50

Link opacity 75

Link opacity 100

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

You can even change the opacity level on hover.

## Link opacity

Link hover opacity 10

Link hover opacity 25

Link hover opacity 50

Link hover opacity 75

Link hover opacity 100

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

## Underline color

Primary underline

Secondary underline

Success underline

Danger underline

Warning underline

Info underline

Light underline

Dark underline

    <p><a href="#" class="link-underline-primary">Primary underline</a></p>
    <p><a href="#" class="link-underline-secondary">Secondary underline</a></p>
    <p><a href="#" class="link-underline-success">Success underline</a></p>
    <p><a href="#" class="link-underline-danger">Danger underline</a></p>
    <p><a href="#" class="link-underline-warning">Warning underline</a></p>
    <p><a href="#" class="link-underline-info">Info underline</a></p>
    <p><a href="#" class="link-underline-light">Light underline</a></p>
    <p><a href="#" class="link-underline-dark">Dark underline</a></p>

## Underline opacity

Underline opacity 0

Underline opacity 10

Underline opacity 25

Underline opacity 50

Underline opacity 75

Underline opacity 100

    <p><a class="link-offset-2 link-underline link-underline-opacity-0"
    href="#">Underline opacity 0</a></p>
    <p><a class="link-offset-2 link-underline link-underline-opacity-10"
            href="#">Underline opacity 10</a></p>
    <p><a class="link-offset-2 link-underline link-underline-opacity-25"
            href="#">Underline opacity 25</a></p>
    <p><a class="link-offset-2 link-underline link-underline-opacity-50"
            href="#">Underline opacity 50</a></p>
    <p><a class="link-offset-2 link-underline link-underline-opacity-75"
            href="#">Underline opacity 75</a></p>
    <p><a class="link-offset-2 link-underline link-underline-opacity-100"
            href="#">Underline opacity 100</a></p>

## Colored links

Primary link

Secondary link

Success link

Danger link

Warning link

Info link

Light link

Dark link

Emphasis link

    <p><a href="#"
    class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primary
            link</a></p>
    <p><a href="#"
            class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary
            link</a></p>
    <p><a href="#"
            class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success
            link</a></p>
    <p><a href="#"
            class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Danger
            link</a></p>
    <p><a href="#"
            class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning
            link</a></p>
    <p><a href="#"
            class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Info
            link</a></p>
    <p><a href="#"
            class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light
            link</a></p>
    <p><a href="#"
            class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Dark
            link</a></p>
    <p><a href="#"
            class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis
            link</a></p>