FM / utilities

/var/www/vhosts/ihelp.ro/httpdocs/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/

/var/www/vhosts/ihelp.ro/httpdocs/vendor/twbs/bootstrap/site/content/docs/5.3/utilities

Name	Size	Mode	Actions
api.md	17135	0644	edit dl rm
background.md	6460	0644	edit dl rm
borders.md	7727	0644	edit dl rm
colors.md	5958	0644	edit dl rm
display.md	4420	0644	edit dl rm
flex.md	22160	0644	edit dl rm
float.md	1770	0644	edit dl rm
interactions.md	2264	0644	edit dl rm
link.md	4506	0644	edit dl rm
object-fit.md	3690	0644	edit dl rm
opacity.md	1178	0644	edit dl rm
overflow.md	4534	0644	edit dl rm
position.md	5945	0644	edit dl rm
shadows.md	1165	0644	edit dl rm
sizing.md	2116	0644	edit dl rm
spacing.md	5848	0644	edit dl rm
text.md	6671	0644	edit dl rm
vertical-align.md	1703	0644	edit dl rm
visibility.md	1048	0644	edit dl rm
z-index.md	2161	0644	edit dl rm

Edit: /var/www/vhosts/ihelp.ro/httpdocs/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/link.md (4506B)

## 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]({{< docsref "getting-started/accessibility#color-contrast" >}}).

{{< example >}}
<a class="link-opacity-10" href="#">Link opacity 10</a>
<a class="link-opacity-25" href="#">Link opacity 25</a>
<a class="link-opacity-50" href="#">Link opacity 50</a>
<a class="link-opacity-75" href="#">Link opacity 75</a>
<a class="link-opacity-100" href="#">Link opacity 100</a>
{{< /example >}}

You can even change the opacity level on hover.

{{< example >}}
<a class="link-opacity-10-hover" href="#">Link hover opacity 10</a>
<a class="link-opacity-25-hover" href="#">Link hover opacity 25</a>
<a class="link-opacity-50-hover" href="#">Link hover opacity 50</a>
<a class="link-opacity-75-hover" href="#">Link hover opacity 75</a>
<a class="link-opacity-100-hover" href="#">Link hover opacity 100</a>
{{< /example >}}

## Link underlines

### Underline color

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

{{< example >}}
{{< link-underline-colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<a href="#" class="link-underline-{{ .name }}">{{ .name | title }} underline</a>
{{- end -}}
{{< /link-underline-colors.inline >}}
{{< /example >}}

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

{{< example >}}
<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>
{{< /example >}}

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

{{< example >}}
<a class="link-offset-2 link-underline link-underline-opacity-0" href="#">Underline opacity 0</a>
<a class="link-offset-2 link-underline link-underline-opacity-10" href="#">Underline opacity 10</a>
<a class="link-offset-2 link-underline link-underline-opacity-25" href="#">Underline opacity 25</a>
<a class="link-offset-2 link-underline link-underline-opacity-50" href="#">Underline opacity 50</a>
<a class="link-offset-2 link-underline link-underline-opacity-75" href="#">Underline opacity 75</a>
<a class="link-offset-2 link-underline link-underline-opacity-100" href="#">Underline opacity 100</a>
{{< /example >}}

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

{{< 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>
{{< /example >}}

## Colored links

[Colored link helpers]({{< docsref "/helpers/colored-links/" >}}) have been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset.

{{< example >}}
{{< colored-links.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<a href="#" class="link-{{ .name }} link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">{{ .name | title }} link</a>
{{- end -}}
{{< /colored-links.inline >}}
<a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a>
{{< /example >}}

{{< callout info >}}
{{< partial "callouts/warning-color-assistive-technologies.md" >}}
{{< /callout >}}

## CSS

In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.

### Sass utilities API

Link utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

--- layout: docs title: Link description: Link utilities are used to stylize your anchors to adjust their color, opacity, underline offset, underline color, and more. group: utilities toc: true added: 5.3 --- ## 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]({{< docsref "getting-started/accessibility#color-contrast" >}}). {{< example >}}

{{< /example >}} You can even change the opacity level on hover. {{< example >}}

Link hover opacity 10

Link hover opacity 25

Link hover opacity 50

Link hover opacity 75

Link hover opacity 100

{{< /example >}} ## Link underlines ### Underline color Change the underline's color independent of the link text color. {{< example >}} {{< link-underline-colors.inline >}} {{- range (index $.Site.Data "theme-colors") }}

{{ .name | title }} underline

{{- end -}} {{< /link-underline-colors.inline >}} {{< /example >}} ### 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`. {{< example >}}

{{< /example >}} ### 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. {{< example >}}

Underline opacity 100

{{< /example >}} ### 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. {{< example >}} Underline opacity 0 {{< /example >}} ## Colored links [Colored link helpers]({{< docsref "/helpers/colored-links/" >}}) have been updated to pair with our link utilities. Use the new utilities to modify the link opacity, underline opacity, and underline offset. {{< example >}} {{< colored-links.inline >}} {{- range (index $.Site.Data "theme-colors") }}

{{ .name | title }} link

Emphasis link

{{< /example >}} {{< callout info >}} {{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}} ## CSS In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more. ### Sass utilities API Link utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) {{< scss-docs name="utils-links" file="scss/_utilities.scss" >}}