title: Bootstrap 4 - displaying cards in a custom way
body: <p>I'm trying to create a proper semantic HTML/CSS based on Bootstrap 4 that would present card elements in a certain way without adding too much custom bulk.</p>
  
  <p>What I have so far is this: </p>
  
  <pre><code>&lt;section class="section d-flex align-items-center"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row news-block"&gt;
        &lt;div class="col-md-5"&gt;
          &lt;div class="card text-center pt-3 card-simple"&gt;
            &lt;a href="#GO" class="click-overlay"&gt;&lt;/a&gt;
            &lt;img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt=""&gt;
  
            &lt;div class="card-body"&gt;
              &lt;h4 class="card-title"&gt;Test 1&lt;/h4&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col-md-7"&gt;
          &lt;div class="row"&gt;
  
            &lt;div class="col-md-4"&gt;
              &lt;div class="card text-center pt-3 card-simple mb-4"&gt;
                &lt;a href="#GO" class="click-overlay"&gt;&lt;/a&gt;
                &lt;img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt=""&gt;
  
                &lt;div class="card-body"&gt;
                  &lt;h4 class="card-title"&gt;Test 2&lt;/h4&gt;
  
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4"&gt;
              &lt;div class="card text-center pt-3 card-simple"&gt;
                &lt;a href="#GO" class="click-overlay"&gt;&lt;/a&gt;
                &lt;img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt=""&gt;
  
                &lt;div class="card-body"&gt;
                  &lt;h4 class="card-title"&gt;Test 3&lt;/h4&gt;
  
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4"&gt;
              &lt;div class="card text-center pt-3 card-simple"&gt;
                &lt;a href="#GO" class="click-overlay"&gt;&lt;/a&gt;
                &lt;img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt=""&gt;
  
                &lt;div class="card-body"&gt;
                  &lt;h4 class="card-title"&gt;Test 4&lt;/h4&gt;
  
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4"&gt;
              &lt;div class="card text-center pt-3 card-simple"&gt;
                &lt;a href="#GO" class="click-overlay"&gt;&lt;/a&gt;
                &lt;img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt=""&gt;
  
                &lt;div class="card-body"&gt;
                  &lt;h4 class="card-title"&gt;Test 5&lt;/h4&gt;
  
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4"&gt;
              &lt;div class="card text-center pt-3 card-simple"&gt;
                &lt;a href="#GO" class="click-overlay"&gt;&lt;/a&gt;
                &lt;img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt=""&gt;
  
                &lt;div class="card-body"&gt;
                  &lt;h4 class="card-title"&gt;Test 6&lt;/h4&gt;
  
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="col-md-4"&gt;
              &lt;div class="card text-center pt-3 card-simple"&gt;
                &lt;a href="#GO" class="click-overlay"&gt;&lt;/a&gt;
                &lt;img class="card-img-top w-75 mx-auto" src="https://picsum.photos/200" alt=""&gt;
  
                &lt;div class="card-body"&gt;
                  &lt;h4 class="card-title"&gt;Test 7&lt;/h4&gt;
  
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>A Codepen to see what I mean: <a href="https://codepen.io/wiwa-cloud/pen/rKxqYw?editors=1100" rel="nofollow noreferrer">https://codepen.io/wiwa-cloud/pen/rKxqYw?editors=1100</a></p>
  
  <p>What I'd like to achieve: </p>
  
  <ul>
  <li>the same spacing (Vertical &amp; horizontal) between all cards</li>
  <li>the "big" card on the left should be the same height as the right column with 6 cards</li>
  <li>keep it responsive</li>
  </ul>
  
  <p>Is there a good 'bootstrap 4' way of doing this, or do I need to hack around pretty much?</p>
  
  <p>Also, should I wrap everything in .card-deck and if so, why? (I'm using card-deck for when cards stay horizontally stacked on other custom components).</p>
  
  <p>Any tips appreciated.</p>