I have a bootstrap card Which is used as a link.
Trying to wrap it with <a>
changes all of the styling of the card.
<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=""> <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>
How should I wrap the card in order to preserve its looks and use it as a link?
Titles, text, and links In the same way, links are added and placed next to each other by adding .card-link to an <a> tag. Subtitles are used by adding a .card-subtitle to a <h*> tag. If the .card-title and the .card-subtitle items are placed in a .card-body item, the card title and subtitle are aligned nicely.
You can wrap block elements with <a> . It is valid HTML5 and renders your card clickable. You may need to adjust the css rules for the text inside this block however.
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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With