Bootstrap Card Question

[Doormats & More]

How is it possible to create a "card" with the Bootstrap framework that is entirely clickable. I am able to create a basic Card that has links attached to the images inside the card, or the buttons inside the card however I need to be able to have the entire area of the Card be clickable. I have tried wrapping the Card with various tags to apply Href links to but none of that seems to work. I do not see anything in the Bootstrap documentation stating how to do so. Thank you.

[osgood_ · Accepted solution]

I can't see your code but a basic Bootstrap Card component should look something like below:

<div class="card">
<div class="card-body">Bootstrap Card</div>
</div>

I'm assuming when the card is clicked you want the user to be taken to different 'More Info' pages, which are associated with each card?

If this is the case then give each card a 'data-link' like below:

<div class="card" data-link="product_1.html">
<div class="card-body">Product 1</div>
</div>

<div class="card" data-link="product_2.html">
<div class="card-body">Product 2</div>
</div>

<div class="card" data-link="product_3.html">
<div class="card-body">Product 3</div>
</div>

Then add the below javascript to the end of your page just before the closing </body> tag:

<script>
const card = document.querySelectorAll('.card');

card.forEach(function(card) {

card.onclick = function() {

const url = this.getAttribute('data-link');
window.location.href = url;

}

})

</script>

[Doormats & More]

Thank you. That seems to works, I appreciate your help. What would be the method for creating a rollover effect on the entire card & it's contents: the button, image & cardbody. So if a user rolls over any part of the card all of the elements repond with a rollover. Below is the a simplified version of the HTML card code I am using.

<article>      //WRAPPER
<div class="card" data-link="LINK.HTML">     //CARD

<a href="LINK.HTML" class="btn btn-primary">More Info</a>     //BUTTON
<a href="LINK.HTML"><img src="IMAGE.JPG"></a>     //IMAGELINK
<div class="card-body">     //CARDBODY
<h5>TEXT</h5>     //HEADER
<p>TEXT </p>     //TEXT
</div>     //CARDBODY END
</div>     //CARD END
</article>     //WRAPPER END

[osgood_]

What is it you are trying to achieve when the mouse rolls over the entire Bootstrap card? Do remember that mobile devices do not react to mouse hover functions, they only work consistantly on desktop devices.

You could simply use css hover if its something simple you are requiring, like changing the background-color of the card:

.card:hover {
background-color: #f2f2f2;
}

If its more complex you'll probably need to introduce some javascript.

[Nancy OShea]

"So if a user rolls over any part of the card all of the elements repond with a rollover."

Use CSS in your custom stylesheet.  But keep in mind, this has no effect on mouseless devices.

.card {opacity:0.7}
.card:hover{opacity:1}

[Doormats & More]

Thank you. Yes, I did try myself to use a psuedo class hover state on the card itself but was unable to get it to change the background color upon rollover, I'll have to work with that some more, maybe I configured it incorrectly somehow. I'm trying to get a rollover effect for desktop users to give them a visual cue, which yes would not be applicable for mobile users.

[Nancy OShea]

Changing background-color on hover will require identifying current Bootstrap selector name and cancelling out existing styles. That's why I simplified things with opacity.  You could also use filters like this:

.card:hover {
-webkit-filter: sepia(100%) hue-rotate(90deg) saturate(400%);
filter: sepia(100%) hue-rotate(90deg) saturate(400%);
}

[Doormats & More]

Thanks, I'll work with that.