How to wrap (float) cards in bootstrap 4

Question

I am using bootstrap 4 beta.

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

The number of cards can be from 1 to n.

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.

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

How can I achieve this?

The below example shows them 3 across, with a lot of space between them.

 <div class="card-columns">

        <div class="card" style="width: 18rem;">
            <img class="card-img-top" data-src="..." alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card"style="width: 18rem;">
            <img class="card-img-top" data-src="..." alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card" style="width: 18rem;">
            <img class="card-img-top" data-src="..." alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">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.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card" style="width: 18rem;">
            <img class="card-img-top" data-src="..." alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card" style="width: 18rem;">
            <img class="card-img-top" data-src="..." alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
        <div class="card" style="width: 18rem;">
            <img class="card-img-top" data-src="..." alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">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.</p>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
    </div>

Greg Gum · Accepted Answer · 2018-10-14T14:53:03.897

17

After working with this for some time, the floating solution I came up with was unsatisfactory as in some cases, there was a large amount of space below some cards.. After reviewing bootstrap 4 cards, I found a feature that does exactly what I wanted it to: "card-columns"

It lines up your cards into three columns, and re-arranges to one column when the screen size is small.

Bootstrap Docs on card-columns

edited Oct 14 '18 at 14:53

answered Jul 24 '16 at 14:17

Greg Gum

33,478
39
162
233

Thanks mate. You saved me a big chunk of time there. – MartinJH Apr 02 '17 at 20:00
1

The only problem I've found with the card-columns is the order. If you have 15 cards in 3 columns the cards at to top of the page will be something like Card 1, Card 6, and Card 11. Not great! – Adam Youngers Feb 22 '18 at 21:32
1

Bootstrap 4.1 Link: https://getbootstrap.com/docs/4.1/components/card/#card-columns – Jason Tarr Oct 13 '18 at 21:01
Thanks for sharing Greg! I was going to get a headache – manuel_b May 20 '20 at 09:20
This doesn't work in Bootstrap 5 does it? – O0123 Jan 10 '21 at 00:10

score 1 · Answer 2 · answered Jul 12 '16 at 05:59

I came up with a floating-card class that works:

<style>
    .floating-card {
        float: left;
        margin: 5px;
        max-width: 300px;

    }
</style>

Example usage:

    <div class="floating-card sortable">
    <section class="box-typical task-card task">
        <div class="task-card-photo">
            <img src="img/img-task.jpg" alt="">
        </div>
        <div class="task-card-in">
            <div class="btn-group task-card-menu">
                <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="font-icon-dots-vert-square"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-right">
                    <a class="dropdown-item" href="#"><i class="font-icon font-icon-pencil"></i>Edit</a>
                    <a class="dropdown-item" href="#"><i class="font-icon font-icon-archive"></i>Archive</a>
                    <a class="dropdown-item" href="#"><i class="font-icon font-icon-trash"></i>Delete</a>
                </div>
            </div>
            <div class="task-card-title">
                <a href="#">Create new webpage for sales and marketing stuff</a>
                <span class="task-card-title-label">(BIG)</span>
            </div>
            <div class="progress-compact-style">
                <progress class="progress" value="25" max="100">
                    <div class="progress">
                        <span class="progress-bar" style="width: 25%;">25%</span>
                    </div>
                </progress>
                <div class="progress-compact-style-label">37% done</div>
            </div>
            <div class="task-card-tags">
                <a href="#" class="label label-light-grey">Default</a>
                <a href="#" class="label label-light-grey">Primary</a>
                <a href="#" class="label label-light-grey">Success</a>
            </div>
        </div>
        <div class="task-card-footer">
            <div class="task-card-meta-item"><i class="font-icon font-icon-comments-2"></i>10</div>
            <div class="task-card-meta-item"><i class="font-icon font-icon-clip"></i>24</div>
            <div class="avatar-preview avatar-preview-32">
                <a href="#">
                    <img src="img/photo-64-2.jpg" alt="">
                </a>
            </div>
        </div>
    </section><!--.task-card-->
</div>

score 0 · Answer 3 · answered Jul 12 '16 at 05:42

Here the solution... use bootstrap row and col's to acheive this, please follow below code.

<div class="row">
 <div class="col-lg-4 col-md-3 col-sm-6">
   <div class="card">
      <img class="card-img-top" data-src="..." alt="Card image cap">
      <div class="card-block">
         <h4 class="card-title">Card title</h4>
         <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
 </div>
</div>

I tried this, and it puts them in a single horizontal column. — Greg Gum, Jul 12 '16 at 05:43
Remove width from 'card' div and markup in the row and col's — Srikanth Reddy, Jul 12 '16 at 05:44

score 0 · Answer 4 · answered May 23 '20 at 03:08

Here's some code you can play with, based on Srikanth's suggestion. You can adjust the class="col-lg-3 col-md-4 col-sm-6 to have more or less cards display based on the width of your browser. I've also included a width display to show the pixels width.

Of course adjust the php loop quantity to test more or less number of cards.

<body>        
    <center>Width: <span id="width"></span></center>
    <br>
    <div class="container">            
        <div class="row">
<?php    
    for ($x = 0; $x <= 10; $x++) {
        $card = <<<EOF
            <div class="col-lg-3 col-md-4 col-sm-6" style="margin-bottom:10px;">
                <div class="card">
                     <img class="card-img-top" src="your_image.jpg" alt="Card image cap">
                     <div class="card-block" style="margin:5px;">
                         <h4 class="card-title">Card title {$x}</h4>
                         <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                         <center class="link">Join</center>
                     </div>      
                 </div>
            </div>
EOF;
      echo $card;
    }    
?>     
        </div>   
    </div>
<script>
$(window).resize(function() {
    var viewportWidth = $(window).width();
    $('#width').html(viewportWidth);    
});
</script>
</body>

AllanGH · Answer 5 · 2022-01-21T22:19:26.517

With version 5.1 Bootstrap has moved away from the CSS technique used in version 4. Here they provide an example how to make use of the Masonry plugin, see this snippet:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>

</head>

<body>
  <main class="container py-5">
    <h1>Bootstrap and Masonry</h1>
    <div class="row" data-masonry='{"percentPosition": true }'>
      <div class="col-sm-6 col-lg-4 mb-4">
        <div class="card">
          <svg class="bd-placeholder-img card-img-top" width="100%" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>

          <div class="card-body">
            <h5 class="card-title">Card title that wraps to a new line</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-4 mb-4">
        <div class="card p-3">
          <figure class="p-3 mb-0">
            <blockquote class="blockquote">
              <p>A well-known quote, contained in a blockquote element.</p>
            </blockquote>
            <figcaption class="blockquote-footer mb-0 text-muted">
              Someone famous in <cite title="Source Title">Source Title</cite>
            </figcaption>
          </figure>
        </div>
      </div>
      <div class="col-sm-6 col-lg-4 mb-4">
        <div class="card">
          <svg class="bd-placeholder-img card-img-top" width="100%" height="200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>

          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-4 mb-4">
        <div class="card bg-primary text-white text-center p-3">
          <figure class="mb-0">
            <blockquote class="blockquote">
              <p>A well-known quote, contained in a blockquote element.</p>
            </blockquote>
            <figcaption class="blockquote-footer mb-0 text-white">
              Someone famous in <cite title="Source Title">Source Title</cite>
            </figcaption>
          </figure>
        </div>
      </div>
      <div class="col-sm-6 col-lg-4 mb-4">
        <div class="card text-center">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This card has a regular title and short paragraph of text below it.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-4 mb-4">
        <div class="card">
          <svg class="bd-placeholder-img card-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Card image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Card image</text></svg>

        </div>
      </div>
      <div class="col-sm-6 col-lg-4 mb-4">
        <div class="card p-3 text-end">
          <figure class="mb-0">
            <blockquote class="blockquote">
              <p>A well-known quote, contained in a blockquote element.</p>
            </blockquote>
            <figcaption class="blockquote-footer mb-0 text-muted">
              Someone famous in <cite title="Source Title">Source Title</cite>
            </figcaption>
          </figure>
        </div>
      </div>
      <div class="col-sm-6 col-lg-4 mb-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
    </div>

  </main>
</body>

</html>

Interesting. That is the first I have heard of Masonry, but like you say, the Bootstrap docs show it being used with Bootstrap. — Greg Gum, Jan 24 '22 at 18:47

How to wrap (float) cards in bootstrap 4

5 Answers5