title: How to to use `v-for` with Bootstrap-Vue's `b-col` and `b-row`?
body: <p>How can we incorporate Bootstrap-Vue layouts into a v-for that outputs into an imported Vue component?</p>
  <p>This is the setup I've tried...</p>
  <pre><code>&lt;b-container&gt;
    &lt;b-row&gt;
      &lt;b-col sm=&quot;6&quot;&gt;
        ...
      &lt;/b-col&gt;
      &lt;b-col sm=&quot;6&quot; v-for=&quot;item in items&quot;&gt;
        &lt;ComponentName&gt;&lt;/ComponentName&gt;
      &lt;/b-col&gt;
    &lt;/b-row&gt;
  &lt;/b-container&gt;
  </code></pre>
  <p>The intent is to get a result that looks something along these lines:</p>
  <h2>What I DO want</h2>
  <p><a href="https://i.stack.imgur.com/saj1U.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/saj1U.png" alt="Intended Outcome" /></a></p>
  <p>But the result is different. It does the &quot;50/50&quot; column split for the FIRST <code>v-for</code> <code>Component</code>, but the remaining <code>Component</code>'s are &quot;broken out&quot; and no longer placed beside the left <code>b-column</code> area. It looks something like this:</p>
  <h2>What I do NOT want, how it currently looks</h2>
  <p><a href="https://i.stack.imgur.com/puXfg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/puXfg.png" alt="Actual Outcome" /></a></p>
  <p>How can I inform the layout to keep the two columns side by side through all of the <code>v-for</code> items, rather than just the first?</p>
  <p>Thank you in advance for any insights or tips! In the meantime, I'll keep reading :)</p>