Colored links

Colored links with hover states

You can use the .link-* classes to colorize links. Unlike the .text-* classes, these classes have a :hover and :focus state.

Design

Code

Primary link Secondary link Success link Danger link Warning link Info link Light link Dark link

<div className="d-flex flex-column">
    <Link href="" className="link-primary">Primary link</Link>
    <Link href="" className="link-secondary">Secondary link</Link>
    <Link href="" className="link-success">Success link</Link>
    <Link href="" className="link-danger">Danger link</Link>
    <Link href="" className="link-warning">Warning link</Link>
    <Link href="" className="link-info">Info link</Link>
    <Link href="" className="link-light">Light link</Link>
    <Link href="" className="link-dark">Dark link</Link>
</div>