The link-dark bootstrap class fails to have an impact

As a beginner in using bootstrap, I am creating my first simple website. However, I am facing an issue with the footer copyright section where the class "link-dark" is not taking effect.

    <!-- Copyright -->
    <div class="container-fluid bg-primary text-dark link-dark">
      <div class="text-center p-3">
        © 2021 Copyright:
        <a href="https://foo.bar/">foo.bar</a>
      </div>
    </div>
    <!-- Copyright -->

The classes 

container-fluid bg-primary text-dark
are being applied successfully, but not the link-dark.

I have referred to the documentation on this page, but I can't seem to figure out what's wrong as there are no limitations mentioned.

https://getbootstrap.com/docs/5.0/helpers/colored-links/

Can someone please help me identify what mistake I might be making?

htmlcssclassbootstrap-5

Answer №1

I finally cracked it:

<!-- Rights Reserved -->
    <div class="container-fluid bg-secondary text-light">
      <div class="text-center p-3">
        © 2022 All Rights Reserved:
        <a class="link-light" href="https://example.com/">example.com</a>
      </div>
    </div>
    <!-- Rights Reserved -->

To modify the link's color behavior, you must apply the class directly to the link element.

Answer №2

The latest Bootstrap 5.0 introduced a new class that is not present in previous versions. Ensure you have updated to the newest version of Bootstrap in order to utilize this class.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking for ways to ensure React is responsive and feeling a bit challenged by the React mentality?

I'm still getting the hang of ReactJS, and I've been facing some challenges with making React components responsive. For my app, I am utilizing react-tabs. It works well when the screen is wide, but I need to switch to a hamburger panel layout w ...

cssreactjsresponsive-design

The sluggish rendering speed of AngularJS is causing a delay in displaying the loader

Within my application, I have tabs that load a form in each tab with varying numbers of controls. Some tabs may contain a large number of controls while others may have fewer. My goal is to display a loader while the contents are being rendered into the HT ...

javascriptjqueryhtmlangularjs

Transforming a Fixed Bootstrap Site into a Mobile-Friendly Design

I am facing an issue with my bootstrap website as it is not responsive to different view sizes. I would like to make it responsive but I am unsure of how to do so. Additionally, I am using LESS to modify the twitter bootstrap css. Currently, my site is str ...

htmlcsstwitter-bootstrapresponsive-designless

Padding has an impact on the widths of flexbox items

Take a look at this code snippet: http://jsfiddle.net/56qwuz6o/3/ <div style="display:flex"> <div id="a">a</div> <div id="b">b</div> <div id="c">c</div> </div> div div { ...

cssflexbox

Using Javascript, delete all chosen HTML elements containing innerText

Looking to extract certain HTML tags from a block of code in TextArea1 and display the modified output in TextArea2 upon clicking a button. <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8&quo ...

javascripthtml

Sliced Text Transformation

Recently, I inquired about a pesky text effect that was bothering me. Thanks to the assistance of fellow users, I discovered that the culprit behind the effect was the background color's edge. Eliminating this problem should be simple, but even with ...

jqueryhtmlcsstwitter-bootstrapborder

What is causing the failure of these "span" elements within an "a" tag in IE7?

Here is a code snippet that I am working with: HTML (version 4.0) <div class="temperatura"> <a href="/link/" class="temperatura_localita"> <span style="padding-left:12px;"> T ...

htmlcss

Can anyone lend a hand with styling this menu without relying on margins in CSS?

I've been working on a website and I've noticed a significant lag in Internet Explorer when hovering over the menus. It appears that Cufon is contributing to this issue, especially when applying height, width, margins, or paddings to the li:hover ...

htmlcsshtml-listsmargin

Nested modals in Bootstrap cause content to be duplicated

My current project involves implementing a method to easily integrate a confirmation modal with any desired button using data attributes, jQuery, and Bootstrap 5 modal functionality. However, I've encountered an issue where the content of a parent mod ...

jquerybootstrap-modalbootstrap-5bootstrap5-modal

The menu item fails to respond to clicks when hovering over the header background image

I'm having an issue with the Menu Link not working. I can click on the menu item when it's placed inside the body, but when I try to place it over the background header image, it stops working. Any help would be greatly appreciated. <div clas ...

javascripthtmlcss

I am looking to dynamically insert a text field into an HTML form using jQuery or JavaScript when a specific button is clicked

This is my code snippet: <div class="rButtons"> <input type="radio" name="numbers" value="10" />10 <input type="radio" name="numbers" value="20" />20 <input type="radio" name="numbers" value="other" />other </div> ...

phpjavascriptjqueryhtmlajax

Chrome/IE displaying text indentation issue within nested divs

Encountering issues with nested divs in Chrome and IE, while Firefox works smoothly. The outer div has both text-indent and margin-top styles set. The inner div's display style is block, so the content after it should appear on a new line without any ...

htmlcssfirefoxgoogle-chrometext-indent

Misconception about the usage of jQuery's .each() function clarified with an illustrative example

Problem Description (See Fiddle): When clicking on the red boxes, they transform into kittens and display an alert with the current value of i. Clicking on a large fading kitten will reset everything. I am puzzled as to why alert(i) is triggering multipl ...

javascriptjqueryhtmlcsseach

Expanding image size with CSS

Looking for assistance to fix the squished image in HTML & CSS. I used the CSS code provided by Figma to style the image in html, but it resulted in a different aspect ratio from the original picture, causing the image to appear squished. Any help is appr ...

htmlcss

The distance from the edge of my tilted svg icon to the svg artboard

I'm currently working on developing a basic web icon system using SVG sprites. However, I have encountered a spacing issue in my code around one specific icon (between the Smash Magazine icon and the red border). I am trying to figure out how to remov ...

htmlcssimagesvgicons

Update the sum upon deleting a feature in an HTML and JavaScript form

Once a row or field is added, this function will display a delete link. When clicked, it will remove the row or field: var ct = 1; function addNewRow(){ ct++; var divElement = document.createElement('div'); divElement.id = ct; // Code to cr ...

javascriptjqueryhtmlfunction

Challenges associated with Bootstrap toggle switch

I am having some difficulties with using bootstrap switch. I have tried the examples provided on , but regardless of the classes I apply, the buttons remain the same small size and the text for ON and OFF is barely visible. I can't seem to figure out ...

twitter-bootstrapcssbuttontwitter-bootstrap-3

Attempting to maintain the main navigation highlighted while browsing through the secondary navigation

I am facing a small issue that seems like it should be an easy fix, but I can't seem to figure it out. While working on my site, I'm having trouble keeping the parent navigation highlighted when scrolling through the sub-menu. If you hover over ...

javascripthtmlcsshovernav

Wordpress dynamic content enhanced with Bootstrap carousel

My current issue involves a Bootstrap carousel that I've implemented in WordPress. While the carousel itself is functioning properly, I'm having trouble getting it to link to specific articles when the images are clicked on. Can anyone offer advi ...

phphtmlwordpress

Changing direction of arrow upon dropdown menu opening with JavaScript

I have developed a piece of code that enables users to click on a div in order to reveal a dropdown menu containing radio buttons. My goal is to make the arrows rotate 180 degrees when the dropdown menus are opened, and then return to their original positi ...

javascripthtmlcss