-1

I'm trying to achieve this:

masonry grid Using Bootstrap 4, Js,Css and obviously HTML. I did not succeed to find something similar on SO,

but I found this on the Bootstrap 4 documentation, but I'm not sure if this is the right thing: Bootstrap 4 Cards

Can someone enlight me on the best way to create this layout?

Thanks

EDIT:This is not the same as other questions you can see, even if this question has been marked as duplicated. On my example, the 'cards' are not sitting in proper columns, but each one has his own width. Please mark the difference between my question and others

EDIT2: I made it work. https://youtu.be/CvmeGvKbPlM

yofisim
  • 372
  • 1
  • 6
  • 17

2 Answers2

4

As @Yan said you can use .card-columns to archive a Masonry layout, you can find more information in the Boostrap 4 docs.

There's how the code should look:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<div class="container">
<div class="card-columns">
  <div class="card">
    <img class="card-img" src="http://via.placeholder.com/450x350" alt="Card image cap">
  </div>
  <div class="card">
    <img class="card-img" src="http://via.placeholder.com/150x150" alt="Card image cap">
  </div>
  <div class="card">
    <img class="card-img" src="http://via.placeholder.com/250x150" alt="Card image cap">
  </div>
  <div class="card">
    <img class="card-img" src="http://via.placeholder.com/250x150" alt="Card image cap">
  </div>
    <div class="card">
    <img class="card-img" src="http://via.placeholder.com/150x150" alt="Card image cap">
  </div>
  <div class="card">
    <img class="card-img" src="http://via.placeholder.com/350x150" alt="Card image cap">
  </div>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
Troyer
  • 6,765
  • 3
  • 34
  • 62
  • 1
    Thank you for your answer. So Cards are the right solution? Just to be sure, because on your example all the columns are resized, not matter what width you specified. On my picture, each element is bigger/smaller than the other. For instance, the first row of picture, it's a col-5 (paris), col-4(marseille), and col-3 (lyon). I don't see this layout replicated on your example. Can you enlight me? – yofisim May 22 '18 at 07:51
  • @yofisim if you want to use only Boostrap 4, yes, it's the closest way to get a masonry layout. – Troyer May 22 '18 at 07:54
  • I succeed to do it, not using cards, but I can't post an answer now. I did it using no gutters on row, and defining columns by size md-3,md-4,md-5,md-6 etc. I then defined properly, the gutters I wanted. It is working like a charm but thanks for your help! Here is a video of the solution https://youtu.be/CvmeGvKbPlM – yofisim May 22 '18 at 12:28
1

Bootstrap Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns.

Check this working masonry code with cards!

 <div class="card-columns">

            <div class="card">
               Card 1
            </div>

            <div class="card">
              Card 2
            </div>

            <div class="card">
               Card 3
            </div>

   </div>
Yan
  • 353
  • 1
  • 4
  • 13
  • I hate to be “that guy”, but this should be a comment not an answer. And you should really try to stay away from link only answers because [link-rot](https://en.m.wikipedia.org/wiki/Link_rot) is a real thing 2018 – soulshined May 22 '18 at 07:21
  • Duly noted! Thanks for the feedback – Yan May 22 '18 at 07:24