twitter-bootstrapflexboxbootstrap-cards

Tangled cards in Bootstrap

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!!!

Solution

  • 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 }'>

    Output

    enter image description here