Example
You can use the .link-*
classes to colorize links. Unlike the .text-*
classes, these classes have a :hover
and :focus
state.
<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>
Grays
Link black
Link 1100
Link 1000
Link 900
Link 800
Link 700
Link 600
Link 500
Link 400
Link 300
Link 200
Link 100
Link white
<a class="d-block link-black" href="#!">Link black</a>
<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>
<a class="d-block link-white" href="#!">Link white</a>