"Blog Post Lists"
Bootstrap 3.0.0 Snippet by mbrondani

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-body"> <div class="post"> <h2> <a href="http://www.jquery2dotnet.com/2013/05/jquery-ui-themes-collection.html">JQuery UI Themes Collection</a></h2> <div class="post-header well well-sm"> <span class="post-author vcard">Posted by <a href="http://www.jquery2dotnet.com">Bhaumik Patel</a></span> <span class="post-timestamp">at <a class="timestamp-link" href="#" rel="bookmark" title="permanent link"><span class="glyphicon glyphicon-time"></span><abbr class="published" title="August 28, 2013"> 21:32</abbr></a></span> <span class="post-labels">Labels: <a class="label label-default" href="#" rel="tag">UI</a>, <a class="label label-default" href="#" rel="tag">Themes</a></span> <span class="post-comment-link pull-right"><a class="comment-link" href="#" onclick="">1 comment:</a></span> </div> <div> <span class="thumbnail" style="float:left; margin-right: 10px;"><img alt="jQuery UI Bootstrap" border="0" src="http://1.bp.blogspot.com/-28-WUilwQJk/UT3z4xNc9II/AAAAAAAACAM/lHJJPkszd88/s1600/jQuery+UI+Bootstrap.png" title="jQuery UI Bootstrap" class="img-responsive" width="300px" height="200px"></span> jQuery UI Themes Collection, jQuery UI Bootstrap, A Bootstrap-themed kickstart for jQuery UI widgets. </div> <a class="btn btn-primary" href="http://www.jquery2dotnet.com/2013/05/jquery-ui-themes-collection.html">Read More <span class="glyphicon glyphicon-chevron-right"></span></a> </div> <div class="post"> <h2> <a href="http://www.jquery2dotnet.com/2013/10/cool-navigation-design-using-css.html">Cool Navigation Design Using Css</a></h2> <div class="post-header well well-sm"> <span class="post-author vcard">Posted by <a href="http://www.jquery2dotnet.com">Bhaumik Patel</a></span> <span class="post-timestamp">at <a class="timestamp-link" href="#" rel="bookmark" title="permanent link"><span class="glyphicon glyphicon-time"></span><abbr class="published" title="August 28, 2013"> 21:32</abbr></a></span> <span class="post-labels">Labels: <a class="label label-default" href="#" rel="tag">CSS</a>, <a class="label label-default" href="#" rel="tag">Navigation</a></span> <span class="post-comment-link pull-right"><a class="comment-link" href="#" onclick="">5 comment:</a></span> </div> <div> <span class="thumbnail" style="float:left; margin-right: 10px;"><img alt="Cool vertical menu using CSS" border="0" src="http://2.bp.blogspot.com/-MiwoppLxsl4/UkxCxK07oAI/AAAAAAAACS8/rHB91jIvK2I/s1600/Cool+navigation+design+using+css.jpg" title="Cool vertical menu using CSS" class="img-responsive" width="300px" height="200px"></span> Cool vertical menu using CSS </div> <a class="btn btn-primary" href="http://www.jquery2dotnet.com/2013/10/cool-navigation-design-using-css.html">Read More <span class="glyphicon glyphicon-chevron-right"></span></a> </div> </div> </div> </div> </div> </div>
.post {padding: 10px;color: rgb(102, 102, 102);overflow: hidden;line-height: 2em;margin-bottom: 10px;margin: 10px;} .post h2 { margin-top:0px; } .panel-body {padding: 0px;}

Related: See More


Questions / Comments: