Bootstrap Snippet Masonry grid for Bootstrap 4 using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid">
    <div class="card-columns masonry-like">
        <div class="card">
            <img class="card-img-top border-0 rounded" src="https://d32swnnyen7sbd.cloudfront.net/projects/0001/79/thumb_78284_projects_home.jpeg" alt="Card image cap">
        </div>
        <div class="card">
            <img class="card-img-top border-0 rounded" src="https://d32swnnyen7sbd.cloudfront.net/projects/0001/79/thumb_78521_projects_home.jpeg" alt="Card image cap">
        </div>
        <div class="card">
            <div class="card-body bg-secondary text-white">
                <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">
            <img class="card-img-top border-0 rounded" src="https://d32swnnyen7sbd.cloudfront.net/projects/0001/79/thumb_78389_projects_home.jpeg" alt="Card image cap">
        </div>
        <div class="card">
            <img class="card-img-top border-0 rounded" src="https://d32swnnyen7sbd.cloudfront.net/projects/0001/79/thumb_78221_projects_home.jpeg" alt="Card image">
        </div>
        <div class="card">
            <img class="card-img-top border-0 rounded" src="https://d32swnnyen7sbd.cloudfront.net/projects/0001/79/thumb_78137_projects_home.jpeg" alt="Card image cap">
        </div>
        <div class="card">
            <div class="card-body bg-secondary text-white">
                <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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
      .masonry-like {
        -webkit-column-count: 4;
        -moz-column-count:4;
        -ms-column-count: 4;
        column-count: 4;
        -webkit-column-gap: 1em;
        -moz-column-gap: 1em;
        -ms-column-gap: 1em;
        column-gap: 1em;
        font-size: .85em;
        padding: 0;
      }
      .masonry-like.card {
        -webkit-transition:1s ease all;
        -moz-transition:1s ease all;
        -o-transition:1s ease all;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-shadow: 2px 2px 4px 0 #ccc;
      }
      
      .masonry-like.card img {
        max-width:100%;
        height: auto;
      }
      
      @media (min-width: 1440px) {
        .masonry-like {
          -moz-column-count: 7;
          -webkit-column-count: 7;
          -ms-column-count: 7;
          column-count: 7;
        }
      }
      @media (min-width: 1281px) and (max-width: 1439px) {
        .masonry-like {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Masonry grid for Bootstrap 4"
Bootstrap 4.1.1 Snippet by Garistar

Related: See More

Questions / Comments:

"Masonry grid for Bootstrap 4" Bootstrap 4.1.1 Snippet by Garistar

Related: See More

Questions / Comments:

"Masonry grid for Bootstrap 4"
Bootstrap 4.1.1 Snippet by Garistar