title: How do I make the following grid with bootstrap 4?
body: <p><a href="https://i.stack.imgur.com/k8iTz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k8iTz.png" alt="How do I make the following grid with bootstrap 4?" /></a></p>
  <p>I am trying to make a grid using only bootstrap 4 but I have not been able to have it and I have been trying for several hours. I'm starting to think it's not possible. This is my code now</p>
  <p>It is clear to me that using CSS GRID is a better option, however my question now is if it is possible to do this with BOOTSTRAP 4.</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://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"&gt;
  &lt;section class="my-section container-fluid"&gt;
        &lt;div class="pt-5 row justify-content-center" style="height: 70vh;"&gt;
          &lt;div class="container pt-5 " style="height: 100%;"&gt;
            &lt;div class='row parent-wrap justify-content-center' style="height: 90%;"&gt;
              &lt;div class="col-12 bg-danger h-100"&gt;
                &lt;div class="row align-items-start "&gt;
                  &lt;div class="col-4 bg-warning" style="height: 250px;"&gt;1&lt;/div&gt;
                  &lt;div class="col-8 bg-info" style="height: 150px;"&gt;2&lt;/div&gt;
                  &lt;div class="col-8 bg-success " style="height: 150px;"&gt;3&lt;/div&gt;
                  &lt;div class="col-4 bg-warning" style="height: 250px"&gt;1&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>