Bootstrap 4 card components as a button

Question

How do you make bootstrap 4 card as a button. Meaning that i click on any part in the card it some action gets called.

This code is from bootstrap 4

<div class="card-deck-wrapper">
  <div class="card-deck">
    <div class="card">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
    <div class="card">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
    <div class="card">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Answer 1

Bootstrap 4.3.x now provides the stretched-link class for this purpose.

<div class="card p-2">
    <a class="card-block stretched-link text-decoration-none" href>
        <h4 class="card-title">Card title</h4>
        ...
    </a>
</div>

Demo: https://www.codeply.com/go/VfxYt2AVDL

Answer 2

I have been working on this as well, but just for links, not any javascript action. Hope it helps someone.

My solutions is to put a button inside the card. Here is my bootply for you to try out:
https://www.bootply.com/o8iMXqiBRt

I left the last card as your original code. It looks ok in firefox, chrome, and edge.

a tiny css is required to maintain the same formatting:

.btn-fix {
padding: 0;
border: none;
white-space: normal;
 }

The html is very similar but text will need bootstrap classes like "text-dark" and "text-left" to copy the card formatting.

     <div class="card">
           <a href="#" class="btn btn-fix text-left">
              <img class="card-img-top " src="..." alt="Card image cap">
                <div class="card-block ">
                    <h4 class="card-title text-dark ">Card title</h4>
                    <p class="card-text text-dark ">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text "><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </a>
        </div>

or you can add a couple more classes to the btn-fix css:

.btn-fix {
padding: 0;
border: none;
white-space: normal;
color: black;
text-align: left;
}

html without the Bootstrap 4 tags that works with the longer btn-fix css

   <div class="card">
            <a href="#" class="btn btn-fix ">
              <img class="card-img-top " data-src="http://www.imag-e-nation.com/templates/ArtFraming/images/freeprintables/thumbnail/favourbox1_small.jpg" alt="Card image cap">
                <div class="card-block ">
                    <h4 class="card-title  ">Card title</h4>
                        <p class="card-text ">This is a longer card with 
      supporting text below as a natural lead-in to additional content. This       
   content is a little bit longer.</p>
                    <p class="card-text "><small class="text-muted">Last 
       updated 3 mins ago</small></p>
                </div>
            </a>
        </div>