<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <!-- Row start --> <div class="row"> <div class="col-12"> <div class="card mb-4"> <div class="card-header"> <h5 class="card-title">Contact List</h5> </div> <div class="card-body"> <!-- Search container start --> <div class="search-container d-sm-block d-none"> <input type="text" class="form-control" placeholder="Search" /> <i class="icon-search"></i> </div> <!-- Search container end --> <!-- Contacts Container Start --> <div class="contacts-container mt-3"> <div class="contact-list"> <div class="bg-primary px-3 py-2 m-3 mb-1 rounded-2"> A </div> <a href="https://www.bootstrap.gallery/" target="_blank" class="px-3 py-2 d-flex align-items-center gap-3"> <img src="https://www.bootstrap.gallery/dummy-images/user.png" alt="Bootstrap Gallery" class="img-3x rounded-circle" /> <div class="flex-1 flex flex-col"> <h6 class="fw-bold m-0">Angelica Ramos</h6> <small class="opacity-50">Software Engineer</small> </div> </a> <a href="https://www.bootstrap.gallery/" target="_blank" class="px-3 py-2 d-flex align-items-center gap-3"> <img src="https://www.bootstrap.gallery/dummy-images/user2.png" alt="Bootstrap Gallery" class="img-3x rounded-circle" /> <div class="flex-1 flex flex-col"> <h6 class="fw-bold m-0">Brenden Wagner</h6> <small class="opacity-50">Chief Operating Officer</small> </div> </a> <a href="https://www.bootstrap.gallery/" target="_blank" class="px-3 py-2 d-flex align-items-center gap-3"> <img src="https://www.bootstrap.gallery/dummy-images/user3.png" alt="Bootstrap Themes" class="img-3x rounded-circle" /> <div class="flex-1 flex flex-col"> <h6 class="fw-bold m-0">Cedric Kelly</h6> <small class="opacity-50">Senior Javascript Developer</small> </div> </a> <a href="https://www.bootstrap.gallery/" target="_blank" class="px-3 py-2 d-flex align-items-center gap-3"> <img src="https://www.bootstrap.gallery/dummy-images/user4.png" alt="Bootstrap Dashboards" class="img-3x rounded-circle" /> <div class="flex-1 flex flex-col"> <h6 class="fw-bold m-0">Howard Hatfield</h6> <small class="opacity-50">Senior Marketing Designer</small> </div> </a> <a href="https://www.bootstrap.gallery/" target="_blank" class="px-3 py-2 d-flex align-items-center gap-3"> <img src="https://www.bootstrap.gallery/dummy-images/user4.png" alt="Bootstrap Themes" class="img-3x rounded-circle" /> <div class="flex-1 flex flex-col"> <h6 class="fw-bold m-0">Jenette Caldwell</h6> <small class="opacity-50">Senior Marketing Designer</small> </div> </a> <a href="https://www.bootstrap.gallery/" target="_blank" class="px-3 py-2 d-flex align-items-center gap-3"> <img src="https://www.bootstrap.gallery/dummy-images/user5.png" alt="Bootstrap Dashboards" class="img-3x rounded-circle" /> <div class="flex-1 flex flex-col"> <h6 class="fw-bold m-0">Olivia Liang</h6> <small class="opacity-50">Systems Administrator</small> </div> </a> <div class="bg-primary px-3 py-2 m-3 mb-1 rounded-2"> B </div> <a href="https://www.bootstrap.gallery/" target="_blank" class="px-3 py-2 d-flex align-items-center gap-3"> <img src="https://www.bootstrap.gallery/dummy-images/user.png" alt="Bootstrap Themes" class="img-3x rounded-circle" /> <div class="flex-1 flex flex-col"> <h6 class="fw-bold m-0">Angelica Ramos</h6> <small class="opacity-50">Software Engineer</small> </div> </a> <a href="https://www.bootstrap.gallery/" target="_blank" class="px-3 py-2 d-flex align-items-center gap-3"> <img src="https://www.bootstrap.gallery/dummy-images/user2.png" alt="Bootstrap Admin Themes" class="img-3x rounded-circle" /> <div class="flex-1 flex flex-col"> <h6 class="fw-bold m-0">Paul Byrd</h6> <small class="opacity-50">Marketing Designer</small> </div> </a> <a href="https://www.bootstrap.gallery/" target="_blank" class="px-3 py-2 d-flex align-items-center gap-3"> <img src="https://www.bootstrap.gallery/dummy-images/user3.png" alt="Bootstrap Gallery" class="img-3x rounded-circle" /> <div class="flex-1 flex flex-col"> <h6 class="fw-bold m-0">Sonya Frost</h6> <small class="opacity-50">Senior Javascript Developer</small> </div> </a> <div class="bg-primary px-3 py-2 m-3 mb-1 rounded-2"> C </div> <a href="https://www.bootstrap.gallery/" target="_blank" class="px-3 py-2 d-flex align-items-center gap-3"> <img src="https://www.bootstrap.gallery/dummy-images/user5.png" alt="Bootstrap Admin Themes" class="img-3x rounded-circle" /> <div class="flex-1 flex flex-col"> <h6 class="fw-bold m-0">Angelica Ramos</h6> <small class="opacity-50">Technical Author</small> </div> </a> <a href="https://www.bootstrap.gallery/" target="_blank" class="px-3 py-2 d-flex align-items-center gap-3"> <img src="https://www.bootstrap.gallery/dummy-images/user1.png" alt="Bootstrap Gallery" class="img-3x rounded-circle" /> <div class="flex-1 flex flex-col"> <h6 class="fw-bold m-0">Brenden Wagner</h6> <small class="opacity-50">Javascript Developer</small> </div> </a> </div> </div> <!-- Contacts Container End --> </div> </div> </div> </div> <!-- Row end --> </div>

@import "https://www.bootstrap.gallery/demos/helpdesk-admin-panel/assets/fonts/icomoon/style.css"; .body { font-size: 13px; } h5 { margin: 0 0 5px 0; font-size: 15px; } p { margin: 0 0 5px 0; font-size: 12px; } a { color: #ffffff; text-decoration: none; } a:hover { color: #ffffff; text-decoration: none; } ul { margin: 0; padding: 0; list-style-type: none; border: 1px solid #dfdfdf; border-radius: 8px; } .img-3x { width: 3rem; } .gap-3 { gap: 1rem!important; } .card { border: 0; background: #000000; border-radius: 8px; color: #ffffff; } .card-header { padding: 1rem 1.25rem 0 1.25rem; background: #000000; border: 0; } .card-header:first-child { border-radius: 8px; } .card-title { font-size: 1.2rem; margin: 0; color: #ffffff; font-weight: 600; line-height: 150% } .search-container { flex-grow: 1; position: relative; } .search-container .form-control { background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.5); padding-left: 40px; } .search-container [class^=icon-] { position: absolute; left: 15px; top: 8px; font-size: 1.2375rem; color: #ffffff; } .contacts-container { border: 1px solid rgba(255, 255, 255, 0.3); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .contacts-container .contact-list a { border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .contacts-container .contact-list a:last-child { border-bottom: 0; }