Bootstrap - Link

This chapter discusses about the link utility classes that help in customizing the appearance and behavior of hyperlinks.

The .link utility classes make it more easier and consistent to style and control the behavior of links.

Link opacity

Opacity of the links can be changed using the .link-opacity-* class.

The * can hold values like 10, 25, 50, 75, 100.

Note: The change in the color's opacity may lead to insufficient color contrast.

Let us see an example of the .link-opacity-* class:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Link</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container p-4">
          <h4>Link opacity</h4>
          <p><a class="link-opacity-10" href="#">Opacity of link 10</a></p>
          <p><a class="link-opacity-25" href="#">Opacity of link 25</a></p>
          <p><a class="link-opacity-50" href="#">Opacity of link 50</a></p>
          <p><a class="link-opacity-75" href="#">Opacity of link 75</a></p>
          <p><a class="link-opacity-100" href="#">Opacity of link 100</a></p>
        </div>
    </body>
</html>

Opacity level can also be changed on hover. Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Link</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container p-4">
          <h4>Link opacity - on hover</h4>
          <p><a class="link-opacity-10-hover" href="#">Opacity on hover 10</a></p>
          <p><a class="link-opacity-25-hover" href="#">Opacity on hover 25</a></p>
          <p><a class="link-opacity-50-hover" href="#">Opacity on hover 50</a></p>
          <p><a class="link-opacity-75-hover" href="#">Opacity on hover 75</a></p>
          <p><a class="link-opacity-100" href="#">No opacity change on hover</a></p>
        </div>
    </body>
</html>

Link underlines

A set of utility classes are provided by Bootstrap to adjust the link underlines.

Underline color

You can change the underline's color, independent of the link text color, using the .link-underline-* class.

Let us see an example showcasing all the various colors you can use for the underline of a link:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Link</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container p-4">
          <h4>Link underline color</h4>
          <p><a class="link-underline-primary" href="#">Underline-Primary</a></p>
          <p><a class="link-underline-danger" href="#">Underline-Danger</a></p>
          <p><a class="link-underline-secondary" href="#">Underline-Secondary</a></p>
          <p><a class="link-underline-warning" href="#">Underline-Warning</a></p>
          <p><a class="link-underline-info" href="#">Underline-Info</a></p>
          <p><a class="link-underline-success" href="#">Underline-Success</a></p>
          <p><a class="link-underline-light" href="#">Underline-Light</a></p>
          <p><a class="link-underline-dark" href="#">Underline-Dark</a></p>
        </div>
    </body>
</html>

Underline offset

The underline offset refers to the gap or space between the underline and the text. Through the .link-offset-* class, you can adjust the space between the text and the link.

Offset automatically adjusts with the element's current font-size.

Let us see an example of .link-offset-* class:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Link</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container p-4">
          <h4>Link underline offset</h4>
          <p><a class="link-offset-1" href="#">Link offset - 1</a></p>
          <p><a class="link-offset-2" href="#">Link offset - 2</a></p>
          <p><a class="link-offset-3" href="#">Link offset - 3</a></p>
          <p><a href="#">No offset</a></p>
        </div>
    </body>
</html>

Underline opacity

You can change the underline's opacity too.

  • Use the .link-underline-opacity-* class to achieve this feature.

  • You need to add .link-underline class, before using the .link-underline-opacity-* class.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Link</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container p-4">
          <h4>Link underline opacity</h4>
          <p><a class="link-offset-3 link-underline link-underline-opacity-0" href="#">Opacity of underline 0</a></p>
          <p><a class="link-offset-3 link-underline link-underline-opacity-10" href="#">Opacity of underline 10</a></p>
          <p><a class="link-offset-3 link-underline link-underline-opacity-25" href="#">Opacity of underline 25</a></p>
          <p><a class="link-offset-3 link-underline link-underline-opacity-50" href="#">Opacity of underline 50</a></p>
          <p><a class="link-offset-3 link-underline link-underline-opacity-75" href="#">Opacity of underline 75</a></p>
          <p><a class="link-offset-3 link-underline link-underline-opacity-100" href="#">Opacity of underline 100</a></p>
        </div>
    </body>
</html>

Hover variants

:hover variants are available for .link-offset and .link-underline-opacity, apart from .link-opacity-*-hover.

You can use all these utility classes in combinations, as per your requirement.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Link</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container p-4">
          <h4>Link hover variants</h4>
          <p><a href="#" class="link-offset-3-hover">link-offset-3-hover</a></p>  
          <p><a href="#" class="link-offset-3-hover link-underline link-underline-opacity-75-hover">link-underline link-underline-opacity-75-hover</a></p>
      </div>
    </body>
</html>

Colored links

The .link utility classes can be paired with the colored link helpers.

You can use these new utility classes to adjust the link color, opacity, underline opacity and underline offset.

Let us see an example:

Example

You can edit and try running this code using the Edit & Run option.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Link</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container p-4">
          <h4>Link utilities with colored links</h4>
          <p><a href="#" class="link-primary link-offset-3 link-underline-opacity-75 link-underline-opacity-100-hover">Primary colored link</a></p>
          <p><a href="#" class="link-secondary link-offset-3 link-underline-opacity-75 link-underline-opacity-100-hover">Secondary colored link</a></p>
          <p><a href="#" class="link-success link-offset-3 link-underline-opacity-50 link-underline-opacity-100-hover">Success colored link</a></p>
          <p><a href="#" class="link-danger link-offset-3 link-underline-opacity-50 link-underline-opacity-100-hover">Danger colored link</a></p>
          <p><a href="#" class="link-warning link-offset-3 link-underline-opacity-25 link-underline-opacity-100-hover">Warning colored link</a></p>
          <p><a href="#" class="link-info link-offset-3 link-underline-opacity-25 link-underline-opacity-100-hover">Info colored link</a></p>
          <p><a href="#" class="link-light link-offset-3 link-underline-opacity-100 link-underline-opacity-100-hover">Light colored link</a></p>
          <p><a href="#" class="link-dark link-offset-3 link-underline-opacity-100 link-underline-opacity-100-hover">Dark colored link</a></p>
          <p><a href="#" class="link-body-emphasis link-offset-3 link-underline-opacity-75 link-underline-opacity-75-hover">Emphasis colored link</a></p>
      </div>
    </body>
</html>
Advertisements