Highlighted

Bootstrap Card Question

Explorer ,
Sep 24, 2020

Copy link to clipboard

Copied

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.

 

Card.jpg

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>

TOPICS
Bootstrap

Views

104

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Bootstrap Card Question

Explorer ,
Sep 24, 2020

Copy link to clipboard

Copied

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.

 

Card.jpg

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>

TOPICS
Bootstrap

Views

105

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Sep 24, 2020 0
LEGEND ,
Sep 24, 2020

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2020 1
Explorer ,
Sep 24, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2020 0
LEGEND ,
Sep 24, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2020 0
Adobe Community Professional ,
Sep 24, 2020

Copy link to clipboard

Copied

"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}

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2020 2
Explorer ,
Sep 24, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2020 0
Adobe Community Professional ,
Sep 24, 2020

Copy link to clipboard

Copied

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%);
}

 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2020 1
Explorer ,
Sep 24, 2020

Copy link to clipboard

Copied

Thanks, I'll work with that.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 24, 2020 0