Bootstrap - Colored links

This chapter discusses about the colored link feature of helper classes. The Bootstrap 5 colored links are used to add colors to the link elements.

In order to make the links colored, use .link-* classes. These classes have :hover and :focus states, unlike the .text-* classes.


In order to make the links legible, that have relatively light foreground color, use them on a dark background.

.link-body-emphasis is the only colored link that is unique and high contrast link color. It comes with :hover and :focus styles.

Example

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Colored 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-2">
            <h4>Colored links</h4><br>
            <p><a href="#" class="link-primary">Primary Color Link</a></p>
            <p><a href="#" class="link-secondary">Secondary Color Link</a></p>
            <p><a href="#" class="link-info">Info Color Link</a></p>
            <p><a href="#" class="link-success">Success Color Link</a></p>
            <p><a href="#" class="link-light bg-dark">Light Color Link on dark background</a></p>
            <p><a href="#" class="link-dark">Dark Color Link</a></p>
            <p><a href="#" class="link-warning">Warning Color Link</a></p>
            <p><a href="#" class="link-danger">Danger Color Link</a></p>
            <p><a href="#" class="link-body-emphasis">Custom Emphasis Link</a></p>
        </div>
    </body>
</html>

Accessibility tip: Use of color just provides a visual indication, and this will not be helpful to users of assistive technologies like screen readers. Make sure that the meaning is clear from the content itself.

Use alternative means to add clarity to the content using the .visually-hidden class.

Link utilities

Bootstrap provides a range of link utilities such as link opacity, link offset, underline color, underline opacity, and so on.

Similarly colored links can also be modified using the link utilities. 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 - Helper - Colored 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-2">
        <h4>Colored link utilities</h4><br>
        <p><a href="#" class="link-offset-1 link-primary link-opacity-50 link-underline-warning link-underline-opacity-75">Primary Color Link</a></p>
        <p><a href="#" class="link-offset-1 link-secondary link-opacity-50 link-underline-danger link-underline-opacity-50">Secondary Color Link</a></p>
        <p><a href="#" class="link-offset-2 link-info link-opacity-25 link-underline-success link-underline-opacity-100">Info Color Link</a></p>
        <p><a href="#" class="link-offset-2 link-success link-opacity-75 link-underline-danger link-underline-opacity-70">Success Color Link</a></p>
       </div>
    </body>
</html>
Advertisements