Using bootstrap cards as a hyperlink
Its because <a> tags has a default blue color from user agent browser. Try to add a class to the link and set color:inherit to that class
a.custom-card,
a.custom-card:hover {
color: inherit;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Normal card</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<a href="" class="custom-card">
<div class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Wrapped with a tag</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</a>Instead of wrapping the .card in a <a>, you could use a <a> as the card element instead of a <div>.
This will allow you to easily override the CSS to remove the default <a> styles:
a.card,
a.card:hover {
color: #212529;
text-decoration: none;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Normal card</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<a href="#" class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Wrapped with a tag</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</a>Very simple with Stretched link
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card with stretched link</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>
If you are using Bootstrap 4.3 you don't have to wrap card with <a> tag, but instead put it inside card-body, and use stretched-link class. This is much cleaner way.
Visit https://getbootstrap.com/docs/4.3/utilities/stretched-link/ for more details.
If you can't use Bootstrap 4.3 this is styling for stretched-link class:
.stretched-link::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: auto;
content: "";
background-color: rgba(0,0,0,0);
}
Here is the example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Normal card</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Alternative</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="stretched-link"></a>
</div>
</div>