title: How to make clickable cards using Bootstrap 4
body: <p>I'm using <code>bootstrap-4</code> and I want to make clickable cards, but for some reason when I do:</p>
  
  <pre><code>&lt;div class="col-12 col-md-6 col-lg-6 mx-lg-auto col-xl-6"&gt;
       &lt;div class="card card--industry mb-4"&gt;
           &lt;a href="{{ $industry-&gt;url }}" class="card-block"&gt;
               &lt;div class="row no-gutters"&gt;
                  &lt;div class="col-md-4"&gt;
                     &lt;img src="{{ asset('storage/'. $industry-&gt;icon) }}" class="card-img rounded-0" alt="{{ $industry-&gt;name }}" /&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-8"&gt;
                     &lt;div class="card-body"&gt;
                         &lt;h3 class="card-title"&gt;{!! $industry-&gt;link !!}&lt;/h3&gt;
                         &lt;div class="card-text"&gt;
                            {!! $industry-&gt;short_description !!}
                         &lt;/div&gt;
                         &lt;a href="{{ $industry-&gt;url }}" class="card-link d-block mt-4"&gt;Read more&lt;/a&gt;
                     &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
           &lt;/a&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It totally f***s up the DOM but I'm not missing any closing tags, so I was wondering if there is something about clickable cards using bootstrap?</p>
  
  <p>Can someone help?</p>