CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4hyperlink
abenci
abenci

Reputation: 8651

How do I replace card links color in Bootstrap 4?

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;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="col-md-6">
  <div class="card py-4 card-container">
    <a href="#">
      <div class="card-body">
        <i class="fa-light fa-book-open my-4" style="font-size: 36px"></i><br/>
        <p class="card-text text-center">CODE SAMPLES</p>
      </div>
    </a>
  </div>
</div>

Upvotes: 1

Views: 472

Answers (2)

isherwood
isherwood

Reputation: 61063

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;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="container-fluid">
  <div class="row mt-2">
    <div class="col-4">
      <div class="card py-2 card-container">
        <a href="#">
          <div class="card-body">
            <i class="fa-light fa fa-book-open mb-4" style="font-size: 36px"></i><br/>
            <p class="card-text text-center">Common card with no link styles</p>
          </div>
        </a>
      </div>
    </div>

    <div class="col-4">
      <div class="card orangy py-2 card-container"> <!--------------- HERE -->
        <a href="#">
          <div class="card-body">
            <i class="fa-light fa fa-book-open mb-4" style="font-size: 36px"></i><br/>
            <p class="card-text text-center">Card with custom class</p>
          </div>
        </a>
      </div>
    </div>

    <div class="col-4">
      <div class="card py-2 card-container">
        <a href="#" class="text-danger"> <!-------------------------- HERE -->
          <div class="card-body">
            <i class="fa-light fa fa-book-open mb-4" style="font-size: 36px"></i><br/>
            <p class="card-text text-center">Card with a text color class</p>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Shagor Ahmed
Shagor Ahmed

Reputation: 171

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;
}
<div class="col-md-6">
  <div class="card py-4 card-container">
    <a href="#">
      <div class="card-body">
        <i class="fa-light fa-book-open my-4" style="font-size: 36px"></i><br/>
        <p class="card-text text-center">CODE SAMPLES</p>
      </div>
    </a>
  </div>
</div>

Upvotes: 0

Related Questions