Using bootstrap cards as a hyperlink : <p>I have a bootstrap card Which is used as a link.</p>

<p>Trying to wrap it with <code>&lt;a&gt;</code> changes all of the styling of the card.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"&gt;

  &lt;div class="card" style="width: 15rem; display: inline-block"&gt;
    &lt;img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=318%C3%97180&amp;w=318&amp;h=180" alt="Card image cap"&gt;
    &lt;div class="card-body"&gt;
      &lt;h5 class="card-title"&gt;Normal card&lt;/h5&gt;
      &lt;p class="card-text"&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;

&lt;a href=""&gt;
  &lt;div class="card" style="width: 15rem; display: inline-block"&gt;
    &lt;img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=318%C3%97180&amp;w=318&amp;h=180" alt="Card image cap"&gt;
    &lt;div class="card-body"&gt;
      &lt;h5 class="card-title"&gt;Wrapped with a tag&lt;/h5&gt;
      &lt;p class="card-text"&gt;Some quick example text to build on the card title and make up the bulk of the card's content.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;

&lt;/a&gt;</code></pre>
</div>
</div>
</p>

<p>How should I wrap the card in order to preserve its looks and use it as a link?</p>
