bootstrap
  1. bootstrap-link-opacity
PreviousNext

Bootstrap Link Opacity

In Bootstrap, you can easily adjust the opacity of links by adding a utility class. This can be useful to make links more or less prominent on a webpage.

Syntax

To adjust the opacity of a link, you can add the following classes to the link element:

  • text-muted: this sets the link to a muted gray color with lower opacity.
  • text-primary: this sets the link to the primary color with full opacity.
  • text-secondary: this sets the link to a secondary color with full opacity.
  • text-success: this sets the link to a success color with full opacity.
  • text-danger: this sets the link to a danger color with full opacity.
  • text-warning: this sets the link to a warning color with full opacity.
  • text-info: this sets the link to an info color with full opacity.
  • text-light: this sets the link to a light color with full opacity.
  • text-dark: this sets the link to a dark color with full opacity.

Example

Here is an example of how to adjust the opacity of links using Bootstrap classes.

<a href="#" class="text-muted">Muted Link</a>
<a href="#" class="text-primary">Primary Link</a>
<a href="#" class="text-secondary">Secondary Link</a>
<a href="#" class="text-success">Success Link</a>
<a href="#" class="text-danger">Danger Link</a>
<a href="#" class="text-warning">Warning Link</a>
<a href="#" class="text-info">Info Link</a>
<a href="#" class="text-light bg-dark">Light Link on Dark Background</a>
<a href="#" class="text-dark bg-light">Dark Link on Light Background</a>
Try Playground

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.

<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>
Try Playground

Explanation

In the code above, we used the Bootstrap link classes to adjust the opacity and color of links. The text-muted class sets the link to a muted gray color with lower opacity, while the text-primary, text-secondary, text-success, text-danger, text-warning, and text-info classes set the link to different colors with full opacity. The text-light and text-dark classes set the link to a light and dark color respectively with full opacity.

Use

Adjusting the opacity of links can help indicate the importance or prominence of links on a webpage. For instance, muted links may be used for less significant actions, while primary links may be used for more important actions.

Important Points

  • Bootstrap provides a set of utility classes that can be used to adjust the opacity and color of links.
  • The text-muted class sets links to a muted gray color with lower opacity, while other classes set links to different colors with full opacity.
  • Adjusting the opacity of links can help indicate the prominence of links on a webpage.

Summary

By using Bootstrap's utility classes, you can easily adjust the opacity and color of links on a webpage. This can help indicate the importance or significance of links and improve the user experience for your website visitors.

FlexOpacity
Published on: