0

I want to make this card into masonry style in bootstrap, You can see the below column had the same height but I want fluid height, cards must had same margin like the blue line.I was trying on .card-columns and masonry style (column-count: 4), However it weren't working at all.

enter image description here

And this is my code

                                <div class="col-12 col-lg-8 col-xl-9 col-right">
                                <div class="row listing-card-container">
                                    
                                {% for loop %}
                                    <div class="col-sm-5 col-lg-5 col-xl-3 mb-4">

                                        <div class="card">
                                            <div class="position-relative shadow-sm">
                                                <a href="........"><img class="card-img-top"
                                                        src="...." alt="Card image cap"></a>

                                            </div>
                                            <div class="card-body">
                                                <a href="..link..">
                                                    <h6 class="mb-3 listing-heading ellipsis">
                                                        ..content..
                                                    </h6>
                                                </a>
                                                <footer>
                                                    <p class="text-muted text-small mb-0 font-weight-light">
                                                        ..date..</p>
                                                </footer>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}

                                </div>
                            </div>

Thanks.

Malody Gamor
  • 5
  • 5

1 Answers1

0

Looks like it is — https://w3bits.com/labs/flexbox-masonry/2/

.masonry { 
  display: flex;
  flex-flow: column wrap;
  max-height: 800px;
  margin-left: -8px; /* Adjustment for the gutter */
  width: 100%;
}

.masonry-brick {
  margin: 0 8px 8px 0; /* Some gutter */
}
futuster
  • 1
  • 1
    Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Pouria Hemi Nov 22 '20 at 06:40