##### 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.

Link opacity 10 Link opacity 25 Link opacity 50 Link opacity 75 Link opacity 100

    <a class="link-opacity-10" href="javascript:void(0)">Link opacity 10</a>
    <a class="link-opacity-25" href="javascript:void(0)">Link opacity 25</a>
    <a class="link-opacity-50" href="javascript:void(0)">Link opacity 50</a>
    <a class="link-opacity-75" href="javascript:void(0)">Link opacity 75</a>
    <a class="link-opacity-100" href="javascript:void(0)">Link opacity 100</a>

##### Link Hover Opacity

Use `.link-opacity-*-hover` to adjust link hover opacity in Bootstrap, making links more transparent on hover.

Link hover opacity 10 Link hover opacity 25 Link hover opacity 50 Link hover opacity 75 Link hover opacity 100

    <a class="link-opacity-10-hover" href="javascript:void(0)">Link hover opacity 10</a>
    <a class="link-opacity-25-hover" href="javascript:void(0)">Link hover opacity 25</a>
    <a class="link-opacity-50-hover" href="javascript:void(0)">Link hover opacity 50</a>
    <a class="link-opacity-75-hover" href="javascript:void(0)">Link hover opacity 75</a>
    <a class="link-opacity-100-hover" href="javascript:void(0)">Link hover opacity 100</a>

##### Link hover variants

Just like the `.link-opacity-*-hover` utilities, `.link-offset` and `.link-underline-opacity` utilities include `:hover` variants by default. Mix and match to create unique link styles.

Underline opacity 0

    <a class="text-decoration-underline link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="javascript:void(0)">
        Underline opacity 0
    </a>

##### 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.

Underline opacity 0 Underline opacity 10 Underline opacity 25 Underline opacity 50 Underline opacity 75 Underline opacity 100

    <a href="javascript:void(0)" class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-0">Underline opacity 0</a>
    <a href="javascript:void(0)" class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-10">Underline opacity 10</a>
    <a href="javascript:void(0)" class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-25">Underline opacity 25</a>
    <a href="javascript:void(0)" class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-50">Underline opacity 50</a>
    <a href="javascript:void(0)" class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-75">Underline opacity 75</a>
    <a href="javascript:void(0)" class="link-offset-2 text-decoration-underline link-underline link-underline-opacity-100">Underline opacity 100</a>

##### 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`.

Default link Offset 1 link Offset 2 link Offset 3 link

    <a href="javascript:void(0)">Default link</a>
    <a class="text-decoration-underline link-offset-1" href="javascript:void(0)">Offset 1 link</a>
    <a class="text-decoration-underline link-offset-1" href="javascript:void(0)">Offset 2 link</a>
    <a class="text-decoration-underline link-offset-1" href="javascript:void(0)">Offset 3 link</a>

##### Pointer Event

This link can not be clicked.

This link can be clicked (this is default behavior).

This link can not be clicked because the `pointer-events` property is inherited from its parent. However, this link has a `pe-auto` class and can be clicked.

    <p><a href="javascript:void(0)" class="pe-none text-primary fw-medium text-decoration-underline" tabindex="-1">This link</a> can not be clicked.</p>
    <p><a href="javascript:void(0)" class="pe-auto text-primary fw-medium text-decoration-underline">This link</a> can be clicked (this is default behavior).</p>
    <p class="pe-none mb-0"><a href="javascript:void(0)" tabindex="-1" class="text-primary fw-medium text-decoration-underline">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="javascript:void(0)" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>

##### Underline color

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

    <a href="javascript:void(0)" class="text-decoration-underline link-underline-primary">Primary underline</a>
    <a href="javascript:void(0)" class="text-decoration-underline link-underline-secondary">Secondary underline</a>
    <a href="javascript:void(0)" class="text-decoration-underline link-underline-success">Success underline</a>
    <a href="javascript:void(0)" class="text-decoration-underline link-underline-danger">Danger underline</a>
    <a href="javascript:void(0)" class="text-decoration-underline link-underline-warning">Warning underline</a>
    <a href="javascript:void(0)" class="text-decoration-underline link-underline-info">Info underline</a>
    <a href="javascript:void(0)" class="text-decoration-underline link-underline-light">Light underline</a>
    <a href="javascript:void(0)" class="text-decoration-underline link-underline-dark">Dark underline</a>

##### Link colors

Use the `.link-*` classes to style links with color, including `:hover` and `:focus` states. Some colors are lighter and work best on dark backgrounds for better contrast.

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

    <a href="javascript:void(0)" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a>
    <a href="javascript:void(0)" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a>
    <a href="javascript:void(0)" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success link</a>
    <a href="javascript:void(0)" class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Danger link</a>
    <a href="javascript:void(0)" class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning link</a>
    <a href="javascript:void(0)" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Info link</a>
    <a href="javascript:void(0)" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a>
    <a href="javascript:void(0)" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Dark link</a>
    <a href="javascript:void(0)" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a>

##### Link utilities

Link styling has been enhanced with new utilities. You can now adjust link opacity, underline opacity, and underline offset using these updated helpers.

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

    <a href="javascript:void(0)" class="link-primary link-offset-2 text-decoration-underline link-underline-opacity-25-hover">Primary link</a>
    <a href="javascript:void(0)" class="link-secondary link-offset-2 text-decoration-underline link-underline-opacity-100-hover">Secondary link</a>
    <a href="javascript:void(0)" class="link-success link-offset-2 text-decoration-underline link-underline-opacity-75-hover">Success link</a>
    <a href="javascript:void(0)" class="link-danger link-offset-2 text-decoration-underline link-underline-opacity-50-hover">Danger link</a>
    <a href="javascript:void(0)" class="link-warning link-offset-2 text-decoration-underline link-underline-opacity-100-hover">Warning link</a>
    <a href="javascript:void(0)" class="link-info link-offset-2 text-decoration-underline link-underline-opacity-100-hover">Info link</a>
    <a href="javascript:void(0)" class="link-light link-offset-2 text-decoration-underline link-underline-opacity-75-hover">Light link</a>
    <a href="javascript:void(0)" class="link-dark link-offset-2 text-decoration-underline link-underline-opacity-100-hover">Dark link</a>
    <a href="javascript:void(0)" class="link-body-emphasis link-offset-2 text-decoration-underline link-underline-opacity-25-hover">Emphasis link</a>

Theme Customization

###### Layout:

##### Vertical

##### Horizontal

##### Semi Box

###### Content Width:

##### Default

##### Box

###### Layout Direction:

##### LTR

##### RTL

###### Layout Mode:

##### Light

##### Dark

##### System

###### Sidebar Size:

##### Default

##### Medium

##### Icon

##### Icon hover

###### Sidebar Color:

##### Light

##### Dark