title: How to embed ejs loop in parent element
body: <p>I have this <code>ejs</code> template code that loops through array of objects and returns a page with number of div elements with bootstrap <code>class="card"</code>.</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;% blogs.forEach(function(blog){ %&gt;
      &lt;div class="card" style="width: 18rem;"&gt;
          &lt;img class="card-img-top" src="&lt;%= blog.image %&gt;"&gt;
          &lt;div class="card-body"&gt;&lt;/div&gt;
              &lt;h3 class="card-title"&gt;&lt;%= blog.title %&gt;&lt;/h3&gt;
              &lt;p&gt;&lt;%= blog.created %&gt;&lt;/p&gt;
              &lt;p class="card-text"&gt;&lt;%= blog.content.substring(0, 100) %&gt;&lt;/p&gt;
              &lt;a href="/blogs/&lt;%= blog._id %&gt;"&gt;read more...&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;% }); %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But it only returns one <code>div.card</code> inside <code>div.container</code>, and the rest of them outside, after <code>div.container</code>.
  How do I put all of div.card inside div.container?</p>