Bootstrap 5 Colored links

Last Updated : 07 Nov, 2022

Bootstrap 5 Colored links are used to add colors to the link element. To set the colored links, we use the classes of utilities built on our theme colors. To make different color links, we will use .link-* class and add CSS styles to it.

Colored links used Classes:

link-primary: This class is used to set the primary color of the link element.
link-secondary: This class is used to set the secondary color of the link element.
link-success: This class is used to set the success color of the link element.
link-danger: This class is used to set the danger color of the link element.
link-warning: This class is used to set the warning color of the link element.
link-info: This class is used to set the info color of the link element.
link-light: This class is used to set the light color of the link element.
link-dark: This class is used to set the dark color of the link element.
link-white: This class is used to set the white color of the link element.

Syntax:

<a href="#" class="link-*">
    link
</a>

Example 1: In this example, we will use colored links classes to change the links color.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bootstrap 5 Colored links</title> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"> 
      </script> 
</head> 
  
<body> 
    <div class="container" style="text-align: center;"> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <h3>Bootstrap 5 Colored links</h3> 
        <a href="#" class="link-primary">Primary Color Link</a><br> 
        <a href="#" class="link-secondary">Secondary Color Link</a><br> 
        <a href="#" class="link-success">Success Color Link</a><br> 
        <a href="#" class="link-danger">Danger Color Link</a><br> 
        <a href="#" class="link-warning">Warning Color Link</a><br> 
        <a href="#" class="link-info">Info Color Link</a><br> 
        <a href="#" class="link-light">Light Color Link</a><br> 
        <a href="#" class="link-dark">Dark Color Link</a> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, we will use colored links classes to change the links color.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Bootstrap 5 Colored links</title> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous"> 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"> 
      </script> 
    <style> 
        a { 
            padding-right: 30px; 
            text-decoration: none; 
        } 
  
        a:hover { 
            background-color: green; 
            padding: 10px 20px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container" style="text-align: center;"> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <h3>Bootstrap 5 Colored links</h3> 
        <h4> 
            <a href="#" class="link-primary"> 
                  Primary Color Link 
              </a> 
            <a href="#" class="link-secondary"> 
                  Secondary Color Link 
              </a> 
            <a href="#" class="link-success"> 
                  Success Color Link 
              </a> 
            <a href="#" class="link-danger"> 
                  Danger Color Link 
              </a> 
        </h4> 
    </div> 
</body> 
  
</html>