title: Bootstrap 4 - Responsive cards in card-columns
body: <p>I'm playing with Bootstrap 4 and I can't find a solution to add responsiveness to cards while in a <code>div</code> with <code>class=&quot;card-columns&quot;</code> (this class applies a Masonry-like effect to the cards inside the div having this class).</p>
  <p>In Bootstrap 3 it was <em>easy</em> to style and make &quot;cards&quot; responsive since it was possible to apply something like <code>class=&quot;col-md-3 col-sm-6 col-xs-12&quot;</code> to a div containing <code>thumbnail</code>, <code>caption</code>, etc.</p>
  <p>How to have the same effect while using cards in Bootstrap 4?</p>
  <p>Here is the HTML:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
  
  &lt;div class=&quot;container-fluid&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
  
          &lt;div class=&quot;col-md-4 hidden-sm-down&quot; id=&quot;map_container&quot;&gt;
              &lt;p&gt;here we put the map&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;col-md-8 col-sm-12 right_box&quot;&gt;
  
              &lt;div class=&quot;row&quot;&gt;
  
                  // here there's code for navbar
  
              &lt;/div&gt;&lt;!-- row --&gt;
  
              &lt;div class=row&quot;&gt;
                  &lt;div class=&quot;card-columns&quot;&gt;
                      &lt;?php
                      // Create and check connection
                      
                      if ($result-&gt;num_rows &gt; 0) {
  
                          // output card design
                          while($row = $result-&gt;fetch_assoc()) {
  
                              echo '&lt;div class=&quot;card&quot;&gt;
                                      &lt;img class=&quot;card-img-top&quot; src=&quot;dance' . $row[&quot;id&quot;] . '.jpg&quot; alt=&quot;' . $row[&quot;name&quot;] . '&quot;&gt;
                                      &lt;div class=&quot;card-block&quot;&gt;
                                          &lt;h4 class=&quot;card-title&quot;&gt;' . $row[&quot;name&quot;] . '&lt;/h4&gt;
                                          &lt;p class=&quot;card-text&quot;&gt;Text. Card content.&lt;/p&gt;
                                      &lt;/div&gt;
                                      &lt;div class=&quot;card-footer text-muted&quot;&gt;
                                          &lt;ul class=&quot;list-inline&quot;&gt;
                                              &lt;li&gt;&lt;i class=&quot;fa fa-user&quot;&gt;&lt;/i&gt;&lt;/li&gt;
                                              &lt;li&gt;14&lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/div&gt;
                                    &lt;/div&gt;&lt;!-- card --&gt;';
                          }
                      } else {
                          echo &quot;0 results&quot;;
                      }
  
                      $conn-&gt;close();
                      ?&gt;
                  &lt;/div&gt;&lt;!-- container card-columns --&gt;
              &lt;/div&gt;&lt;!-- row --&gt;
          &lt;/div&gt;&lt;!-- col-md-8 right_box --&gt;
      &lt;/div&gt;&lt;!-- row --&gt;
  &lt;/div&gt;&lt;!-- container-fluid --&gt;
  &lt;/body&gt;
  </code></pre>
  <p>And here is the CSS I've used:</p>
  <pre class="lang-css prettyprint-override"><code>#map_container {
  background-image: url(map.png);
  height: 100vh;
  }
  
  .right_box {
  -webkit-box-shadow: -2px 0px 2px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: -2px 0px 2px 0px rgba(0,0,0,0.75);
  box-shadow: -2px 0px 2px 0px rgba(0,0,0,0.75);
  }
  
  .card {
  border-radius: 0 !important;
  border: 0 none;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.5);
  margin-left: 1px;
  margin-right: 1px;
  }
  
  .card-img-top {
  width: 100%;
  border-radius: 0 !important;
  }
  
  .card-columns {
  padding-top: 15px;
  }
  </code></pre>
  <p>Given below are two images to make my situation clearer:</p>
  <p><a href="https://i.stack.imgur.com/FUVPN.jpg" rel="noreferrer">Large screen</a></p>
  <p><a href="https://i.stack.imgur.com/Bkaou.png" rel="noreferrer">Smaller screen</a></p>
  <p>I'd like cards to stack up vertically on smaller screens.</p>
  <p>Thanks for your suggestions!</p>