Bootstrap 5 Link

Link Style Classes

Here is the list of Link Style Classes, including a range of powerful and versatile classes that allow developers to customize link elements easily. These link utility classes cover various aspects such as link opacity, underline offset, and color schemes, providing ample flexibility to enhance the visual appeal and interactivity of links within web applications.

Link Opacity Classes

Bootstrap provides link opacity classes that allow you to control the transparency of links. These classes are useful when you want to visually differentiate links with varying opacity levels. Additionally, there are hover classes to apply different opacity values on link hover. The classes use the format link-opacity-{percentage} and link-opacity-{percentage}-hover. Replace {percentage} with the desired opacity percentage (e.g., 10, 25, 50, 75, 100). Here are the classes for link opacity and hover effects.

Using these classes allows you to easily control link opacity and create hover effects, resulting in a visually appealing website without the need for custom CSS.

To use these classes, you can apply them to anchor tags (<a>) in your HTML markup. For example:

<ul class="list-unstyled">
    <li><a href="#" class="link-opacity-10">Link 1 (10% Opacity)</a></li>
    <li><a href="#" class="link-opacity-25">Link 2 (25% Opacity)</a></li>
    <li><a href="#" class="link-opacity-50">Link 3 (50% Opacity)</a></li>
    <li><a href="#" class="link-opacity-75">Link 4 (75% Opacity)</a></li>
    <li><a href="#" class="link-opacity-100">Link 5 (100% Opacity)</a></li>
      <li><div class="my-4">Try hovering over the links to see the hover effects.</div></li>
    <li><a href="#" class="link-opacity-10-hover">Link 6 (10% Opacity on hover)</a></li>
    <li><a href="#" class="link-opacity-25-hover">Link 7 (25% Opacity on hover)</a></li>
    <li><a href="#" class="link-opacity-50-hover">Link 8 (50% Opacity on hover)</a></li>
    <li><a href="#" class="link-opacity-75-hover">Link 9 (75% Opacity on hover)</a></li>
    <li><a href="#" class="link-opacity-100-hover">Link 10 (100% Opacity on hover)</a></li>
</ul>

In this example, you can see how to apply the link opacity classes and the corresponding hover classes to create different opacity levels and hover effects for the links. These classes allow for easy customization of link styles.

By utilizing these Link Opacity Classes, you can experiment with different opacity levels and hover effects to enhance the visual appeal of your website's navigation or any other link elements.

Underline Offset

The link underline offset classes allow you to change the position of the link underline. This feature can be utilized to create unique link styling and visual effects.

The classes follow the format .link-offset-{value} and .link-offset-{value}-hover. The {value} represents a numeric value that indicates the amount of offset applied to the underline.

The .link-offset-{value}-hover class allows developers to define a different underline offset value for the link when it's in the hover state. As the name suggests, this class takes effect when the user hovers over the link element, creating an interactive and dynamic effect.

Here's the table with the Underline Offset classes and their respective underline offsets:

These classes allow you to easily apply different underline offsets to your link text, providing various decorative effects for your website's links. Please note that the Underline Offset classes are set in em units to automatically scale with the element's current font-size. This allows for more consistent and responsive underline offset adjustments based on the font size of the link text.

<a href="#">Default link</a>
<a class="link-offset-1" href="#">Offset 1 link</a>
<a class="link-offset-2" href="#">Offset 2 link</a>
<a class="link-offset-3" href="#">Offset 3 link</a>

Underline Color

Bootstrap 5 provides a set of predefined underline color classes that you can apply to your HTML links. Each class corresponds to a specific color, allowing you to match the link underlined with your website's overall theme or branding. The following are the available classes:

Using these classes, web developers can easily customize the appearance of link underlines to suit their design requirements and enhance the user experience on their websites.

Applying the Link Underline Color Classes

To use these link underline color classes in your project, all you need to do is apply the desired class to the anchor (<a>) tags. Here's an example:

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

Link underline color classes provide an easy and efficient way to add visual appeal to your hyperlinks. By applying these classes to your anchor tags, you can change the underline color to match your website's design language or highlight specific links.

Underline Opacity

Similar to the link opacity classes, you can also control the opacity of the link underline using the underline opacity classes. These classes follow the format .link-underline-opacity-{value} and .link-underline-opacity-{value}-hover. Here are the underline opacity classes and their respective underline opacity values:

These classes allow you to apply different underline opacity values to your link text, providing various levels of visibility for the underline. Using these classes, you can create links with subtle or more pronounced underlines, depending on your design requirements and desired visual effects.

Implementing Underline Opacity

To modify the opacity of the underline, you should first apply the .link-underline class. This class sets the color for the underline using the rgba() function, which allows you to specify an alpha opacity value. The alpha opacity value determines the transparency of the underline. By adjusting this value, you can effectively control how visible or transparent the underline appears on the link.

For example: To apply the Underline Opacity classes to your links, simply include the appropriate class within the class attribute of the anchor tag as shown below:

<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 class="my-4">Try hovering over the links to see the hover effects.</div>
<p><a class="link-offset-2 link-underline link-underline-opacity-0-hover" href="#">Underline opacity 0</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-10-hover" href="#">Underline opacity 10</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-25-hover" href="#">Underline opacity 25</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-50-hover" href="#">Underline opacity 50</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-75-hover" href="#">Underline opacity 75</a></p>
<p><a class="link-offset-2 link-underline link-underline-opacity-100-hover" href="#">Underline opacity 100</a></p>

Underline Opacity classes offer a delightful way to enhance link decorations and elevate the overall user experience. With various opacity options, web developers can achieve unique and engaging link styles that complement their website's design language.

Underline Hover variants

The hover variants in Framework, such as .link-opacity-*-hover, .link-offset, and .link-underline-opacity, automatically apply when users hover over links. These variants offer flexibility in customizing link styles. By combining and experimenting with these utilities, developers can craft distinct and eye-catching link effects, adding interactivity and uniqueness to their websites. For example:

<a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" href="#">
  Underline opacity 0
</a>

Conclusion

Bootstrap 5 provides a variety of link utility classes that allow you to customize link styles in your web projects. Whether you want to adjust link opacity, change the underline offset, modify underline colors, or control the underline opacity. These utility classes make it easy to create visually appealing and interactive links without the need for custom CSS.