Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using bootstrap cards as a hyperlink

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?

like image 681
Poogy Avatar asked Mar 29 '18 10:03

Poogy


People also ask

How do I link Bootstrap card?

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.

How do you make a whole card clickable?

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.


2 Answers

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>
like image 191
Mladen Mitrovic Avatar answered Oct 03 '22 04:10

Mladen Mitrovic


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>
like image 28
Bhuwan Avatar answered Oct 03 '22 05:10

Bhuwan