Bootstrap Link Colors

Bootstrap 5 offers several utility classes for styling link colors. These classes come with the added benefit of having :hover and :focus states. The default link color is typically a shade of blue. However, you can use additional classes to customize the link colors. Here are some of the most commonly used link color classes you can use to change the link colors:

By utilizing these classes, you can easily customize link colors to match your website's design and create a visually appealing and engaging user experience. Additionally, these classes have built-in hover and focus states for improved interactivity, making it convenient to implement functional link styles. To utilize these link color classes, apply them to anchor (<a>) tags as shown below:

<div class="d-grid gap-2">
<a href="#" class="link-primary">Primary Link</a>
<a href="#" class="link-secondary">Secondary Link</a>
<a href="#" class="link-success">Success Link</a>
<a href="#" class="link-danger">Danger Link</a>
<a href="#" class="link-warning">Warning Link</a>
<a href="#" class="link-info">Info Link</a>
<a href="#" class="link-light">Light Link</a>
<a href="#" class="link-dark">Dark Link</a>
<a href="#" class="link-body-emphasis">Body Emphasis Link</a>
</div>

These classes will style the links with the respective colors. By default, these link colors are applied to anchor <a> tags, but you can also apply them to other elements as needed. Remember to ensure proper contrast and readability when selecting link colors, especially when using lighter foreground colors on a lighter background or vice versa.

Link Utilities

The Link utilities are classes that you can apply to HTML elements to style and customize the appearance of links. These utilities make it easy to adjust the link's color, underline, and other visual properties without writing custom CSS.

<div class="d-grid gap-2">
<a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Primary link</a>
<a href="#" class="link-secondary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Secondary link</a>
<a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Success link</a>
<a href="#" class="link-danger link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Danger link</a>
<a href="#" class="link-warning link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Warning link</a>
<a href="#" class="link-info link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Info link</a>
<a href="#" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Light link</a>
<a href="#" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Dark link</a>
<a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a>
</div>

Link Color Variables

Bootstrap 5 provides a variety of built-in link colors, but sometimes it may be necessary to customize them to align with your website's branding. In this regard, it allows developers to set custom link colors using CSS variables (also known as CSS custom properties). With these variables, you can easily redefine the default link color and its hover state, ensuring consistent and visually appealing user experiences. The link color variables are as follows:

• --bs-link-color: This variable represents the default color of links. In this case, it is set to the color #0d6efd, which is a shade of blue.
• --bs-link-color-rgb: This variable contains the RGB values (Red, Green, Blue) equivalent of the --bs-link-color. it is set to 13, 110, 253, representing the RGB values for the same shade of blue as above.
• --bs-link-hover-color: This variable represents the color of links when they are in a hovered state. In this case, it is set to the color #0a58ca, which is a slightly darker shade of blue compared to the default link color.
• --bs-link-hover-color-rgb: Similar to --bs-link-color-rgb, this variable contains the RGB values for the --bs-link-hover-color. it is set to 10, 88, 202, representing the RGB values for the slightly darker shade of blue.

By utilizing these link color variables, you can effortlessly customize the default link color and hover color in your web application.

Example

To define the default link color and its hover state using CSS variable, you would create CSS rules inside the :root selector that specify the desired colors for the links. The :root selector sets the scope for these variables, making them available throughout your entire CSS file. Here's how you can define default link color variables:

:root {
  --bs-link-color: #6ea8fe;
  --bs-link-hover-color: #9ec5fe;
  --bs-link-color-rgb: 110, 168, 254;
  --bs-link-hover-color-rgb: 158, 197, 254;
}

These variables allow you to customize the default link color and hover color in your application. You can apply these variables to your CSS rules for links to achieve the desired styling. For example, to apply the link colors to anchor tags, you can do the following in your CSS:

a {
  color: var(--bs-link-color); /* Sets the default link color to the provided value */
}

a:hover {
  color: var(--bs-link-hover-color); /* Changes the link color on hover to the provided value */
}

var() function allows you to reference the CSS variables and apply the appropriate colors to your links. By using these variables, you can easily modify the link colors throughout your project to match your desired design scheme.

Remember to place the custom CSS with the variable overrides after the Bootstrap CSS file to ensure that your customizations take effect. Also, you can modify these variables to different colors if you wish to customize the link colors further.

Controlling Link Color Opacity

Bootstrap 5 introduces the --bs-link-opacity CSS variable, providing a convenient way to adjust the opacity of link elements. This feature allows developers to customize the transparency of links to match their design requirements.

Example

You can use inline styles to apply the --bs-link-opacity variable. Here's an example of setting the link opacity to 70% (0.7) using an inline style:

<a href="#" class="link-success" style="--bs-link-opacity:0.7;">Success Link</a>

In addition to that, Bootstrap 5 introduces the --bs-link-underline-opacity variable, offering precise control over the opacity of link underlines. Here's an example of setting the link underline opacity to 50% (0.5) using inline style:

<a href="#" class="link-success" style="--bs-link-underline-opacity: 0.5; text-decoration: underline;">Custom Underline Opacity Link</a>

In this example, we use the style attribute within the <a> tag to apply custom styles. By setting the --bs-link-underline-opacity variable to 0.5, we control the transparency of the link underline, resulting in a custom underline opacity.

Remember that inline CSS is generally not recommended for larger projects or extensive styling due to its lack of reusability and maintainability. For more organized styling, it is preferable to use external CSS files or custom classes defined in the head section of your HTML file. Inline CSS is best suited for quick prototyping or isolated cases where minimal styling is required.