Using bootstrap cards as a hyperlink

Question

I have a bootstrap card Which is used as a link.

Trying to wrap it with changes all of the styling of the card.

Answer 1

If you are using Bootstrap 4.3 you don't have to wrap card with 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:

  



  
Normal card
  
Some quick example text to build on the card title and make up the bulk of the card's content.

  


  



  
Alternative
  
Some quick example text to build on the card title and make up the bulk of the card's content.