contacts card

This bootstrap snippet called "contacts card" 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: contacts,card,list,contact,people,image

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="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container profile">
    <div class="col-md-9">
        <div class="panel panel-profile">
        <div class="panel-heading overflow-h">
            <h2 class="panel-title heading-sm pull-left"><i class="fa fa-tasks"></i>Contacts</h2>
            <a href="#" class="btn-u btn-brd btn-brd-hover btn-u-dark btn-u-xs pull-right">View All</a>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-sm-6">
                    <div class="profile-blog blog-border">
                        <img class="rounded-x" src="https://bootdey.com/img/Content/user_2.jpg" alt="">
                        <div class="name-location">
                            <strong>Maria Snort</strong>
                            <span><i class="fa fa-map-marker"></i><a href="#">California,</a> <a href="#">US</a></span>
                        </div>
                        <div class="clearfix margin-bottom-20"></div>    
                        <p>Lorem Donec non dignissim eros. Mauris faucibus turpis volutpat sagittis rhoncus. Pellentesque et rhoncus sapien, sed ullamcorper justo.</p>
                        <hr>
                        <ul class="list-inline share-list">
                            <li><i class="fa fa-bell"></i><a href="#">12 Notifications</a></li>
                            <li><i class="fa fa-group"></i><a href="#">54 Followers</a></li>
                            <li><i class="fa fa-twitter"></i><a href="#">Retweet</a></li>
                        </ul>
                    </div>
                </div>        
    
                <div class="col-sm-6">
                    <div class="profile-blog blog-border">
                        <img class="rounded-x" src="https://bootdey.com/img/Content/user_1.jpg" alt="">
                        <div class="name-location">
                            <strong>Mark McClerk</strong>
                            <span><i class="fa fa-map-marker"></i><a href="#">Moscow,</a> <a href="#">Russia</a></span>
                        </div>
                        <div class="clearfix margin-bottom-20"></div>    
                        <p>Donec non dignissim eros. Mauris faucibus turpis volutpat sagittis rhoncus. Pellentesque et rhoncus sapien, sed ullamcorper justo.</p>
                        <hr>
                        <ul class="list-inline share-list">
                            <li><i class="fa fa-bell"></i><a href="#">37 Notifications</a></li>
                            <li><i class="fa fa-group"></i><a href="#">46 Followers</a></li>
                            <li><i class="fa fa-twitter"></i><a href="#">Retweet</a></li>
                        </ul>
                    </div> 
                </div>    
            </div>
        </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{
    margin-top:20px;
    background:#eee;
}	

.profile .panel-profile {
    border: none;
    margin-bottom: 0;
    box-shadow: none;
}

.profile .panel-heading {
    color: #585f69;
    background: #fff;
    padding: 7px 15px;
    border-bottom: solid 3px #f7f7f7;
}

.overflow-h {
    overflow: hidden;
}

.panel-heading {
    color: #fff;
    padding: 5px 15px;
}

.profile .panel-title {
    font-size: 16px;
}

.profile .profile-blog {
    padding: 20px;
    background: #fff;
}

.profile .blog-border {
    border: 1px solid #f0f0f0;
}

.profile .profile-blog img {
    float: left;
    width: 50px;
    height: 50px;
    margin-right: 20px;
}

.rounded-x {
    border-radius: 50% !important;
}

.profile .name-location {
    overflow: hidden;
}

.profile .name-location strong {
    color: #555;
    display: block;
    font-size: 16px;
}

.profile .name-location span a {
    color: #555;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.share-list {
    margin-bottom: 0;
}


.list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
}

.list-inline li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    font-size:11px;
}

.share-list li i {
    color: #72c02c;
    margin-right: 5px;
}                
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.2

Created: Feb 15th 2015, 14:41

Views: 6.7K

Rated 5/5 based on 2 reviews