How do I replace card links color in Bootstrap 4?

Question

How do I change the link color into this Bootstrap 4 card without affecting the link color of other cards on the same HTML page?

/* I've tried this but it affects all cards on the HTML page: */

.card a:link {
  color: white;
}

.card a:visited {
  color: white;
}

.card a:hover {
  color: white;
  text-decoration: none;
}

.card a:active {
  color: white;
}




  
    
      
        

        CODE SAMPLES

user_1264804 · Answer

This is a textbook case for a custom class. You'd put it on the card you want to customize and write CSS accordingly. Or, use Bootstrap's text color utilities to directly style your links with theme colors, which adds hover color shift automatically. I'll demonstrate both approaches here.

.card.orangy a {
  color: orange;
}

.card.orangy a:hover,
.card.orangy a:active {
  color: darkorange;
}





  
    
      
        
          
            

            Common card with no link styles
          
        
      
    

    
       
        
          
            

            Card with custom class
          
        
      
    

    
      
         
          
            

            Card with a text color class

user_7793741 · Answer

Paste the code in your CSS file you need to change the focus color in p tag

.card a:link {
  color: #333;
}

.card a:visited p {
  color: white;
}

.card a:hover p {
  color: green;
  text-decoration: none;
}

.card a:active p {
  color: white;
}

.card a:focus p {
  color: #f00;
}


  
    
      
        

        CODE SAMPLES

How do I replace card links color in Bootstrap 4?

2 Answers