bs4 new friends panel

This bootstrap snippet called "bs4 new friends panel" 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: card,list,friends,social-network,panel

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">
    <div class="row">
        <div class="col-md-12 col-lg-6">
            <div class="card">
                <div class="header">
                    <h2><strong>New</strong> Friends <small>Add new friend in last month</small></h2>
                </div>
                <div class="body">
                    <ul class="new_friend_list list-unstyled row">
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="http://bootdey.com/img/Content/avatar/avatar7.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Jackson</h6>
                                <small class="join_date">Today</small>
                            </a>
                        </li>
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="http://bootdey.com/img/Content/avatar/avatar6.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Aubrey</h6>
                                <small class="join_date">Yesterday</small>
                            </a>
                        </li>
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="http://bootdey.com/img/Content/avatar/avatar5.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Oliver</h6>
                                <small class="join_date">08 Nov</small>
                            </a>
                        </li>
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="http://bootdey.com/img/Content/avatar/avatar3.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Isabella</h6>
                                <small class="join_date">12 Dec</small>
                            </a>
                        </li>
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="http://bootdey.com/img/Content/avatar/avatar2.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Jacob</h6>
                                <small class="join_date">12 Dec</small>
                            </a>
                        </li>
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="http://bootdey.com/img/Content/avatar/avatar1.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Matthew</h6>
                                <small class="join_date">17 Dec</small>
                            </a>
                        </li>                            
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-lg-6">
            <div class="card">
                <div class="header">
                    <h2><strong>New</strong> Friends <small>Add new friend in last month</small></h2>
                </div>
                <div class="body">
                    <ul class="new_friend_list list-unstyled row">
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="http://bootdey.com/img/Content/avatar/avatar7.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Jackson</h6>
                                <small class="join_date">Today</small>
                            </a>
                        </li>
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="http://bootdey.com/img/Content/avatar/avatar5.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Aubrey</h6>
                                <small class="join_date">Yesterday</small>
                            </a>
                        </li>
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="http://bootdey.com/img/Content/avatar/avatar1.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Oliver</h6>
                                <small class="join_date">08 Nov</small>
                            </a>
                        </li>
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="http://bootdey.com/img/Content/avatar/avatar3.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Isabella</h6>
                                <small class="join_date">12 Dec</small>
                            </a>
                        </li>
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="http://bootdey.com/img/Content/avatar/avatar6.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Jacob</h6>
                                <small class="join_date">12 Dec</small>
                            </a>
                        </li>
                        <li class="col-lg-4 col-md-2 col-sm-6 col-4">
                            <a href="">
                                <img src="http://bootdey.com/img/Content/avatar/avatar2.png" class="img-thumbnail" alt="User Image">
                                <h6 class="users_name">Matthew</h6>
                                <small class="join_date">17 Dec</small>
                            </a>
                        </li>                            
                    </ul>
                </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-color: #f4f6f9;
}
.card {
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    background: #fff;
    border-radius: .1875rem;
    margin-bottom: 30px;
    border: 0;
    display: inline-block;
    position: relative;
    width: 100%;
    box-shadow: none;
}
.card .header {
    color: #424242;
    padding: 20px;
    position: relative;
    box-shadow: none;
}
.card .header h2 {
    color: #757575;
    position: relative;
}
.card .header h2:before {
    background: #6572b8;
}
.card .header h2 {
    font-size: 15px;
}
.card .header h2::before {
    position: absolute;
    width: 2px;
    height: 18px;
    left: -20px;
    top: 0;
    content: '';
}
.theme-purple .card .header h2 strong {
    color: #6572b8;
}
.card .header h2 small {
    color: #9e9e9e;
    line-height: 15px;
}
.card .body {
    color: #424242;
    font-weight: 400;
    padding: 20px;
}
.new_friend_list {
    margin-bottom: 0px;
}

.new_friend_list li .users_name {
    color: #424242;
    text-transform: capitalize;
}
.new_friend_list li .users_name {
    margin-top: 5px;
}
.new_friend_list li .users_name{
 margin-bottom: 0px;
}
.new_friend_list li .join_date {
    color: #757575;
}

a {
    outline: none !important;
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
}


















                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 4.1.1

Created: Oct 16th, 06:57

Views: 1.0K

Rated 5/5 based on 3 reviews