title: Dynamically change the column arrangement in bootstrap while retaining responsiveness
body: <p>I have an area on my page which I spawn cards of definite sizes(250*250).But I want it to be maximum 4 cards per row(on small viewport I will stack them). for now, it works with 4 cards and more(the excess will break and goes the other line, all good). but the problem is when I have less than 4 cards(it may occur). The cards come from a database which I produce at run-time. This is a rails application by the way.</p>
  
  <p>I want the cards to align themselves while maintaining their size inside the row if there less than 4 cards by having more margin to their right and left.</p>
  
  <p>The design I have in mind is this for 4 or more cards:</p>
  
  <p><a href="https://i.stack.imgur.com/eq4aX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eq4aX.png" alt="enter image description here"></a></p>
  
  <p>and for less than 4, for example for 2 cards like this:</p>
  
  <p><a href="https://i.stack.imgur.com/v06P3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v06P3.png" alt="enter image description here"></a></p>
  
  <p>This is what happens when I have for example 2 cards:
  <a href="https://i.stack.imgur.com/oFoid.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oFoid.png" alt="enter image description here"></a></p>
  
  <p>And this is what I have for 5 cards:
  <a href="https://i.stack.imgur.com/OLlei.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OLlei.png" alt="enter image description here"></a></p>
  
  <p>The margin, I can work with.</p>
  
  <hr>
  
  <p><strong>Question:</strong>
  How can I work this out to have only 4 fixed-size columns on large screens, and on smalls stack them up. while being dynamically aligning themselves if there are less than 4 cards in the row.</p>
  
  <p>This is what I have done so far:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="feature-wrapper pt-5 pb-5 mt-5 mt-lg-0 h-100 "&gt;
  
  &lt;div class="d-flex align-items-center h-100 justify-content-center "&gt;
  
      &lt;div class="row"&gt;
  
          &lt;div class="my-card col-sm-12 col-lg-3 text-center mb-3 mb-md-0 rounded border"&gt;
              &lt;i class="far fa-plus-square fa-10x"&gt;&lt;/i&gt;
          &lt;/div&gt;
  
          &lt;div class="my-card col-sm-12 col-lg-3 text-center mb-3 mb-md-0 rounded border"&gt;
              &lt;i class="fas fa-arrow-alt-circle-down fa-10x"&gt;&lt;/i&gt;
          &lt;/div&gt;
           &lt;div class="my-card col-sm-12 col-lg-3 text-center mb-3 mb-md-0 rounded border"&gt;
              &lt;i class="fas fa-arrow-alt-circle-down fa-10x"&gt;&lt;/i&gt;
          &lt;/div&gt;
           &lt;div class="my-card col-sm-12 col-lg-3 text-center mb-3 mb-md-0 rounded border"&gt;
              &lt;i class="fas fa-arrow-alt-circle-down fa-10x"&gt;&lt;/i&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>body,html{
    height:100%;
  }
  .my-card{
        height:250px;
        width:250px;
        background-color:red;
        text-align:center;
  }
  </code></pre>