title: dynamically created boostrap 4 cards are displaying as a column instead of normal layout(rows)
body: <p>here's the js:</p>
  
  <pre><code>const url = 'https://jsonplaceholder.typicode.com/todos?_limit=3';
  
  async function getDataFromCinemasAPI() {
      const response = await fetch(url);
      const data = await response.json();
  
      let cardContentForFilling = '&lt;div class="container"&gt;&lt;div class="d-flex flex-row"&gt;&lt;div class="d-flex flex-col-md-4"&gt;&lt;div class="card mb-4 box-shadow"&gt;&lt;div class="card-body"&gt;&lt;p class="card-text"&gt; &lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
  
      for (let i = 0; i &lt; data.length; i++) {
          $('.album.py-5').append(cardContentForFilling);
          let cards = $('.card-text');
          cards.eq(i).html((data[i]["title"]));
      } 
  }
  
  getDataFromCinemasAPI();
  </code></pre>
  
  <p>here's the html:</p>
  
  <pre><code>&lt;div class="album py-5"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>already tried using flex column/rows but nothing, they stay as a column and not as a row</p>
  
  <p><a href="https://jsfiddle.net/fabryy__/wnybuhge/1/" rel="nofollow noreferrer">here's the jsfiddle</a> </p>