Skip to content

Instantly share code, notes, and snippets.

@justincarroll

justincarroll/bootstrap-masonry-template.htm

Last active August 15, 2020 16:48
Show Gist options
  • Save justincarroll/5959773 to your computer and use it in GitHub Desktop.
Save justincarroll/5959773 to your computer and use it in GitHub Desktop.
Download ZIP
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.
Raw
bootstrap-masonry-template.htm
<!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>
Raw
script.js
// 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');
});
Raw
style.css
/* 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;
}
}
@khienlee
Copy link

khienlee commented Dec 7, 2016

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

@wvsant
Copy link

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
Copy link

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
Copy link

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