How to wrap (float) cards in bootstrap 4
<p>I am using bootstrap 4 beta.</p>

<p>I have a list of cards.  I want them to be of fixed width, but the height will be variable depending on the content.</p>

<p>The number of cards can be from 1 to n.</p>

<p>The effect I want is for the cards to be be laid out from left to right until screen space runs out, then wrap to next line.</p>

<p>I have tried all the different options listed on the bootstrap 4 example page for cards, but they don't seem to wrap.</p>

<p>How can I achieve this?</p>

<p>The below example shows them 3 across, with a lot of space between them.</p>

<pre><code> &lt;div class="card-columns"&gt;

        &lt;div class="card" style="width: 18rem;"&gt;
            &lt;img class="card-img-top" data-src="..." alt="Card image cap"&gt;
            &lt;div class="card-block"&gt;
                &lt;h4 class="card-title"&gt;Card title&lt;/h4&gt;
                &lt;p class="card-text"&gt;This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
                &lt;p class="card-text"&gt;&lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="card"style="width: 18rem;"&gt;
            &lt;img class="card-img-top" data-src="..." alt="Card image cap"&gt;
            &lt;div class="card-block"&gt;
                &lt;h4 class="card-title"&gt;Card title&lt;/h4&gt;
                &lt;p class="card-text"&gt;This card has supporting text below as a natural lead-in to additional content.&lt;/p&gt;
                &lt;p class="card-text"&gt;&lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="card" style="width: 18rem;"&gt;
            &lt;img class="card-img-top" data-src="..." alt="Card image cap"&gt;
            &lt;div class="card-block"&gt;
                &lt;h4 class="card-title"&gt;Card title&lt;/h4&gt;
                &lt;p class="card-text"&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.&lt;/p&gt;
                &lt;p class="card-text"&gt;&lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="card" style="width: 18rem;"&gt;
            &lt;img class="card-img-top" data-src="..." alt="Card image cap"&gt;
            &lt;div class="card-block"&gt;
                &lt;h4 class="card-title"&gt;Card title&lt;/h4&gt;
                &lt;p class="card-text"&gt;This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.&lt;/p&gt;
                &lt;p class="card-text"&gt;&lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="card" style="width: 18rem;"&gt;
            &lt;img class="card-img-top" data-src="..." alt="Card image cap"&gt;
            &lt;div class="card-block"&gt;
                &lt;h4 class="card-title"&gt;Card title&lt;/h4&gt;
                &lt;p class="card-text"&gt;This card has supporting text below as a natural lead-in to additional content.&lt;/p&gt;
                &lt;p class="card-text"&gt;&lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="card" style="width: 18rem;"&gt;
            &lt;img class="card-img-top" data-src="..." alt="Card image cap"&gt;
            &lt;div class="card-block"&gt;
                &lt;h4 class="card-title"&gt;Card title&lt;/h4&gt;
                &lt;p class="card-text"&gt;This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.&lt;/p&gt;
                &lt;p class="card-text"&gt;&lt;small class="text-muted"&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>