• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Bootstrap Card Question

Participant ,
Sep 24, 2020 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

TOPICS
Bootstrap

Views

363

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
community guidelines

correct answers 1 Correct answer

LEGEND , Sep 24, 2020 Sep 24, 2020

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

...

Votes

Translate

Translate
LEGEND ,
Sep 24, 2020 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>

Votes

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
community guidelines
Participant ,
Sep 24, 2020 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

Votes

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
community guidelines
LEGEND ,
Sep 24, 2020 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.

Votes

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
community guidelines
Community Expert ,
Sep 24, 2020 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Participant ,
Sep 24, 2020 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.

Votes

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
community guidelines
Community Expert ,
Sep 24, 2020 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Participant ,
Sep 24, 2020 Sep 24, 2020

Copy link to clipboard

Copied

LATEST

Thanks, I'll work with that.

Votes

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
community guidelines