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

HTML code

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

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

CSS code

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


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

Similar snippets

Bootstrap snippet bs4 project list

bs4 project list

View

Bootstrap snippet bs4 new friends panel

bs4 new friends panel

View

Bootstrap snippet bs4 contact cards

bs4 contact cards

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.2

Created: Feb 15th 2015, 14:41

Views: 6.8K

Rated 5/5 based on 2 reviews