Bootstrap - Colored Links

Default Link Colors in Bootstrap

Bootstrap styles links with a blue color (#007bff). This default color stands out from regular text and draws attention to the link. The default link styling also includes an underline to make the link noticeable.

You may want to change the color to better fit your website's design or branding. To override the default link color in Bootstrap, use custom CSS. Target the <a> tag and apply your desired color using the color property.

a {
  color: #ff0000; /* Change link color to red */
}

Adding this CSS rule will make all links on your Bootstrap web page appear in red instead of the default blue. Replace #ff0000 with any valid color code or name to match your design.

When overriding the default link color, choose colors that provide good contrast against the background to keep the links readable. Also, style the link's hover and active states to give users feedback when interacting with the links.

Coloring Links with Bootstrap Classes

Bootstrap has built-in classes to color your links. These classes are part of the text color utility and start with .text-. Here are the classes for coloring links:

To use these classes, add the class to the <a> tag of your link.

<a href="#" class="text-primary">Primary Link</a>
<a href="#" class="text-secondary">Secondary Link</a>
<a href="#" class="text-success">Success Link</a>
<a href="#" class="text-danger">Danger Link</a>
<a href="#" class="text-warning">Warning Link</a>
<a href="#" class="text-info">Info Link</a>
<a href="#" class="text-light bg-dark">Light Link</a>
<a href="#" class="text-dark">Dark Link</a>
<a href="#" class="text-muted">Muted Link</a>
<a href="#" class="text-white bg-dark">White Link</a>

Each link will have a different color based on the class. The .bg-dark class is added to the .text-light and .text-white links to provide a dark background for better contrast.

Using Bootstrap's text color classes is a quick and consistent way to color your links without writing custom CSS. If you need more control over the link colors or want to use colors outside of Bootstrap's default color palette, you can use custom CSS.

Coloring Links with Custom CSS

Bootstrap's text color classes let you style your links, but custom CSS gives you more control over the colors. Custom CSS lets you set any color for your links and target specific links using classes or IDs.

To color links using custom CSS, create a style rule that targets the <a> tag. Inside the rule, use the color property to set the link color.

a {
  color: #ff6600;
}

This CSS rule will change the color of all links to #ff6600, which is an orange color. Replace #ff6600 with the color code or name you want.

If you want to apply different colors to specific links, you can use classes or IDs. Add a class or ID to the <a> tag in your HTML, then target that class or ID in your CSS.

<a href="#" class="custom-link">Custom Link</a>
<a href="#" id="unique-link">Unique Link</a>

.custom-link {
  color: #00ff00;
}

#unique-link {
  color: #800080;
}

Using custom CSS gives you complete control over the link colors on your website. You can match the colors to your brand, create color schemes, or use different shades of the same color to establish a visual hierarchy.

When choosing custom link colors, consider the following:

By combining custom CSS with Bootstrap's default styles, you can create visually appealing and easy-to-use links that match your website's design.

Hover and Active States

Styling links on hover and active states gives visual feedback to users when they interact with the links. Bootstrap has selectors for styling these states: a:hover for when the user hovers over the link and a:active for when the user clicks on the link.

To style the hover state, use the a:hover selector in your CSS. This selector targets the <a> tag when the user hovers their mouse over the link. Inside the selector, you can change the link's color, background color, text decoration, or any other CSS properties.

a:hover {
  color: #ff0000;
  text-decoration: none;
  background-color: #f5f5f5;
}

To style the active state, use the a:active selector. This selector targets the <a> tag when the user clicks on the link. Inside the selector, you can change the link's appearance to show that the link has been clicked.

a:active {
  color: #00ff00;
  font-weight: bold;
}

You can combine hover and active states to create engaging link styles.

a {
  color: #007bff;
  text-decoration: none;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:active {
  color: #004085;
  text-decoration: underline;
}

Remember to style hover and active states for links that use Bootstrap's text color classes or custom colors to ensure a consistent user experience across all links on your website.

a.text-success:hover {
  color: #1e7e34;
}

a.text-success:active {
  color: #155724;
}

By styling hover and active states, you give users clear visual cues when interacting with links. This improves the user experience and makes your website feel more responsive and engaging.