rating contacts

Bootstrap snippet. rating contacts, this snippet 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,social,user,list

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 rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="col-md-12 bootstrap snippets">
<div class="x_panel">
    <div class="x_content">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xs-12" style="text-align:center;">
                <ul class="pagination pagination-split">
                    <li><a href="#">A</a>
                    </li>
                    <li><a href="#">B</a>
                    </li>
                    <li><a href="#">C</a>
                    </li>
                    <li><a href="#">D</a>
                    </li>
                    <li><a href="#">E</a>
                    </li>
                    <li>...</li>
                    <li><a href="#">W</a>
                    </li>
                    <li><a href="#">X</a>
                    </li>
                    <li><a href="#">Y</a>
                    </li>
                    <li><a href="#">Z</a>
                    </li>
                </ul>
            </div>
            <div class="clearfix"></div>
            <div class="col-md-4 col-sm-4 col-xs-12 animated fadeInDown">
                <div class="well profile_view">
                    <div class="col-sm-12">
                        <h4 class="brief"><i>Digital Strategist</i></h4>
                        <div class="left col-xs-7">
                            <h2>Nicole Pearson</h2>
                            <p><strong>About: </strong> Web Designer / UI. </p>
                            <ul class="list-unstyled">
                                <li><i class="fa fa-phone"></i> Address: </li>
                            </ul>
                        </div>
                        <div class="right col-xs-5 text-center">
                            <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-circle img-responsive">
                        </div>
                    </div>
                    <div class="col-xs-12 bottom text-center">
                        <div class="col-xs-12 col-sm-6 emphasis">
                            <p class="ratings">
                                <a>4.0</a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star-o"></span></a>
                            </p>
                        </div>
                        <div class="col-xs-12 col-sm-6 emphasis">
                            <button type="button" class="btn btn-success btn-xs"> 
                                <i class="fa fa-user"></i> 
                                <i class="fa fa-comments-o"></i>  
                            </button>
                            <button type="button" class="btn btn-primary btn-xs"> 
                                <i class="fa fa-user"></i> View Profile 
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12 animated fadeInDown">
                <div class="well profile_view">
                    <div class="col-sm-12">
                        <h4 class="brief"><i>Digital Strategist</i></h4>
                        <div class="left col-xs-7">
                            <h2>Nicole Pearson</h2>
                            <p><strong>About: </strong> Web Designer / UI. </p>
                            <ul class="list-unstyled">
                                <li><i class="fa fa-phone"></i> Address: </li>
                            </ul>
                        </div>
                        <div class="right col-xs-5 text-center">
                            <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="img-circle img-responsive">
                        </div>
                    </div>
                    <div class="col-xs-12 bottom text-center">
                        <div class="col-xs-12 col-sm-6 emphasis">
                            <p class="ratings">
                                <a>4.0</a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star-o"></span></a>
                            </p>
                        </div>
                        <div class="col-xs-12 col-sm-6 emphasis">
                            <button type="button" class="btn btn-success btn-xs"> 
                                <i class="fa fa-user"></i> 
                                <i class="fa fa-comments-o"></i>  
                            </button>
                            <button type="button" class="btn btn-primary btn-xs"> 
                                <i class="fa fa-user"></i> View Profile 
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12 animated fadeInDown">
                <div class="well profile_view">
                    <div class="col-sm-12">
                        <h4 class="brief"><i>Digital Strategist</i></h4>
                        <div class="left col-xs-7">
                            <h2>Nicole Pearson</h2>
                            <p><strong>About: </strong> Web Designer / UI. </p>
                            <ul class="list-unstyled">
                                <li><i class="fa fa-phone"></i> Address: </li>
                            </ul>
                        </div>
                        <div class="right col-xs-5 text-center">
                            <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="" class="img-circle img-responsive">
                        </div>
                    </div>
                    <div class="col-xs-12 bottom text-center">
                        <div class="col-xs-12 col-sm-6 emphasis">
                            <p class="ratings">
                                <a>4.0</a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star-o"></span></a>
                            </p>
                        </div>
                        <div class="col-xs-12 col-sm-6 emphasis">
                            <button type="button" class="btn btn-success btn-xs"> 
                                <i class="fa fa-user"></i> 
                                <i class="fa fa-comments-o"></i>  
                            </button>
                            <button type="button" class="btn btn-primary btn-xs"> 
                                <i class="fa fa-user"></i> View Profile 
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12 animated fadeInDown">
                <div class="well profile_view">
                    <div class="col-sm-12">
                        <h4 class="brief"><i>Digital Strategist</i></h4>
                        <div class="left col-xs-7">
                            <h2>Nicole Pearson</h2>
                            <p><strong>About: </strong> Web Designer / UI. </p>
                            <ul class="list-unstyled">
                                <li><i class="fa fa-phone"></i> Address: </li>
                            </ul>
                        </div>
                        <div class="right col-xs-5 text-center">
                            <img src="https://bootdey.com/img/Content/avatar/avatar4.png" alt="" class="img-circle img-responsive">
                        </div>
                    </div>
                    <div class="col-xs-12 bottom text-center">
                        <div class="col-xs-12 col-sm-6 emphasis">
                            <p class="ratings">
                                <a>4.0</a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star-o"></span></a>
                            </p>
                        </div>
                        <div class="col-xs-12 col-sm-6 emphasis">
                            <button type="button" class="btn btn-success btn-xs"> 
                                <i class="fa fa-user"></i> 
                                <i class="fa fa-comments-o"></i>  
                            </button>
                            <button type="button" class="btn btn-primary btn-xs"> 
                                <i class="fa fa-user"></i> View Profile 
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12 animated fadeInDown">
                <div class="well profile_view">
                    <div class="col-sm-12">
                        <h4 class="brief"><i>Digital Strategist</i></h4>
                        <div class="left col-xs-7">
                            <h2>Nicole Pearson</h2>
                            <p><strong>About: </strong> Web Designer / UI. </p>
                            <ul class="list-unstyled">
                                <li><i class="fa fa-phone"></i> Address: </li>
                            </ul>
                        </div>
                        <div class="right col-xs-5 text-center">
                            <img src="https://bootdey.com/img/Content/avatar/avatar5.png" alt="" class="img-circle img-responsive">
                        </div>
                    </div>
                    <div class="col-xs-12 bottom text-center">
                        <div class="col-xs-12 col-sm-6 emphasis">
                            <p class="ratings">
                                <a>4.0</a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star-o"></span></a>
                            </p>
                        </div>
                        <div class="col-xs-12 col-sm-6 emphasis">
                            <button type="button" class="btn btn-success btn-xs"> 
                                <i class="fa fa-user"></i> 
                                <i class="fa fa-comments-o"></i>  
                            </button>
                            <button type="button" class="btn btn-primary btn-xs"> 
                                <i class="fa fa-user"></i> View Profile 
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12 animated fadeInDown">
                <div class="well profile_view">
                    <div class="col-sm-12">
                        <h4 class="brief"><i>Digital Strategist</i></h4>
                        <div class="left col-xs-7">
                            <h2>Nicole Pearson</h2>
                            <p><strong>About: </strong> Web Designer / UI. </p>
                            <ul class="list-unstyled">
                                <li><i class="fa fa-phone"></i> Address: </li>
                            </ul>
                        </div>
                        <div class="right col-xs-5 text-center">
                            <img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt="" class="img-circle img-responsive">
                        </div>
                    </div>
                    <div class="col-xs-12 bottom text-center">
                        <div class="col-xs-12 col-sm-6 emphasis">
                            <p class="ratings">
                                <a>4.0</a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star"></span></a>
                                <a href="#"><span class="fa fa-star-o"></span></a>
                            </p>
                        </div>
                        <div class="col-xs-12 col-sm-6 emphasis">
                            <button type="button" class="btn btn-success btn-xs"> 
                                <i class="fa fa-user"></i> 
                                <i class="fa fa-comments-o"></i>  
                            </button>
                            <button type="button" class="btn btn-primary btn-xs"> 
                                <i class="fa fa-user"></i> View Profile 
                            </button>
                        </div>
                    </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;}

.profile_view {
    margin-bottom: 20px;
    display: inline-block;
    width: 100%;
        -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.3);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.3);
}
.profile_view:hover {
    -webkit-box-shadow: 0 14px 12px 0 rgba(0,0,0,0.17),0 20px 40px 0 rgba(0,0,0,0.3);
    box-shadow: 0 14px 12px 0 rgba(0,0,0,0.17),0 20px 40px 0 rgba(0,0,0,0.3);    
}
.well.profile_view {
    padding: 10px 0 0;
}

.well.profile_view .divider {
    border-top: 1px solid #e5e5e5;
    padding-top: 5px;
    margin-top: 5px;
}

.well.profile_view .ratings {
    margin-bottom: 0;
}

.pagination.pagination-split li {
    display: inline-block;
    margin-right: 3px;
}

.pagination.pagination-split li a {
    border-radius: 4px;
    color: #768399;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.well.profile_view {
    background: #fff;
}

.well.profile_view .bottom {
    margin-top: -20px;
    background: #F2F5F7;
    padding: 9px 0;
    border-top: 1px solid #E6E9ED;
}

.well.profile_view .left {
    margin-top: 20px;
}

.well.profile_view .left p {
    margin-bottom: 3px;
}

.well.profile_view .right {
    margin-top: 0px;
    padding: 10px;
}

.well.profile_view .img-circle {
    border: 1px solid #E6E9ED;
    padding: 2px;
}

.well.profile_view h2 {
    margin: 5px 0;
    font-size:14px;
    font-weight:bold;
}

.well.profile_view .ratings {
    text-align: left;
    font-size: 16px;
}

.well.profile_view .brief {
    margin: 0;
    font-weight: 300;
}

.profile_left {
    background: white;
}
                                    

Similar snippets

Bootstrap snippet bs4 social profile

bs4 social profile

View

Bootstrap snippet bs4 Trending Articles

bs4 Trending Articles

View

Bootstrap snippet bs4 project list with progress

bs4 project list with progress

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Mar 11th 2016, 18:02

Views: 6.0K

Rated 5/5 based on 16 reviews