Bootstrap snippet: Recent blog post title

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: post,list,user,blog



<div class="container bootstrap snippet"> <div class="col-md-4 popular-post"> <h3 class="text-center text-danger"><b>Popular posts</b></h3> <article class="clearfix item item-odd"> <div class="teaser"> <div class="article-image"> <a class="image-link article-link" href="#"> <img class="img-circle img-responsive img-thumbnail" src="http://placehold.it/170x170/5bc0de"> <span class="overlay article-overlay"></span> </a> </div> <div class="article-info"> <div class="article-category"> <a href="#" class="text-danger">Category</a> </div> <h2 class="article-title"> <a class="article-link" href="#"> Popular post full title you can use this <span class="overlay article-overlay"></span> </a> </h2> <div class="article-summary"> Bootdey is a gallery of free bootstrap snippets, this is a description for no use lorem ipsum </div> </div> </div> </article> <article class="clearfix item item-odd"> <div class="teaser"> <div class="article-image"> <a class="image-link article-link" href="#"> <img class="img-circle img-responsive img-thumbnail" src="http://placehold.it/170x170/5bc0de"> <span class="overlay article-overlay"></span> </a> </div> <div class="article-info"> <div class="article-category"> <a href="#" class="text-danger">Category</a> </div> <h2 class="article-title"> <a class="article-link" href="#"> Popular post full title you can use this <span class="overlay article-overlay"></span> </a> </h2> <div class="article-summary"> Bootdey is a gallery of free bootstrap snippets, this is a description for no use lorem ipsum </div> </div> </div> </article> </div> <div class="col-md-8"> <article> <div class="line-item hf-item-odd clearfix"> <div class="content-image"> <a class="image-link article-link" href="#"> <img class="img-thumbnail" src="http://placehold.it/140x100/5bc0de"> <span class="overlay article-overlay"></span> </a> </div> <div class="hf-info"> <div class="hf-category"> <a href="#" class="text-danger">Category</a> </div> <h2 class="post-title"> <a class="article-link" href="#"> Post title Bootstrap Html Css Js Snippet <span class="overlay article-overlay"></span> </a> </h2> <div class="summary"> Bootdey is a gallery of free bootstrap snippets, this is a description for no use lorem ipsum all time... </div> </div> </div> </article> <article> <div class="line-item hf-item-odd clearfix"> <div class="content-image"> <a class="image-link article-link" href="#"> <img class="img-thumbnail" src="http://placehold.it/140x100/5bc0de"> <span class="overlay article-overlay"></span> </a> </div> <div class="hf-info"> <div class="hf-category"> <a href="#" class="text-danger">Category</a> </div> <h2 class="post-title"> <a class="article-link" href="#"> Post title Bootstrap Html Css Js Snippet <span class="overlay article-overlay"></span> </a> </h2> <div class="summary"> Bootdey is a gallery of free bootstrap snippets, this is a description for no use lorem ipsum all time... </div> </div> </div> </article> <article> <div class="line-item hf-item-odd clearfix"> <div class="content-image"> <a class="image-link article-link" href="#"> <img class="img-thumbnail" src="http://placehold.it/140x100/5bc0de"> <span class="overlay article-overlay"></span> </a> </div> <div class="hf-info"> <div class="hf-category"> <a href="#" class="text-danger">Category</a> </div> <h2 class="post-title"> <a class="article-link" href="#"> Post title Bootstrap Html Css Js Snippet <span class="overlay article-overlay"></span> </a> </h2> <div class="summary"> Bootdey is a gallery of free bootstrap snippets, this is a description for no use lorem ipsum all time... </div> </div> </div> </article> <article> <div class="line-item hf-item-odd clearfix"> <div class="content-image"> <a class="image-link article-link" href="#"> <img class="img-thumbnail" src="http://placehold.it/140x100/5bc0de"> <span class="overlay article-overlay"></span> </a> </div> <div class="hf-info"> <div class="hf-category"> <a href="#" class="text-danger">Category</a> </div> <h2 class="post-title"> <a class="article-link" href="#"> Post title Bootstrap Html Css Js Snippet <span class="overlay article-overlay"></span> </a> </h2> <div class="summary"> Bootdey is a gallery of free bootstrap snippets, this is a description for no use lorem ipsum all time... </div> </div> </div> </article> </div> </div>
.popular-post{ background:#DDDDDD; } .line-item { background: url("http://bootdey.com/img/Content/border-top-dotted.gif") repeat-x scroll left top rgba(0, 0, 0, 0); margin: 0 0 0 30px; padding: 25px 0 15px; } .content-image { float: right; margin-bottom: 10px; margin-left: 25px; margin-top: 5px; } .post-title { margin-bottom: 7px; margin-top: 3px; } .post-title, post-title a { font-size: 18px; line-height: 20px; } .summary { color: #666; font-size: 14px; line-height: 18px; margin-bottom: 8px; } .teaser { margin-bottom: 32px; margin-top: 19px; text-align: center; } .article-info { padding: 0 29px; } .item-odd .article-category { margin-top: 8px; } .article-title { margin-bottom: 7px; margin-top: 3px; } .article-title, .subfeatured .article-title a { font-size: 18px; font-weight: normal; line-height: 20px; } .article-summary { color: #666; font-size: 14px; line-height: 16px; max-height: 64px; overflow: hidden; }
Dey-Dey

Recent blog post title

Dey-Dey
  Jul 7th 2014, 01:34
3.9K Views