Colored Links

  1. Bootstrap UI
  2. Colored Links
Customizer
Judia Builder

Choose your themes & layouts etc.

Select Layouts

Choose your layout.

Vertical
Horizontal
Color Scheme

Choose Light or Dark Scheme.

Light
Dark
Brand
Card Layout

Choose borderless or border layout.

Borderless
Border
Layout Width

Choose Fluid or Boxed layout.

Fluid
Boxed
Layout Position

Choose Fixed or Scrollable Layout Position.

Topbar Color

Choose Light, Dark or Brand Topbar Color.

Light
Dark
Brand
Topbar Images

Choose Topbar Images.

Preloader

Choose a preloader.

Enable
Disable
Buy Now

Link colors

You can use the .link-* classes to colorize links. Unlike the .text-* classes, these classes have a :hover and :focus state. Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.

HTML Preview
<p><a href="#" class="link-primary">Primary link</a></p>

<p><a href="#" class="link-secondary">Secondary link</a></p>

<p><a href="#" class="link-success">Success link</a></p>

<p><a href="#" class="link-danger">Danger link</a></p>

<p><a href="#" class="link-warning">Warning link</a></p>

<p><a href="#" class="link-info">Info link</a></p>

<p><a href="#" class="link-light">Light link</a></p>

<p><a href="#" class="link-dark">Dark link</a></p>

<p><a href="#" class="link-body-emphasis mb-0">Emphasis link</a></p>

Link utilities

Colored links can also be modified by our link utilities.

HTML Preview
<p><a href="#" class="link-primary link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a></p>

<p><a href="#" class="link-secondary link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a></p>

<p><a href="#" class="link-success link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Success link</a></p>

<p><a href="#" class="link-danger link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Danger link</a></p>

<p><a href="#" class="link-warning link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Warning link</a></p>

<p><a href="#" class="link-info link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Info link</a></p>

<p><a href="#" class="link-light link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a></p>

<p><a href="#" class="link-dark link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-100-hover">Dark link</a></p>

<p><a href="#" class="link-body-emphasis link-offset-2 text-decoration-underline link-underline-opacity-25 link-underline-opacity-75-hover mb-0">Emphasis link</a></p>

Link Opacity

Change the alpha opacity of the link rgba() color value with utilities. Please be aware that changes to a color’s opacity can lead to links with insufficient contrast.

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

Link Opacity Hover

You can even change the opacity level on hover.

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

Change the underline’s color independent of the link text color.

HTML Preview
<p><a href="#" class="text-decoration-underline link-underline-primary">Primary underline</a></p>

<p><a href="#" class="text-decoration-underline link-underline-secondary">Secondary underline</a></p>

<p><a href="#" class="text-decoration-underline link-underline-success">Success underline</a></p>

<p><a href="#" class="text-decoration-underline link-underline-danger">Danger underline</a></p>

<p><a href="#" class="text-decoration-underline link-underline-warning">Warning underline</a></p>

<p><a href="#" class="text-decoration-underline link-underline-info">Info underline</a></p>

<p><a href="#" class="text-decoration-underline link-underline-light">Light underline</a></p>

<p class="mb-0"><a href="#" class="text-decoration-underline link-underline-dark">Dark underline</a></p>

Underline opacity

Change the underline’s opacity. Requires adding .link-underline to first set an rgba() color we use to then modify the alpha opacity.

HTML Preview
<p><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-0" href="#">Underline opacity 0</a></p>
    
<p><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-10" href="#">Underline opacity 10</a></p>

<p><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-25" href="#">Underline opacity 25</a></p>

<p><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-50" href="#">Underline opacity 50</a></p>

<p><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-75" href="#">Underline opacity 75</a></p>

<p class="mb-0"><a class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-100" href="#">Underline opacity 100</a></p>

Underline offset

Change the underline’s distance from your text. Offset is set in em units to automatically scale with the element’s current font-size.

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

Icon link

Take a regular <a> element, add .icon-link, and insert an icon on either the left or right of your link text. The icon is automatically sized, placed, and colored.

HTML Preview
<a class="icon-link" href="#">
    <i class="bi bi-box-seam align-baseline"></i> Icon link
</a>

<a class="icon-link" href="#">
    Icon link <i class="bi bi-arrow-right"></i>
</a>

<a class="icon-link icon-link-hover" href="#">
    Icon link <i class="bi bi-arrow-right"></i>
</a>

<a class="icon-link icon-link-hover" style="--tb-icon-link-transform: translate3d(0, -.125rem, 0);" href="#">
    <i class="bi bi-clipboard"></i> Icon link
</a>

<a class="icon-link icon-link-hover" style="--tb-link-hover-color-rgb: var(--tb-success-rgb);" href="#">
    Icon link <i class="bi bi-arrow-right"></i>
</a>

<a class="icon-link icon-link-hover link-success text-decoration-underline link-underline-success link-underline-opacity-25" href="#">
    Icon link <i class="bi bi-arrow-right"></i>
</a>
© Judia.
Design & Develop by Themesbrand