How to create a Pinterest-like grid in Bootstrap v4.0 without jQuery (black with same width & different height)

Question

Is it possible to create a Pinterest-like grid with Bootstrap 4?
I know there are jQuery Plugins available, but is there no way without them? I mean pure css.

Note : This is not like that or a duplicate question. But please try to understand my question first. I have to do without jQyery. Just do it from CSS, and do not even use Column in CSS because the order of the list is changed from the Column. i hope you understand my question.

This is what I have now:

But I want this :

My current code:

 <!DOCTYPE html>
        <html>
        <head>
            <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
            <style type="text/css">
                .items{
                    background-color: #999;
                    margin: 5px 0;
                }
            </style>
        </head>
        <body>
            <div class="row">
                <div class="col-4"><div class="items">1<br><br><br></div></div>
                <div class="col-4"><div class="items">2<br><br></div></div>
                <div class="col-4"><div class="items">3<br><br><br><br></div></div>
                <div class="col-4"><div class="items">4<br><br></div></div>
                <div class="col-4"><div class="items">5<br></div></div>
                <div class="col-4"><div class="items">6<br><br></div></div>
                <div class="col-4"><div class="items">7<br><br><br><br></div></div>
                <div class="col-4"><div class="items">8<br><br></div></div>
                <div class="col-4"><div class="items">9<br><br><br><br></div></div>
                <div class="col-4"><div class="items">10<br><br></div></div>
                <div class="col-4"><div class="items">11<br><br><br><br></div></div>
                <div class="col-4"><div class="items">12<br><br></div></div>
            </div>
        </body>
        </html>

This is not like that or a duplicate question. But please try to understand my question. I have to do without jQyery. Just do it from CSS, and do not even use Column in CSS because the order of the list is changed from the Column. i hope you understand my question. please remove duplicate flag from this questions ..! — Bhavik Hirani, Feb 03 '18 at 12:41
Read the other Q&A. This has already **been asked and answered** several times. The CSS only method is using css3 columns, and yes, it changes the order and there is no workaround. — Carol Skelly, Feb 03 '18 at 13:04

WebDevBooster · Answer 1 · 2018-02-03T12:14:41.333

To achieve that effect in Bootstrap 4 you can use card-columns like shown below.

This gets the job done with native Bootstrap 4 classes alone and doesn't require any custom css.

Click the "run code snippet" button below and expand to full page:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card-columns">
    <div class="card">
        <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.</p>
        </div>
        <img class="card-img-bottom" src="https://placeimg.com/900/300/animals" alt="Card image cap">
    </div>
    <div class="card">
        <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.</p>
        </div>
        <img class="card-img-bottom" src="https://placeimg.com/900/600/animals" alt="Card image cap">
    </div>
    <div class="card">
        <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>
        <img class="card-img-bottom" src="https://placeimg.com/900/200/arch" alt="Card image cap">
    </div>
    <div class="card">
        <img class="card-img-top" src="https://placeimg.com/900/400/nature" alt="Card image cap">
        <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 class="card">
        <img class="card-img-top" src="https://placeimg.com/900/300/arch" alt="Card image cap">
        <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 class="card">
        <img class="card-img-top" src="https://placeimg.com/940/500/animals" alt="Card image cap">
        <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 class="card">
        <img class="card-img-top" src="https://placeimg.com/900/900/people" alt="Card image cap">
        <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 class="card">
        <img class="card-img-top" src="https://placeimg.com/940/800/nature" alt="Card image cap">
        <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 class="card">
        <img class="card-img" src="https://placeimg.com/940/300/tech" alt="Card image">
    </div>
    <div class="card bg-primary text-white text-center p-3">
        <blockquote class="blockquote mb-0">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
            <footer class="blockquote-footer">
                <small>
                    Someone famous in <cite title="Source Title">Source Title</cite>
                </small>
            </footer>
        </blockquote>
    </div>
    <div class="card text-center">
        <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 class="card p-3 text-right">
        <blockquote class="blockquote mb-0">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer class="blockquote-footer">
                <small class="text-muted">
                    Someone famous in <cite title="Source Title">Source Title</cite>
                </small>
            </footer>
        </blockquote>
    </div>
    <div class="card">
        <div class="card-body">
            <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 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 p-3">
        <blockquote class="blockquote mb-0 card-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer class="blockquote-footer">
                <small class="text-muted">
                    Someone famous in <cite title="Source Title">Source Title</cite>
                </small>
            </footer>
        </blockquote>
    </div>
</div>

it seems not working anymore in 4.4.1 of bootstrap – Asqan Feb 11 '20 at 23:50 — Asqan, Feb 11 '20 at 23:50

score -1 · Answer 2 · answered Feb 03 '18 at 12:05

-1

You can try Mansonry, which doesn't need jQuery.

answered Feb 03 '18 at 12:05

Vitor Carvalho

24
2

Sreekanth Reddy Balne · Answer 3 · 2018-02-03T12:15:34.140

Is this what you are looking for? Pure css

Pinterest uses javascript to achieve this layout. For a long time I have been thinking to replicate it with pure CSS and now here it is:

body{
    background:#eee;
    font-family:BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif
}
h1{
    width:90%;
    background:#fff;
    padding:0.5em;
    text-align:center;
    border-radius:5px;
    font-size:15px;
    font-weight:600;
    margin:0 auto
}
.container{
    column-width:250px;
    column-gap:15px;
    max-width:100%;
    margin:30px auto
}
.container>div{
    display:inline-block;
    column-break-inside:avoid;
    background:#fff;
    border-radius:5px;
    margin-bottom:1em;
    font-weight:bold;
    color:#666
}
.container>div>div{
    padding:1em 1em 1em 1em
}
img{
    width:100%;
    height:auto;
    object-fit:cover;
    border-radius:5px 5px 0 0
}

<body style='background:#eee;'>
   <div class='container'>
      <div>
         <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRGbwy5hxX7ff_m0Ihj0mrzf8XVbdakQ_boPtH-0aekfsUOyB1z' />
         <div><span>aaaaa</span></div>
      </div>
      <div>
         <img src='http://www.dailypioneer.com/uploads/main/mn_story_image/T330_158723_Untitled-2.gif' />
         <div><span>aaaaa</span></div>
      </div>
      <div>
         <img src='http://www.tollymasala.com/TollyAdmin/gallery/756/watermark/ankita-Spicy-Actress-In-Rain-cute-photo-stills.jpg' />
         <div><span>aaaaa</span></div>
      </div>
      <div>
         <img src='http://ste.india.com/sites/default/files/2016/12/30/559004-301216-gs-tch-10.jpg' />
         <div><span>aaaaa</span></div>
      </div>
      <div>
         <img src='http://www.newscrab.com/wp-content/uploads/2017/12/Parineeti-Chopra.jpg' />
         <div><span>aaaaa</span></div>
      </div>
      <div>
         <img src='https://dailypost.in/wp-content/uploads/2017/08/27-29.jpg' />
         <div><span>aaaaa</span></div>
      </div>
      <div>
         <img src='http://us.sulekhalive.com/images/photos/thumbnailfull/photos-2013-12-30-2-39-17.jpg' />
         <div><span>aaaaa.png</span></div>
      </div>
      <div>
         <img src='http://www.gulte.com/content/2016/11/news/1478346624-1517.jpg' />
         <div><span>aaaaa.jpg</span></div>
      </div>
      <div>
         <img src='https://i.pinimg.com/736x/35/10/c2/3510c27bfc544b3331717b2b03d6407a--heroines-cinema.jpg' />
         <div><span>aaaaa</span></div>
      </div>
      <div>
         <img src='http://www.telugusquare.com/wp-content/uploads/2015/06/Rakul-Preet-Singh-14.jpg' />
         <div><span>aaaaa</span></div>
      </div>
   </div>
</body>

How to create a Pinterest-like grid in Bootstrap v4.0 without jQuery (black with same width & different height)

3 Answers3