Bootstrap snippet: Latest blog posts

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: blog,post



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="row"> <div class="col-sm-8"> <div class="title"><span>Latest Blog</span></div> <div class="row"> <div class="col-md-6"> <div class="thumbnail blog-list"> <a href="#"><img src="http://www.grehon.com/mimity/v2.0/images/demo/blog1.jpg" alt=""></a> <div class="caption"> <h5>Lorem ipsum dolor sit amet consectetur</h5> <small> <span><i class="fa fa-clock-o"></i> Mar 27, 14</span> <span><i class="fa fa-user"></i> <a href="">Admin</a></span> <span><i class="fa fa-tag"></i> <a href="">Tags</a></span> </small> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <a href="#" class="btn "><i class="fa fa-long-arrow-right"></i> Read More</a> </div> </div> </div> <div class="col-md-6"> <div class="thumbnail blog-list"> <a href="#"><img src="http://www.grehon.com/mimity/v2.0/images/demo/blog2.jpg" alt=""></a> <div class="caption"> <h5>Lorem ipsum dolor sit amet consectetur</h5> <small> <span><i class="fa fa-clock-o"></i> Mar 27, 14</span> <span><i class="fa fa-user"></i> <a href="">Admin</a></span> <span><i class="fa fa-tag"></i> <a href="">Tags</a></span> </small> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <a href="#" class="btn "><i class="fa fa-long-arrow-right"></i> Read More</a> </div> </div> </div> <div class="col-md-6"> <div class="thumbnail blog-list"> <a href="#"><img src="http://www.grehon.com/mimity/v2.0/images/demo/blog3.jpg" alt=""></a> <div class="caption"> <h5>Lorem ipsum dolor sit amet consectetur</h5> <small> <span><i class="fa fa-clock-o"></i> Mar 27, 14</span> <span><i class="fa fa-user"></i> <a href="">Admin</a></span> <span><i class="fa fa-tag"></i> <a href="">Tags</a></span> </small> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <a href="#" class="btn "><i class="fa fa-long-arrow-right"></i> Read More</a> </div> </div> </div> <div class="col-md-6"> <div class="thumbnail blog-list"> <a href="blog-detail.html"><img src="http://www.grehon.com/mimity/v2.0/images/demo/blog4.jpg" alt=""></a> <div class="caption"> <h5>Lorem ipsum dolor sit amet consectetur</h5> <small> <span><i class="fa fa-clock-o"></i> Mar 27, 14</span> <span><i class="fa fa-user"></i> <a href="">Admin</a></span> <span><i class="fa fa-tag"></i> <a href="">Tags</a></span> </small> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <a href="#" class="btn "><i class="fa fa-long-arrow-right"></i> Read More</a> </div> </div> </div> <div class="col-xs-12 text-center"> <ul class="pagination"> <li class="disabled"><a href="#">«</a></li> <li class="disabled"><a href="#">‹</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">›</a></li> <li><a href="#">»</a></li> </ul> </div> </div> </div> <div class="col-sm-4"> <div class="title"><span>Categories</span></div> <ul class="list-group blog-nav"> <li class="list-group-item">» <a href="blog.html">News</a></li> <li class="list-group-item">» <a href="blog.html">Events</a></li> <li class="list-group-item">» <a href="blog.html">Promotions</a></li> </ul> <div class="title"><span>Archives</span></div> <ul class="list-group blog-nav"> <li class="list-group-item">» <a href="blog.html">January 2016</a></li> <li class="list-group-item">» <a href="blog.html">February 2016</a></li> <li class="list-group-item">» <a href="blog.html">March 2016</a></li> <li class="list-group-item">» <a href="blog.html">April 2016</a></li> <li class="list-group-item">» <a href="blog.html">May 2016</a></li> </ul> </div> </div>
body{margin-top:20px;} .title { border-bottom: 3px solid #90caf9; } .title { font-size: 18px; line-height: 1; margin: 0 0 10px; padding: 0; } .title span { border-bottom: 3px solid #1e88e5; } .title span { display: inline-block; margin-bottom: -3px; padding-bottom: 10px; } /* -------------------------------------------------------------- Blog -------------------------------------------------------------- */ .blog-list { padding-bottom: 25px } .blog-list:hover { border: 1px solid #aaa } .blog-list .caption { color: #666 } .blog-list .caption h5 { font-size: 16px } .blog-list img { width: 100% } .blog-list .btn { float: right } .blog-list small { display: block; margin-bottom: 5px } .blog-list small, .blog-list small a { color: silver } .blog-list small span { margin-right: 7px } .blog-list .caption a.btn:hover { text-decoration: underline } .blog-info { font-size: 12px; margin-bottom: 10px } .blog-info, .blog-info a { color: #cfcfcf } .blog-info i { margin-left: 10px } .blog-info i:first-child { margin-left: 0 } .blog-nav .list-group-item { padding-left: 10px; border: 0; border-bottom: 1px dotted #ccc; background: transparent } .blog-detail-content { margin-bottom: 30px } .blog-detail-thumb img { width: 100% } /* -------------------------------------------------------------- End of Blog -------------------------------------------------------------- */
Dey-Dey

Latest blog posts

Dey-Dey
  Aug 3rd, 16:29
26 Views