"bootstrap grid masonry with Css all bootstrap version"
Bootstrap 2.3.2 Snippet by djary

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="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- More info -->
<!-- http://www.nextbootstrap.com/2016/01/masonry-layout-for-bootstrap-3.html -->
<!-- https://gist.github.com/premregmi/b8162eebe67e467b147c -->
<div class="container">
<div class="col-sm-12">
<div class="masonry masonry-columns-3">
<div class="masonry-item">
<div class="media">
<img src="http://placehold.it/350x150" class="img-responsive center-block" alt="">
</div>
<h2 class="post-title">Getting Bootstrap Tabs to Play Nice with Masonry</h2>
<h6 class="post-info">October-8 2015 : Posted by Admin</h6>
<p>This is my template for using Masonry 3 with Bootusing Masonry 3 with Bootstrap, Desandrusing Masonry 3 with Bootstrap, Desandrusing Masonry 3 with Bootstrap, Desandrusing Masonry 3 with Bootstrap, Desandrstrap, Desandro Masonry & Twitter Bootstrap 3. How to use responsive twitter bootstrap & masonry together</p>
<a href="" title="" class="read-more">Read More</a>
<div class="tag-comment">
<span class="pull-left"><i class="fa fa-tags"></i> technology, web</span>
<span class="pull-right"><i class="fa fa-comments"></i> no comments</span>
</div>
</div>
<div class="masonry-item">
<div class="media">
<img src="http://placehold.it/450x150" class="img-responsive center-block" alt="">
</div>
<h2 class="post-title">Bootstrap Masonry</h2>
<h6 class="post-info">October-8 2015 : Posted by Admin</h6>
<p>Masonry CSS with Bootstrap, Build a Dynamic Grid with Salvattore and Bootstrap, Masonry with Bootstrap 3, How to create the masonry effects with just bootstrap 3 grid</p>
<a href="" title="" class="read-more">Read More</a>
<div class="tag-comment">
<span class="pull-left"><i class="fa fa-tags"></i> technology, web</span>
<span class="pull-right"><i class="fa fa-comments"></i> no comments</span>
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 Page =
====================================*/
.masonry{
display: block;
-webkit-column-gap: 2.25rem;
-moz-column-gap: 2.25rem;
column-gap: 12.25rem;
}
/* 5 columns */
.masonry.masonry-columns-5{
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
}
@media(max-width: 1170px){
.masonry.masonry-columns-5{
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
}
/*-4 columns------*/
.masonry.masonry-columns-4{
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
/*-3 columns------*/
.masonry.masonry-columns-3{
-webkit-column-count: 3;
-moz-column-count: 3;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

This is good,I could customize the template easily, Thanks...

Shobi () - 7 years ago - Reply 0