title: Make Bootstrap Card Entirely Clickable
body: <p>I'm having trouble making the entirety of my Bootstrap 4 Card clickable. I'm using HTML5 and Bootstrap 4 and cannot make the containing card  clickable. The image and the text is clickable but I want a user to be able to click anywhere on the box. I have tried wrapping it with a link and the card looks clickable but it is not entirely. Help is appreciated</p>
  
  <p><strong>Codepen:</strong> <a href="https://codepen.io/anon/pen/PVNXgV" rel="noreferrer">https://codepen.io/anon/pen/PVNXgV</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="card-deck flex-row flex-nowrap"&gt;
  
      &lt;div class="card"&gt;
        &lt;a href="http://google.com"&gt;&lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Alberobello_BW_2016-10-16_13-43-03.jpg/250px-Alberobello_BW_2016-10-16_13-43-03.jpg" alt="Card image cap"&gt;&lt;/a&gt;
  
        &lt;a href="http://google.com"&gt;
          &lt;!-- THIS DIV IS NOT CLICKABLE BUT I WANT IT TO BE --&gt;
          &lt;div class="card-body"&gt;
            &lt;a href="http://google.com"&gt;&lt;h3 class="card-sub align-middle"&gt;Card Title&lt;/h3&gt;&lt;/a&gt;
            &lt;p class="time-card"&gt;2 Days Ago&lt;/p&gt;
          &lt;/div&gt;&lt;!-- END CARD-BODY --&gt;
        &lt;/a&gt;
      &lt;/div&gt;&lt;!-- END CARD --&gt;
  
      &lt;/div&gt;&lt;!-- END CARD DECK --&gt;
  &lt;/div&gt;&lt;!-- END CONTAINER --&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.card-container{
    max-width:1400px;
    width:95%;
  }
  
  .card-body{
    max-width:250px;
    padding-left:10px;
    margin-top:0px;
    transition:.3s;
    -webkit-transition:.3s;
  }
  
  .card-deck{
    margin-bottom:3.2rem;
    display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
  }
  
  .front-deck{
    padding-top:12rem;
  }
  
  .card{
    margin-right:16px;
    border:none;
    flex: 0 0 auto;
  }
  
  .card .card-body:first-of-type{
    border:2px solid #96cecf;
    border-top:0px; 
  }
  </code></pre>