Instantly share code, notes, and snippets.

Embed
What would you like to do?
This is my template for using Masonry 3 with Bootstrap 3. For those of you who follow this gist a lot has changed since Bootstrap 2.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Masonry Template</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Caption:400,700">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<!-- Header -->
<header id="header" class="container">
<h1>Bootstrap 3 + Masonry 3</h1>
<p class="lead">
This is deployed with the <code>#grid</code> div fluid (that is, it has no Bootstrap <code>.container</code> class). To make it fixed simply add the <code>.container</code> class to it. Use the media queries in <strong>style.css</strong> to change the grid's post widths and margins.
</p>
<hr>
</header>
<!-- Posts -->
<!-- <div id="grid" class="container"> -->
<div id="grid">
<div id="posts">
<div class="post">
<img src="http://placehold.it/600x400"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http://placehold.it/400x600"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http://placehold.it/600x400"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http://placehold.it/400x600"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post cs2">
<img src="http://placehold.it/600x400"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http://placehold.it/400x600"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http://placehold.it/600x400"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http://placehold.it/400x600"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http://placehold.it/600x400"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http://placehold.it/400x600"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http://placehold.it/600x400"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
<div class="post">
<img src="http://placehold.it/400x600"><br>
<br>
<strong>Title Goes Here</strong><br>
<small>Category</small>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer" class="container">
<hr>
<p>Thanks for watching!</p>
</footer>
</body>
</html>
// Load is used to ensure all images have been loaded, impossible with document
jQuery(window).load(function () {
// Takes the gutter width from the bottom margin of .post
var gutter = parseInt(jQuery('.post').css('marginBottom'));
var container = jQuery('#posts');
// Creates an instance of Masonry on #posts
container.masonry({
gutter: gutter,
itemSelector: '.post',
columnWidth: '.post'
});
// This code fires every time a user resizes the screen and only affects .post elements
// whose parent class isn't .container. Triggers resize first so nothing looks weird.
jQuery(window).bind('resize', function () {
if (!jQuery('#posts').parent().hasClass('container')) {
// Resets all widths to 'auto' to sterilize calculations
post_width = jQuery('.post').width() + gutter;
jQuery('#posts, body > #grid').css('width', 'auto');
// Calculates how many .post elements will actually fit per row. Could this code be cleaner?
posts_per_row = jQuery('#posts').innerWidth() / post_width;
floor_posts_width = (Math.floor(posts_per_row) * post_width) - gutter;
ceil_posts_width = (Math.ceil(posts_per_row) * post_width) - gutter;
posts_width = (ceil_posts_width > jQuery('#posts').innerWidth()) ? floor_posts_width : ceil_posts_width;
if (posts_width == jQuery('.post').width()) {
posts_width = '100%';
}
// Ensures that all top-level elements have equal width and stay centered
jQuery('#posts, #grid').css('width', posts_width);
jQuery('#grid').css({'margin': '0 auto'});
}
}).trigger('resize');
});
/* Default tags and Bootstrap classes */
body {
font-family: 'PT Sans Caption', sans-serif;
color: #000099;
padding: 40px 0;
}
.lead { padding: 40px 0; }
/* Grid */
#posts { margin: 30px auto 0; }
.post {
margin: 0 0 50px;
text-align: center;
width: 100%;
}
.post img { padding: 0 15px; width: 100%; }
#grid.container .post img { padding: 0; }
/* Medium devices */
@media (min-width: 768px) {
#grid > #posts .post { width: 335px; }
#grid > #posts .post.cs2 { width: 100%; }
.post img { padding: 0; }
}
/* Medium devices */
@media (min-width: 992px) {
#grid > #posts .post { width: 445px; }
#grid > #posts .post.cs2 { width: 100%; }
}
/* Large devices */
@media (min-width: 1200px) {
#grid > #posts .post { width: 346px; }
#grid > #posts .post.cs2 { width: 742px; }
}
/* Large devices min-width (1200px) + a .post margin (50px) * 2 (100px) = 1300px */
/* 1300px gives me the clearance I need to keep the margins of the entire #grid (the
bleed if you will) the same width as the .post margins posts (50px). Basically I'm
being really picky about whitespace. If you don't care, no problem, just delete this.
Can this be done with Masonry options? */
@media (min-width: 1300px) {
#grid {
left: -50px;
padding-left: 50px;
padding-right: 50px;
position: relative;
}
#grid.container {
left: auto;
padding-left: 15px;
padding-right: 15px;
}
}
@alopes

This comment has been minimized.

alopes commented Aug 15, 2013

This was really helpful. Thanks!

@justincarroll

This comment has been minimized.

Owner

justincarroll commented Oct 9, 2013

Hey, thanks! Glad to help. Sorry I didn't see this comment sooner!

@aherok

This comment has been minimized.

aherok commented Feb 18, 2014

Any advantages over this http://codepen.io/anon/pen/eIxCp ?

@nelsontubaina

This comment has been minimized.

nelsontubaina commented Aug 19, 2014

u guys are awesome!

@justincarroll

This comment has been minimized.

Owner

justincarroll commented Sep 8, 2014

Just a heads up this has been updated for Bootstrap 3 and a lot has changed. @aherok I have no idea, sorry.

@Turqueso

This comment has been minimized.

Turqueso commented Sep 12, 2014

Is there a way to remove the gutter?

@samiyamoto

This comment has been minimized.

samiyamoto commented Sep 18, 2014

Hey Justin
Just a quick question, if i want to use that grid system but i want to have 3 columns like so
25%
50%
25%

is it possible with this grid ?

@KaitaniLabs

This comment has been minimized.

KaitaniLabs commented Sep 29, 2014

Thanks this is fantastic

@tamassy

This comment has been minimized.

tamassy commented Feb 6, 2015

This is a really good way to put the two things together.
But why it says Bootstrap but than it doesn't use bootstrap grid classes?
I think it would be perfect to use the xs md etc etc classes what work with masonry together, if that it's possible.

@tamassy

This comment has been minimized.

tamassy commented Feb 6, 2015

From my research i think the class panel would be better.

@thehung2224

This comment has been minimized.

thehung2224 commented Feb 10, 2015

Thanks for this code but why it says Bootstrap but than it doesn't use bootstrap grid classes?

@Wtower

This comment has been minimized.

Wtower commented Mar 25, 2015

@erbilru

This comment has been minimized.

erbilru commented Jun 21, 2015

:D anyone can show me bootstrap class on this code ? i don't see any container , row , etc...

@geekitude

This comment has been minimized.

geekitude commented Jul 25, 2015

Thanks a LOT for sharing this !

@souviiik

This comment has been minimized.

souviiik commented Aug 1, 2015

Why inclusion of AngularJS library messed up everything? I tried including it just after jquery.js

@ffadilaputra

This comment has been minimized.

ffadilaputra commented Oct 14, 2015

Nice :D

@shelton13

This comment has been minimized.

shelton13 commented Apr 3, 2016

awesome~~

@lilinu

This comment has been minimized.

lilinu commented Apr 21, 2016

Thanks for sharing! It helped me a lot. Best wishes

@Z3ll3R

This comment has been minimized.

Z3ll3R commented Nov 21, 2016

Thank you for sharing this!

@khienlee

This comment has been minimized.

khienlee commented Dec 7, 2016

Thanks for sharing! I was wondering how you perfectly centered the masonry grid?

@wvsant

This comment has been minimized.

wvsant commented Jan 25, 2017

Good job. After hours of trying others, I got this to work with bootstrap thumbnail posts in half an hour (jquery 1.12.4, bootstrap 3.3.7, masonry 3.3.2). Thanks for sharing.

@db-24

This comment has been minimized.

db-24 commented Mar 7, 2017

Hi and thank you for posting this, it's excellent. However, I'm having problems with overlapping images in IE8 & 9. Appears .imagesLoaded js can fix this issue but i cannot work out where I add the code in your example... could you please advise if you have a moment??

@mathewpaul

This comment has been minimized.

mathewpaul commented Aug 25, 2017

I am a beginner. Can someone tell me where to create those image+description+links to appear automatically on home grid? Say e.g. 100 posts.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment