DocsComponents

Link

Links allow users to navigate to a different location.
Contents

The example below a link with default behavior.

Default link
<div class="d-flex flex-column">
  <a href="#">Default link</a>
</div>

You can use the .link-* classes to colorize links. Unlike the .text-* classes, these classes have a :hover and :focus state.

Primary link Secondary link Success link Danger link Warning link Info link Light link Dark link
<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>

Or take the text color utilities text-{color} to change the link color.

link 1 link 2 link 4 link 5
<a href="#" class="text-neutral-500">link 1</a>
<a href="#" class="text-yellow-300">link 2</a>
<a href="#" class="text-red-500">link 4</a>
<a href="#" class="text-tea-400">link 5</a>

Reset a link’s color with .text-reset, so that it inherits the color from its parent.

Muted text with a reset link.

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

No underline

Use the text decoration utilities text-decoration-none to remove the underline when mouse hover a link.

This ia a link
<div class="d-flex flex-column">
  <a href="#" class="text-decoration-none">This ia a link</a>
</div>