title: How can I set column in row on the card group bootstrap vue?
body: <p>My vue component like this :  </p>
  
  <pre><code>&lt;template&gt;
    ...
      &lt;b-card-group deck deck v-for="row in formattedClubs"&gt;
          &lt;b-card  v-for="club in row"
                  :title="club.description"
                  img-src="http://placehold.it/130?text=No-image"
                  img-alt="Img"
                  img-top&gt;
              &lt;p class="card-text"&gt;
                  {{club.price}}
              &lt;/p&gt;
              &lt;p class="card-text"&gt;
                  {{club.country}}
              &lt;/p&gt;
              &lt;div slot="footer"&gt;
                  &lt;b-btn variant="primary" block&gt;Add&lt;/b-btn&gt;
              &lt;/div&gt;
          &lt;/b-card&gt;
      &lt;/b-card-group&gt;
    ...
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data: function () {
      return {
        clubs: [
            {id:1, description:'chelsea', price:1000, country:'england'},
            {id:2, description:'liverpool', price:900, country:'england'},
            {id:3, description:'mu', price:800, country:'england'},
            {id:4, description:'cit', price:700, country:'england'},
            {id:5, description:'arsenal', price:600, country:'england'},
            {id:6, description:'tottenham', price:500, country:'england'},
            {id:7, description:'juventus', price:400, country:'italy'},
            {id:8, description:'madrid', price:300, country:'spain'},
            {id:9, description:'barcelona', price:200, country:'spain'},
            {id:10, description:'psg', price:100, country:'france'}
        ]
      }
    },
    computed: {
        formattedClubs() {
            return this.clubs.reduce((c, n, i) =&gt; {
                if (i % 4 === 0) c.push([]);
                c[c.length - 1].push(n);
                return c;
            }, []);
        }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>If the script executed, the result like this</p>
  
  <p>row 1 :</p>
  
  <p><a href="https://i.stack.imgur.com/x0dGZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/x0dGZ.png" alt="enter image description here"></a></p>
  
  <p>row 2 :</p>
  
  <p><a href="https://i.stack.imgur.com/54JFi.png" rel="noreferrer"><img src="https://i.stack.imgur.com/54JFi.png" alt="enter image description here"></a></p>
  
  <p>row 3 : </p>
  
  <p><a href="https://i.stack.imgur.com/Zc8Yj.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Zc8Yj.png" alt="enter image description here"></a></p>
  
  <p>In the row 1 and row 2, the results as I expected. In 1 row exist 4 column</p>
  
  <p>But the row 3 does not match my expectations. In 1 row only 2 column. There should be 4 columns, 2 columns filled, 2 columns is empty </p>
  
  <p>How can I solve this problem?</p>