Recent blog post title

This bootstrap snippet called "Recent blog post title" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: post,list,user,blog

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab


                        
<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="https://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="https://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="https://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="https://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="https://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="https://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>                    

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview


                        
.popular-post{
    background:#DDDDDD;    
}

.line-item  {
    background: url("https://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;
}                    
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.1.1

Created: Jul 5th 2014, 22:13

Views: 5.6K

Rated 5/5 based on 2 reviews