Navigate Links

Link Utilities

Colored links can also be modified by our link utilities.

Link primary

Link secondary

Link success

Link danger

Link warning

Link info

Link light

Link dark

Link emphasis

<p><a class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!">Link primary</a></p>
<p><a class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!">Link secondary</a></p>
<p><a class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!">Link success</a></p>
<p><a class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!">Link danger</a></p>
<p><a class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!">Link warning</a></p>
<p><a class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!">Link info</a></p>
<p><a class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!">Link light</a></p>
<p><a class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#!">Link dark</a></p>
<p><a class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover" href="#!">Link emphasis</a></p>

Link Underlines

Use link-underline-* classes to link underlines. Change the underline's color independent of the link text color.

Primary underline

Secondary underline

Success underline

Danger underline

Warning underline

Info underline

Light underline

Dark underline

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

Border Opacity

Use border-opacity-* (10,25,50,75) class to border opacity links.

This is default primary border
This is 75% opacity primary border
This is 50% opacity primary border
This is 25% opacity primary border
This is 10% opacity primary border
<div class="card-body border-opacity-wrapper">
 <div class="border p-2 mb-xl-3 mb-2 border-primary"><a href="#!">This is default primary border</a></div>
 <div class="border p-2 mb-xl-3 mb-2 border-opacity-75"><a href="#!">This is 75% opacity primary border</a></div>
 <div class="border p-2 mb-xl-3 mb-2 border-opacity-50"><a href="#!">This is 50% opacity primary border</a></div>
 <div class="border p-2 mb-xl-3 mb-2 border-opacity-25"><a href="#!">This is 25% opacity primary border</a></div>
 <div class="border p-2 border-opacity-10"><a href="#!">This is 10% opacity primary border</a></div>
</div>

Background Color Opacity

Use bg-opacity-* (10,25,50,75) class to background opacity links.

This is default success background
This is 75% opacity success background
This is 50% opacity success background
This is 25% opacity success background
This is 10% opacity success background
<div class="card-body bg-opacity-wrapper">
 <div class="bg-primary p-2 mb-3 text-white"><a href="#!">This is default success background</a></div>
 <div class="p-2 mb-3 text-white bg-opacity-75"><a href="#!">This is 75% opacity success background</a></div>
 <div class="p-2 mb-3 text-dark bg-opacity-50"><a href="#!">This is 50% opacity success background</a></div>
 <div class="p-2 mb-3 text-dark bg-opacity-25"><a href="#!">This is 25% opacity success background</a></div>
 <div class="p-2 mb-3 text-dark bg-opacity-10"><a href="#!">This is 10% opacity success background</a></div>
</div>

Common Links

Link utilities are used to stylize your anchors to adjust their link opacity (link-opacity-*), hovered link Opacity (link-opacity-*-hover), underline opacity (link-underline-opacity-*), underline offset (link-offset-*), and more.

Link Opacity

Link opacity 10

Link opacity 25

Link opacity 50

Link opacity 75

Link opacity 100

Hovered Link Opacity

Link hover opacity 10

Link hover opacity 25

Link hover opacity 50

Link hover opacity 75

Link hover opacity 100

Underline Opacity

Underline opacity 0

Underline opacity 10

Underline opacity 25

Underline opacity 50

Underline opacity 75

Underline opacity 100

Underline Offset

Default link

Offset 1 link

Offset 2 link

Offset 3 link

<div class="row g-3">
 <div class="col-sm-6 col-xxl-3">
   <div class="card-wrapper border rounded-3 h-100">
     <h6 class="sub-title fw-bold">Link Opacity</h6>
     <div class="link-opacity-wrapper"> 
       <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>
     </div>
   </div>
 </div>
 <div class="col-sm-6 col-xxl-3">
   <div class="card-wrapper border rounded-3 h-100">
     <h6 class="sub-title fw-bold"> Hovered Link Opacity</h6>
     <div class="link-opacity-wrapper"> 
       <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>
     </div>
   </div>
 </div>
 <div class="col-sm-6 col-xxl-3">
   <div class="card-wrapper border rounded-3 h-100">
     <h6 class="sub-title fw-bold">Underline Opacity</h6>
     <div class="underline-opacity-wrapper">
       <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>
     </div>
   </div>
 </div>
 <div class="col-sm-6 col-xxl-3">
   <div class="card-wrapper border rounded-3 h-100">
     <h6 class="sub-title fw-bold">Underline Offset</h6>
     <div class="underline-opacity-wrapper">
       <p><a href="#!">Default link</a></p>
       <p><a class="link-offset-1" href="#!">Offset 1 link</a></p>
       <p><a class="link-offset-2" href="#!">Offset 2 link</a></p>
       <p><a class="link-offset-3" href="#!">Offset 3 link</a></p>
     </div>
   </div>
 </div>
</div>