Lates Blog Post Details

This bootstrap snippet called "Lates Blog Post Details" 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="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>

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

Views: 170