Skip to main content
D
Doormats & More
Inspiring
September 24, 2020
Answered

Bootstrap Card Question

  • September 24, 2020
  • 2 replies
  • 635 views

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.

 

This topic has been closed for replies.
Correct answer osgood_

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>

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
September 24, 2020

"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
    D
    Doormats & MoreAuthor
    Inspiring
    September 24, 2020

    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
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    September 24, 2020

    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
      O
      osgood_Correct answer
      Legend
      September 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">
      <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>

        D
        Doormats & MoreAuthor
        Inspiring
        September 24, 2020

        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

        O
        osgood_
        Legend
        September 24, 2020

        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.

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices