Tangled cards in Bootstrap

Question

I use Bootstrap 5 and I want the cards to be together I know you may not have noticed so I mean with this photo... enter image description here

this is my code for this

<div class="row row-cols-2">
        <div class="col">
            <div class="card mb-3">
                <div class="row g-0">
                    <div class="col-md-4">
                        <img src="https://i.picsum.photos/id/1074/200/200.jpg?hmac=o1fm0jR_nE4yW-N80QpSF9JfnnRYhRraqaTaTbCGe1c"
                             alt="...">
                    </div>
                    <div class="col-md-8">
                        <div class="card-body ms-3">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">This is a wider 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>
        </div>
        <div class="col">
            <div class="card mb-3">
                <div class="row g-0">
                    <div class="col-md-4">
                        <img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI"
                             alt="...">
                    </div>
                    <div class="col-md-8">
                        <div class="card-body ms-3">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">This is a wider 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>
        </div>
        <div class="col">
            <div class="card mb-3">
                <div class="row g-0">
                    <div class="col-md-4">
                        <img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"
                             alt="...">
                    </div>
                    <div class="col-md-8">
                        <div class="card-body ms-3">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">This is a wider 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>
        </div>
    </div>

how to do this ??? Almost like Instagram Explorer?

Thanks in advance!!!

You want the remove the space between the cards? – thelovekesh Jun 20 '21 at 17:01 — thelovekesh, Jun 20 '21 at 17:01

score 0 · Accepted Answer · answered Jun 20 '21 at 17:10

The result you are thinking of can be achieved by integrating Masonry with the Bootstrap grid system and cards component.

Masonry is not included in Bootstrap so you have to include it manually in your system.

Include this script tag in your webpage

<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" async></script>

After including this you have to add data-masonry='{"percentPosition": true }' like this in the to the .row wrapper,

<div class="row row-cols-2" data-masonry='{"percentPosition": true }'>

Tangled cards in Bootstrap

1 Answers1

Output