user blog widget

This bootstrap snippet user blog widget 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,user,widget

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-6">
        <div class="widget widget-blog">
            <div class="widget-blog-cover">
                <img src="https://lorempixel.com/400/200/sports/1/" alt="">
            </div>
            <div class="widget-blog-author">
                <div class="widget-blog-author-image">
                    <img src="https://bootdey.com/img/Content/user_1.jpg" alt="">
                </div>
                <div class="widget-blog-author-info">
                    <h5 class="m-t-0 m-b-1">Serhiy Navin</h5>
                    <p class="text-muted m-0 f-s-11">Front End Designer</p>
                </div>
            </div>
            <div class="widget-blog-content">
                <h5>Lorem ipsum dolor sit amec adipiscing elit.</h5>
                <p>
                    Nulla condimentum sodales urna, at consequat urna laoreet non. Aenean id porttitor odio, id elementum augue. Donec rhoncus semper mi.
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="widget widget-blog">
            <div class="widget-blog-cover">
                <img src="https://lorempixel.com/400/200/nature/2/" alt="">
            </div>
            <div class="widget-blog-author">
                <div class="widget-blog-author-image">
                    <img src="https://bootdey.com/img/Content/user_2.jpg" alt="">
                </div>
                <div class="widget-blog-author-info">
                    <h5 class="m-t-0 m-b-1">Serhiy Navin</h5>
                    <p class="text-muted m-0 f-s-11">Front End Designer</p>
                </div>
            </div>
            <div class="widget-blog-content">
                <h5>Lorem ipsum dolor sit amec adipiscing elit.</h5>
                <p>
                    Nulla condimentum sodales urna, at consequat urna laoreet non. Aenean id porttitor odio, id elementum augue. Donec rhoncus semper mi.
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="widget widget-blog">
            <div class="widget-blog-cover">
                <img src="https://lorempixel.com/400/200/business/2/" alt="">
            </div>
            <div class="widget-blog-author">
                <div class="widget-blog-author-image">
                    <img src="https://bootdey.com/img/Content/user_3.jpg" alt="">
                </div>
                <div class="widget-blog-author-info">
                    <h5 class="m-t-0 m-b-1">Serhiy Navin</h5>
                    <p class="text-muted m-0 f-s-11">Front End Designer</p>
                </div>
            </div>
            <div class="widget-blog-content">
                <h5>Lorem ipsum dolor sit amec adipiscing elit.</h5>
                <p>
                    Nulla condimentum sodales urna, at consequat urna laoreet non. Aenean id porttitor odio, id elementum augue. Donec rhoncus semper mi.
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="widget widget-blog">
            <div class="widget-blog-cover">
                <img src="https://lorempixel.com/400/200/technics/7/" alt="">
            </div>
            <div class="widget-blog-author">
                <div class="widget-blog-author-image">
                    <img src="https://bootdey.com/img/Content/user_6.jpg" alt="">
                </div>
                <div class="widget-blog-author-info">
                    <h5 class="m-t-0 m-b-1">Serhiy Navin</h5>
                    <p class="text-muted m-0 f-s-11">Front End Designer</p>
                </div>
            </div>
            <div class="widget-blog-content">
                <h5>Lorem ipsum dolor sit amec adipiscing elit.</h5>
                <p>
                    Nulla condimentum sodales urna, at consequat urna laoreet non. Aenean id porttitor odio, id elementum augue. Donec rhoncus semper mi.
                </p>
            </div>
        </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{
background:#eee;
margin-top:20px;
}

.widget {
    border: none;
    box-shadow: 0 2px 0 rgba(0,0,0,.07);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 20px;
    position: relative;
    background: #fff;
    padding: 20px;
    display: block;
}

.widget-blog-cover {
    overflow: hidden;
    padding-top: 60%;
}

.widget-blog-cover, .widget-stat-header {
    position: relative;
    border-radius: 5px 5px 0 0;
    margin: -20px -20px 20px;
}

.animation-grow-hover, .widget-blog .widget-blog-cover img {
    transition: all .1s ease-in-out;
}

.widget-blog-cover img:hover{
    max-width: 110%;
    min-height: 110%;
    margin-left: -5%;
    margin-top: -5%;    
}

.widget-blog-cover img {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    max-width: 100%;
    min-height: 100%;
}

.widget-blog-author {
    margin: -20px -20px 0;
    padding: 10px 20px;
}

.widget-blog-author-image {
    float: left;
    margin-top: -30px;
    padding: 5px;
    border-radius: 70px;
    width: 70px;
    height: 70px;
    background: #fff;
    position: relative;
}

.widget-blog-author-image img {
    max-width: 100%;
    border-radius: 70px;
}

.text-muted {
    color: #aab3ba;
}
.f-s-11 {
    font-size: 11px!important;
}
.m-0 {
    margin: 0!important;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Aug 30th 2015, 23:56

Views: 2.4K