title: Bootstrap 4 row columns not breaking row
body: <p>I'm trying to create a bootstrap grid where every row has to columns, bootstrap has a class that does this, row-cols-*, but when I place the example on bootstrap <a href="https://getbootstrap.com/docs/4.4/layout/grid/#row-columns" rel="nofollow noreferrer">website</a> in a <a href="https://jsfiddle.net/7u65agnj/16/" rel="nofollow noreferrer">jsfiddle</a> it doesn't break row like it is supposed to do. What am I doing wrong?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row row-cols-2 text-white"&gt;
      &lt;div class="col border bg-primary"&gt;Column&lt;/div&gt;
      &lt;div class="col border bg-primary"&gt;Column&lt;/div&gt;
      &lt;div class="col border bg-primary"&gt;Column&lt;/div&gt;
      &lt;div class="col border bg-primary"&gt;Column&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>