Latest blog posts

This bootstrap snippet called "Latest blog posts" 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: blog,post

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

<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>

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

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 -------------------------------------------------------------- */

                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Aug 3rd 2016, 16:29

Views: 181