Bootstrap snippet: Lates Blog Post Details

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="container"> <div class="row"> <div class="col-sm-8 blog-detail-content"> <div class="title"><span>Lorem ipsum dolor sit amet consectetur</span></div> <div class="blog-info"> <i class="fa fa-clock-o"></i> Mar 27, 16 <i class="fa fa-user"></i> <a href="blog.html">Admin</a> <i class="fa fa-flag"></i> <a href="blog.html">Tags</a> </div> <div class="thumbnail blog-detail-thumb"> <img src="http://www.grehon.com/mimity/v2.0/images/demo/blog-detail.jpg" alt=""> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat...</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </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> </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

Lates Blog Post Details

Dey-Dey
  Aug 3rd, 16:31
27 Views