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

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>

Answer 2

I had the same problem. I fixed it with this trick. You can specify the color whatever you like and put a 00 at the end of the color code to make it transparent this way you make the style invisible. e.g.

<a href="" style="color: #83577500; ">

Answer 3

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>