0

For some reason, when I try to use Bootstrap 4's card columns, the height of the shorter card will end up stretching to be equal with the one beside it. This only happens if I apply the 'row' class to the parent div. However, if I remove the 'row' class, the cards stack on top of each other in Chrome (this is a known bug, though I haven't found another solution to it yet) and don't stack on a smaller screen size in Safari. The other issue I've encountered is that if I apply 100% height to the cards, they won't stretch, but the card underneath it won't come up closer to the one above it so there's a big gap.

I thought the point of using card columns in this way was to achieve the Masonry look, but it doesn't seem to be behaving that way for me. I'm guessing it may have something to do with the flexbox properties on the 'row' class, but it seems like I need that in order for them to be laid out side by side in 2 columns.

Below is my code. Let me know if any of you have a solution to this. Thank you in advance!

.row {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:nowrap;
    flex-wrap:nowrap;
    margin-right: 30px;
    margin-left: 30px;
}

.card-columns .card {
    width: 320px !important;
    display: inline-block !important;
    height: auto;
}

.card-columns {
    -webkit-column-count: 2 !important;
    -moz-column-count: 2 !important;
    column-count: 2 !important;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
      <div class="card-columns row">
      <div class="d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered">
        <div class="my-3 p-3">
          <h3 class="display-6">TITLE</h3>
          <p class="lead-portfolio">Some text</p>
        </div>
      </div>
          
      <div class="d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered">
        <div class="my-3 p-3">
          <h3 class="display-6-dark">TITLE</h3>
          <p class="lead-portfolio-dark">Some text</p>
        </div>
      </div>
        </div>
        </div>
Pooja CL
  • 61
  • 2
  • 9
  • 1
    You are setting a fixed width on the `card`s, which is going to break the responsiveness and stack them on screens that are not wide enough. Also, you don't need `row`, see the [Bootstrap Documentation for Card Columns](https://getbootstrap.com/docs/4.0/components/card/#card-columns). – FluffyKitten Aug 12 '20 at 07:13

2 Answers2

1

you are using card-column and rowin one divuse row in parent divandcard-columnin child div use like this`

 <div class=row">
            <div class="card-columns">
                <?php
                // Create and check connection

                if ($result->num_rows > 0) {

                    // output card design
                    while($row = $result->fetch_assoc()) {

                        echo '<div class="card">
                                <img class="card-img-top" src="dance' . $row["id"] . '.jpg" alt="' . $row["name"] . '">
                                <div class="card-block">
                                    <h4 class="card-title">' . $row["name"] . '</h4>
                                    <p class="card-text">Text. Card content.</p>
                                </div>
                                <div class="card-footer text-muted">
                                    <ul class="list-inline">
                                        <li><i class="fa fa-user"></i></li>
                                        <li>14</li>
                                    </ul>
                                </div>
                              </div><!-- card -->';
                    }
                } else {
                    echo "0 results";
                }

                $conn->close();
                ?>
            </div><!-- container card-columns -->
        </div><!-- row -->`
Huzee
  • 114
  • 7
  • Thanks, this works too but am still experiencing a few issues which I listed in a comment to the first answer. – Pooja CL Aug 13 '20 at 04:43
1

You just need 2 changes to make it work.

  1. Don't set a fixed width on your cards - that will break the responsiveness and that's why they're not displaying properly (overlapping or stacking) on some screens.

  2. You don't need to use row because you are using card-columns - see the Bootstrap Documentation for Card Columns.

(You also don't need to set display:inline-block or height:auto for `.card-columns .card, but that is not what is causing the problem as it will work with them.)

You can see the working code in the snippet below:

.card-columns {
    -webkit-column-count: 2 !important;
    -moz-column-count: 2 !important;
    column-count: 2 !important;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
      <div class="card-columns">
      <div class="d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered">
        <div class="my-3 p-3">
          <h3 class="display-6">TITLE</h3>
          <p class="lead-portfolio">Some text</p>
        </div>
      </div>
          
      <div class="d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered">
        <div class="my-3 p-3">
          <h3 class="display-6-dark">TITLE</h3>
          <p class="lead-portfolio-dark">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
        </div>
      </div>
      <div class="d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered">
        <div class="my-3 p-3">
          <h3 class="display-6">TITLE</h3>
          <p class="lead-portfolio">Some text</p>
        </div>
      </div>
          
      <div class="d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered">
        <div class="my-3 p-3">
          <h3 class="display-6-dark">TITLE</h3>
          <p class="lead-portfolio-dark">Some text</p>
        </div>
      </div>
      <div class="d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered">
        <div class="my-3 p-3">
          <h3 class="display-6">TITLE</h3>
          <p class="lead-portfolio">Some text</p>
        </div>
      </div>
          
      <div class="d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered">
        <div class="my-3 p-3">
          <h3 class="display-6-dark">TITLE</h3>
          <p class="lead-portfolio-dark">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text </p>
        </div>
      </div>
      <div class="d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered">
        <div class="my-3 p-3">
          <h3 class="display-6">TITLE</h3>
          <p class="lead-portfolio">Some text</p>
        </div>
      </div>
          
      <div class="d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered">
        <div class="my-3 p-3">
          <h3 class="display-6-dark">TITLE</h3>
          <p class="lead-portfolio-dark">Some text</p>
        </div>
      </div>
      <div class="d-inline-block bg-dark mr-md-3 pt-3 pt-md-5 px-sm-3 pb-3 mb-3 pb-5 text-center text-white card centered">
        <div class="my-3 p-3">
          <h3 class="display-6">TITLE TITLE TITLE TITLE TITLE TITLE TITLE</h3>
          <p class="lead-portfolio">Some text</p>
        </div>
      </div>
          
      <div class="d-inline-block bg-light pt-3 pt-md-5 pb-5 px-sm-3 mb-3 text-center card centered">
        <div class="my-3 p-3">
          <h3 class="display-6-dark">TITLE</h3>
          <p class="lead-portfolio-dark">Some text</p>
        </div>
      </div>
        </div>
        </div>
FluffyKitten
  • 13,824
  • 10
  • 39
  • 52
  • Thank you! This works in Safari, but Chrome is still causing them to all stack in one column due to that bug (not sure what the solution is for it tho but I'll continue to test some things out). Also, there are these two issues: 1) They're not stacking on a smaller screen size, but rather just smaller versions side by side. How would I get them to stack at different breakpoints? 2) There's still a large gap between the cards vertically (i.e. the one below should be close to the top one, as in Masonry layout). Why is this not working as it shows on Bootstrap documentation? – Pooja CL Aug 13 '20 at 04:38
  • Actually, found a fix to the Chrome issue but the other issues still remain. – Pooja CL Aug 13 '20 at 04:55
  • @PoojaCL The columns is a different question, so for now we'll concentrate on getting the cards working. Does the snippet in my answer above not run for you in Chrome? That works perfectly for me in all browsers I tried it in, and fixes the problem in your code in the question - it looks exactly like the Masonry layout with no gapping etc. If it works in the snippet but not in your code, then there is something else in your code that is affecting it, but without seeing the rest of your code its hard to know what. It's most likely some other CSS. Did you remove the `.cards-column .card` CSS? – FluffyKitten Aug 13 '20 at 12:58
  • I realized I could fix the Chrome stacking issue with a fix I found online (widows: 1, orphans: 1), and I got them to stack at different breakpoints by changing the column count in the CSS. And yes, I removed the .cards-column .card CSS which I had. However, they're not behaving as Masonry does, and still have large gaps in between shorter columns, instead of being next to each other. See this screenshot of the actual working page: http://scrgrb.in/gou – Pooja CL Aug 14 '20 at 03:44
  • As you can see, the code in the snippet is working correctly, so there is something else affecting it that wasn't in the code you gave us. But we can only work with the code we have and I've got it working with it - in fact I can't get it to add the gaps like yours even when I try! So the code here is fine. You will need to try narrow it down to give us more information, because without knowing more about what could be causing the problem, there really isn't any more we can do to help. – FluffyKitten Aug 14 '20 at 03:53
  • I've created a full CodePen with the HTML, custom CSS, and the Bootstrap core CSS file imported. Let me know if you see anything that could be causing this. I'm not sure anything in my custom CSS would be, but it could be something in the Bootstrap CSS. The main issue seems to be that each row of cards is aligning to the top, instead of moving up underneath the ones above them: https://codepen.io/psha85/pen/ExKPJjp – Pooja CL Aug 14 '20 at 06:21
  • 1
    @PoojaCL The reason its not working is because you are setting up a card-columns div after every 2 cards. This creates a new row with the new columns. You only need one card-columns container. Take a look at the code in my question to see how it should be set up. – FluffyKitten Aug 14 '20 at 11:16
  • WOW, I knew it was gonna be something so simple like that and lo and behold, it was. It works now. Thank you soooo much!!! – Pooja CL Aug 14 '20 at 22:38