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

  • Select an option

    Learn more about clone URLs
  • Save justincarroll/5959773 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
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;
}
}

ghost commented Aug 19, 2014

Copy link
Copy Markdown

u guys are awesome!

@justincarroll

justincarroll commented Sep 8, 2014

Copy link
Copy Markdown
Author

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

@CydGoblin

CydGoblin commented Sep 12, 2014

Copy link
Copy Markdown

Is there a way to remove the gutter?

@samiyamoto

samiyamoto commented Sep 18, 2014

Copy link
Copy Markdown

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

KaitaniLabs commented Sep 29, 2014

Copy link
Copy Markdown

Thanks this is fantastic

@tamassy

tamassy commented Feb 6, 2015

Copy link
Copy Markdown

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

tamassy commented Feb 6, 2015

Copy link
Copy Markdown

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

@thehung2224

thehung2224 commented Feb 10, 2015

Copy link
Copy Markdown

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

@Wtower

Wtower commented Mar 25, 2015

Copy link
Copy Markdown

Working fiddle:
http://jsfiddle.net/Wtower/4gvyLaLw/

@erbilru

erbilru commented Jun 21, 2015

Copy link
Copy Markdown

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

@geekitude

geekitude commented Jul 25, 2015

Copy link
Copy Markdown

Thanks a LOT for sharing this !

@souviiik

souviiik commented Aug 1, 2015

Copy link
Copy Markdown

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

@ffadilaputra

ffadilaputra commented Oct 14, 2015

Copy link
Copy Markdown

Nice :D

@shelton13

shelton13 commented Apr 3, 2016

Copy link
Copy Markdown

awesome~~

@lilinu

lilinu commented Apr 21, 2016

Copy link
Copy Markdown

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

@andretimar

andretimar commented Nov 21, 2016

Copy link
Copy Markdown

Thank you for sharing this!

@khienlee

khienlee commented Dec 7, 2016

Copy link
Copy Markdown

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

@wvsant

wvsant commented Jan 25, 2017

Copy link
Copy Markdown

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

db-24 commented Mar 7, 2017

Copy link
Copy Markdown

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

mathewpaul commented Aug 25, 2017

Copy link
Copy Markdown

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