Most Recent Signups panel

This bootstrap snippet called "Most Recent Signups 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: panel,cards,bs4,users,groups,social-network

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-6">
            <div class="card widget-signups">
                <div class="card-body">
                    <h4 class="card-title">Most Recent Signups</h4>
                    <h6 class="card-subtitle">Magna cursus malesuada lacinia</h6>
            
                    <div class="actions actions--inverse">
                        <div class="actions__item">
                            <i data-toggle="dropdown" class="zmdi zmdi-more-vert" aria-expanded="false"></i>
                            <div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end" style="position: absolute; transform: translate3d(35px, 28px, 0px); top: 0px; left: 0px; will-change: transform;">
                                <a href="" class="dropdown-item">Refresh</a>
                                <a href="" class="dropdown-item">Manage Widgets</a>
                                <a href="" class="dropdown-item">Settings</a>
                            </div>
                        </div>
                    </div>
            
                    <div class="widget-signups__list">
                        <a data-toggle="tooltip" title="" href="" data-original-title="Jani Popovich"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar1.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Rosina Lamont"><div class="avatar-char">R</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Wava Vermeulen"><div class="avatar-char">W</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Delisa Sheilds"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar2.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Elsy Wilhoit"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar3.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Deanne Jeffreys"><div class="avatar-char">D</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="ddsds"><div class="avatar-char">F</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Shery Heredia"><div class="avatar-char">S</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Gaylord Coolbaugh"><div class="avatar-char">G</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Lyda Wortman"><div class="avatar-char">L</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Corene Langstaff"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar4.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Aracely Goudeau"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar5.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Matilde Weibel"><div class="avatar-char">M</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Clement Mayor"><div class="avatar-char">C</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Phil Wyatt"><div class="avatar-char">P</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Altagracia Manke"><div class="avatar-char">A</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Siu Derosier"><div class="avatar-char">S</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Nigel Shipe"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar6.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Bossman"><div class="avatar-char">B</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Crystal Markel"><div class="avatar-char">C</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Noman Nottage"><div class="avatar-char">N</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Melonie Carreira"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar7.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Shaneka Hoyle"><div class="avatar-char">S</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Milagro Evans"><div class="avatar-char">M</div></a>
                    </div>
                </div>
            </div>
        </div>
        
        
        
        <div class="col-md-6">
            <div class="card widget-signups">
                <div class="card-body">
                    <h4 class="card-title">Most Recent Signups</h4>
                    <h6 class="card-subtitle">Magna cursus malesuada lacinia</h6>
            
                    <div class="actions actions--inverse">
                        <div class="actions__item">
                            <i data-toggle="dropdown" class="zmdi zmdi-more-vert" aria-expanded="false"></i>
                            <div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end" style="position: absolute; transform: translate3d(35px, 28px, 0px); top: 0px; left: 0px; will-change: transform;">
                                <a href="" class="dropdown-item">Refresh</a>
                                <a href="" class="dropdown-item">Manage Widgets</a>
                                <a href="" class="dropdown-item">Settings</a>
                            </div>
                        </div>
                    </div>
            
                    <div class="widget-signups__list">
                        <a data-toggle="tooltip" title="" href="" data-original-title="Jani Popovich"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar1.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Rosina Lamont"><div class="avatar-char">R</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Wava Vermeulen"><div class="avatar-char">W</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Delisa Sheilds"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar2.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Elsy Wilhoit"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar3.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Deanne Jeffreys"><div class="avatar-char">D</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="ddsds"><div class="avatar-char">F</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Shery Heredia"><div class="avatar-char">S</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Gaylord Coolbaugh"><div class="avatar-char">G</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Lyda Wortman"><div class="avatar-char">L</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Corene Langstaff"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar4.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Aracely Goudeau"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar5.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Matilde Weibel"><div class="avatar-char">M</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Clement Mayor"><div class="avatar-char">C</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Phil Wyatt"><div class="avatar-char">P</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Altagracia Manke"><div class="avatar-char">A</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Siu Derosier"><div class="avatar-char">S</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Nigel Shipe"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar6.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Bossman"><div class="avatar-char">B</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Crystal Markel"><div class="avatar-char">C</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Noman Nottage"><div class="avatar-char">N</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Melonie Carreira"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar7.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Shaneka Hoyle"><div class="avatar-char">S</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Milagro Evans"><div class="avatar-char">M</div></a>
                    </div>
                </div>
            </div>
        </div>
        
        
        <div class="col-md-6">
            <div class="card widget-signups">
                <div class="card-body">
                    <h4 class="card-title">Most Recent Signups</h4>
                    <h6 class="card-subtitle">Magna cursus malesuada lacinia</h6>
            
                    <div class="actions actions--inverse">
                        <div class="actions__item">
                            <i data-toggle="dropdown" class="zmdi zmdi-more-vert" aria-expanded="false"></i>
                            <div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end" style="position: absolute; transform: translate3d(35px, 28px, 0px); top: 0px; left: 0px; will-change: transform;">
                                <a href="" class="dropdown-item">Refresh</a>
                                <a href="" class="dropdown-item">Manage Widgets</a>
                                <a href="" class="dropdown-item">Settings</a>
                            </div>
                        </div>
                    </div>
            
                    <div class="widget-signups__list">
                        <a data-toggle="tooltip" title="" href="" data-original-title="Jani Popovich"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar1.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Rosina Lamont"><div class="avatar-char">R</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Wava Vermeulen"><div class="avatar-char">W</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Delisa Sheilds"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar2.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Elsy Wilhoit"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar3.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Deanne Jeffreys"><div class="avatar-char">D</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="ddsds"><div class="avatar-char">F</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Shery Heredia"><div class="avatar-char">S</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Gaylord Coolbaugh"><div class="avatar-char">G</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Lyda Wortman"><div class="avatar-char">L</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Corene Langstaff"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar4.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Aracely Goudeau"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar5.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Matilde Weibel"><div class="avatar-char">M</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Clement Mayor"><div class="avatar-char">C</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Phil Wyatt"><div class="avatar-char">P</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Altagracia Manke"><div class="avatar-char">A</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Siu Derosier"><div class="avatar-char">S</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Nigel Shipe"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar6.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Bossman"><div class="avatar-char">B</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Crystal Markel"><div class="avatar-char">C</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Noman Nottage"><div class="avatar-char">N</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Melonie Carreira"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar7.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Shaneka Hoyle"><div class="avatar-char">S</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Milagro Evans"><div class="avatar-char">M</div></a>
                    </div>
                </div>
            </div>
        </div>
        
        
        <div class="col-md-6">
            <div class="card widget-signups">
                <div class="card-body">
                    <h4 class="card-title">Most Recent Signups</h4>
                    <h6 class="card-subtitle">Magna cursus malesuada lacinia</h6>
            
                    <div class="actions actions--inverse">
                        <div class="actions__item">
                            <i data-toggle="dropdown" class="zmdi zmdi-more-vert" aria-expanded="false"></i>
                            <div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end" style="position: absolute; transform: translate3d(35px, 28px, 0px); top: 0px; left: 0px; will-change: transform;">
                                <a href="" class="dropdown-item">Refresh</a>
                                <a href="" class="dropdown-item">Manage Widgets</a>
                                <a href="" class="dropdown-item">Settings</a>
                            </div>
                        </div>
                    </div>
            
                    <div class="widget-signups__list">
                        <a data-toggle="tooltip" title="" href="" data-original-title="Jani Popovich"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar1.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Rosina Lamont"><div class="avatar-char">R</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Wava Vermeulen"><div class="avatar-char">W</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Delisa Sheilds"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar2.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Elsy Wilhoit"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar3.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Deanne Jeffreys"><div class="avatar-char">D</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="ddsds"><div class="avatar-char">F</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Shery Heredia"><div class="avatar-char">S</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Gaylord Coolbaugh"><div class="avatar-char">G</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Lyda Wortman"><div class="avatar-char">L</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Corene Langstaff"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar4.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Aracely Goudeau"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar5.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Matilde Weibel"><div class="avatar-char">M</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Clement Mayor"><div class="avatar-char">C</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Phil Wyatt"><div class="avatar-char">P</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Altagracia Manke"><div class="avatar-char">A</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Siu Derosier"><div class="avatar-char">S</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Nigel Shipe"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar6.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Bossman"><div class="avatar-char">B</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Crystal Markel"><div class="avatar-char">C</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Noman Nottage"><div class="avatar-char">N</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Melonie Carreira"><img class="avatar-img" src="http:/bootdey.com/img/Content/avatar/avatar7.png" alt=""></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Shaneka Hoyle"><div class="avatar-char">S</div></a>
                        <a data-toggle="tooltip" title="" href="" data-original-title="Milagro Evans"><div class="avatar-char">M</div></a>
                    </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:#dcdcdc
}

.widget-signups__list {
    text-align: center
}

.widget-signups__list>a {
    vertical-align: top;
    margin: 4px 2px;
    display: inline-block
}

.widget-signups__list .avatar-char {
    background-color: #eee;
    color: #000
}

.widget-signups__list .avatar-char,
.widget-signups__list .avatar-img {
    margin: 0
}

.avatar-img {
    border-radius: 2px;
    width: 3rem;
    height: 3rem;
    margin-right: 1.2rem;
}

.avatar-char {
    line-height: 2.9rem;
    font-size: 1.2rem;
    text-align: center;
    font-style: normal;
}

.avatar-char, .avatar-img {
    border-radius: 2px;
    width: 3rem;
    height: 3rem;
    margin-right: 1.2rem;
}

.card-title {
    font-size: 1.25rem;
    line-height: 140%;
    margin-top: -5px;
}

.card-title {
    margin-bottom: 2.1rem;
}

.card-subtitle:not(:last-child) {
    margin-bottom: 2rem;
}

.card-subtitle {
    font-size: 1rem;
    font-weight: 400;
    margin-top: -1.45rem;
    line-height: 1.5;
}
                                    

This is the JS code for this bootstrap snippet

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

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
}) 

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 4.1.1

Created: Oct 10th, 08:07

Views: 1.3K

Rated 5/5 based on 3 reviews