### Colored links

Colored links with hover states

Colored links on Bootstrap

##### Example

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 Dark link Emphasis link

    <a class="link-primary d-block" href="#!">Primary link</a>
    <a class="link-secondary d-block" href="#!">Secondary link</a>
    <a class="link-success d-block" href="#!">Success link</a>
    <a class="link-danger d-block" href="#!">Danger link</a>
    <a class="link-warning d-block" href="#!">Warning link</a>
    <a class="link-info d-block" href="#!">Info link</a>
    <a class="link-light d-block" href="#!">Light link</a>
    <a class="link-dark d-block" href="#!">Dark link</a>
    <a class="link-body-emphasis d-block" href="#!">Emphasis link</a>

##### Grays

Link 1100 Link 1000 Link 900 Link 800 Link 700 Link 600 Link 500 Link 400 Link 300 Link 200 Link 100

    <a class="d-block link-1100" href="#!">Link 1100</a>
    <a class="d-block link-1000" href="#!">Link 1000</a>
    <a class="d-block link-900" href="#!">Link 900</a>
    <a class="d-block link-800" href="#!">Link 800</a>
    <a class="d-block link-700" href="#!">Link 700</a>
    <a class="d-block link-600" href="#!">Link 600</a>
    <a class="d-block link-500" href="#!">Link 500</a>
    <a class="d-block link-400" href="#!">Link 400</a>
    <a class="d-block link-300" href="#!">Link 300</a>
    <a class="d-block link-200" href="#!">Link 200</a>
    <a class="d-block link-100" href="#!">Link 100</a>

##### Link utilities

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

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

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### Settings

Set your own customized style

##### Color Scheme

Choose the perfect color mode for your app.

##### RTL Mode

Switch your language direction

RTL Documentation

##### Fluid Layout

Toggle container layout system

Fluid Documentation

##### Navigation Position

Select a suitable navigation system for your web application

##### Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

##### Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize