Skip to content

Instantly share code, notes, and snippets.

@krutz27

krutz27/bootstrap and isotope

Created October 4, 2013 14:10
Show Gist options
  • Save krutz27/6826528 to your computer and use it in GitHub Desktop.
Save krutz27/6826528 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bootstrap and isotope
<div class="container">
<h1>Bootstrap and Isotope</h1>
<div id="posts" class="row">
<div id="1" class="post item span3">
<div class="well">
<h4>
<a href="#" target="_blank">Bootstrap</a>
</h4>
<img class="thumbnail" src="//lorempixel.com/150/180">
<div class="info">
<span class="badge">100</span>
<span class="badge">45</span>
</div>
</div>
</div>
<div id="2" class="post item span3">
<div class="well">
<h4>
<a href="${permalink_absolute}" target="_blank">Isotope</a>
</h4>
<img class="thumbnail" src="//lorempixel.com/150/120/nature">
<div class="info">
<span class="badge">100</span>
<span class="badge">45</span>
</div>
</div>
</div>
<div id="3" class="post item span3">
<div class="well">
<h4>
<a href="${permalink_absolute}" target="_blank">Layout</a>
</h4>
<img class="thumbnail" src="//lorempixel.com/150/150/people/1">
<div class="info">
<span class="badge">100</span>
<span class="badge">45</span>
</div>
</div>
</div>
<div id="4" class="post item span3">
<div class="well">
<h4>
<a href="${permalink_absolute}" target="_blank">Responsive</a>
</h4>
<img class="thumbnail" src="//lorempixel.com/150/120/technics">
<div class="info">
<span class="badge">100</span>
<span class="badge">45</span>
</div>
</div>
</div>
<div id="5" class="post item span3">
<div class="well">
<h4>
<a href="${permalink_absolute}" target="_blank">Sleek</a>
</h4>
<img class="thumbnail" src="//lorempixel.com/150/120/transport/1">
<div class="info">
<span class="badge">100</span>
<span class="badge">45</span>
</div>
</div>
</div>
<div id="6" class="post item span3">
<div class="well">
<h4>
<a href="${permalink_absolute}" target="_blank">Mobilicious</a>
</h4>
<img class="thumbnail" src="//lorempixel.com/150/120/sports">
<div class="info">
<span class="badge">100</span>
<span class="badge">45</span>
</div>
</div>
</div>
<div id="7" class="post item span3">
<div class="well">
<h4>
<a href="${permalink_absolute}" target="_blank">Geekness</a>
</h4>
<img class="thumbnail" src="//lorempixel.com/150/120/business/1">
<div class="info">
<span class="badge">100</span>
<span class="badge">45</span>
</div>
</div>
</div>
<div id="8" class="post item span3">
<div class="well">
<h4>
<a href="${permalink_absolute}" target="_blank">Sneaky Kitten</a>
</h4>
<img class="thumbnail" src="//placekitten.com/150/120" title="Can you believe it??">
<div class="info">
<span class="badge">120</span>
<span class="badge">46</span>
</div>
</div>
</div>
</div>
</div>
<footer><a href="http://bootply.com">Courtesy of Bootply.com</a></footer>
<div class="container">
<h1>Bootstrap and Isotope</h1>
<div id="posts" class="row">
<div id="1" class="post item span3">
<div class="well">
<h4>
<a href="#" target="_blank">Bootstrap</a>
</h4>
<img class="thumbnail" src="//lorempixel.com/150/180">
<div class="info">
<span class="badge">100</span>
<span class="badge">45</span>
</div>
</div>
</div>
<div id="2" class="post item span3">
<div class="well">
<h4>
<a href="${permalink_absolute}" target="_blank">Isotope</a>
</h4>
<img class="thumbnail" src="//lorempixel.com/150/120/nature">
<div class="info">
<span class="badge">100</span>
<span class="badge">45</span>
</div>
</div>
</div>
<div id="3" class="post item span3">
<div class="well">
<h4>
<a href="${permalink_absolute}" target="_blank">Layout</a>
</h4>
<img class="thumbnail" src="//lorempixel.com/150/150/people/1">
<div class="info">
<span class="badge">100</span>
<span class="badge">45</span>
</div>
</div>
</div>
<div id="4" class="post item span3">
<div class="well">
<h4>
<a href="${permalink_absolute}" target="_blank">Responsive</a>
</h4>
<img class="thumbnail" src="//lorempixel.com/150/120/technics">
<div class="info">
<span class="badge">100</span>
<span class="badge">45</span>
</div>
</div>
</div>
<div id="5" class="post item span3">
<div class="well">
<h4>
<a href="${permalink_absolute}" target="_blank">Sleek</a>
</h4>
<img class="thumbnail" src="//lorempixel.com/150/120/transport/1">
<div class="info">
<span class="badge">100</span>
<span class="badge">45</span>
</div>
</div>
</div>
<div id="6" class="post item span3">
<div class="well">
<h4>
<a href="${permalink_absolute}" target="_blank">Mobilicious</a>
</h4>
<img class="thumbnail" src="//lorempixel.com/150/120/sports">
<div class="info">
<span class="badge">100</span>
<span class="badge">45</span>
</div>
</div>
</div>
<div id="7" class="post item span3">
<div class="well">
<h4>
<a href="${permalink_absolute}" target="_blank">Geekness</a>
</h4>
<img class="thumbnail" src="//lorempixel.com/150/120/business/1">
<div class="info">
<span class="badge">100</span>
<span class="badge">45</span>
</div>
</div>
</div>
<div id="8" class="post item span3">
<div class="well">
<h4>
<a href="${permalink_absolute}" target="_blank">Sneaky Kitten</a>
</h4>
<img class="thumbnail" src="//placekitten.com/150/120" title="Can you believe it??">
<div class="info">
<span class="badge">120</span>
<span class="badge">46</span>
</div>
</div>
</div>
</div>
</div>
<footer><a href="http://bootply.com">Courtesy of Bootply.com</a></footer>
<div class="container">
<h1>Bootstrap and Isotope</h1>
<div id="posts" class="row">
<div id="1" class="post item span3">
<div class="well">
<h4>
<a href="#" target="_blank">Bootstrap</a>
</h4>
<img class="thumbnail" src="//lorempixel.com/150/180">
<div class="info">
<span class="badge">100</span>
<span class="badge">45</span>
</div>
</div>
</div>
<div id="2" class="post item span3">
<div class="well">
<h4>
<a href="${permalink_absolute}" target="_blank">Isotope</a>
</h4>
<img class="thumbnail" src="//lorempixel.com/150/120/nature">
<div class="info">
<span class="badge">100</span>
<span class="badge">45</span>
</div>
</div>
</div>
<div id="3" class="post item span3">
<div class="well">
<h4>
<a href="${permalink_absolute}" target="_blank">Layout</a>
</h4>
<img class="thumbnail" src="//lorempixel.com/150/150/people/1">
<div class="info">
<span class="badge">100</span>
<span class="badge">45</span>
</div>
</div>
</div>
<div id="4" class="post item span3">
<div class="well">
<h4>
<a href="${permalink_absolute}" target="_blank">Responsive</a>
</h4>
<img class="thumbnail" src="//lorempixel.com/150/120/technics">
<div class="info">
<span class="badge">100</span>
<span class="badge">45</span>
</div>
</div>
</div>
<div id="5" class="post item span3">
<div class="well">
<h4>
<a href="${permalink_absolute}" target="_blank">Sleek</a>
</h4>
<img class="thumbnail" src="//lorempixel.com/150/120/transport/1">
<div class="info">
<span class="badge">100</span>
<span class="badge">45</span>
</div>
</div>
</div>
<div id="6" class="post item span3">
<div class="well">
<h4>
<a href="${permalink_absolute}" target="_blank">Mobilicious</a>
</h4>
<img class="thumbnail" src="//lorempixel.com/150/120/sports">
<div class="info">
<span class="badge">100</span>
<span class="badge">45</span>
</div>
</div>
</div>
<div id="7" class="post item span3">
<div class="well">
<h4>
<a href="${permalink_absolute}" target="_blank">Geekness</a>
</h4>
<img class="thumbnail" src="//lorempixel.com/150/120/business/1">
<div class="info">
<span class="badge">100</span>
<span class="badge">45</span>
</div>
</div>
</div>
<div id="8" class="post item span3">
<div class="well">
<h4>
<a href="${permalink_absolute}" target="_blank">Sneaky Kitten</a>
</h4>
<img class="thumbnail" src="//placekitten.com/150/120" title="Can you believe it??">
<div class="info">
<span class="badge">120</span>
<span class="badge">46</span>
</div>
</div>
</div>
</div>
</div>
<footer><a href="http://bootply.com">Courtesy of Bootply.com</a></footer>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment