<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="page"> <div class="page-content"> <!-- Panel --> <div class="panel"> <div class="panel-body"> <form class="page-search-form" role="search"> <div class="input-search input-search-dark"> <i class="input-search-icon md-search" aria-hidden="true"></i> <input type="text" class="form-control" id="myInput" name="search" onkeyup="myFunction()" placeholder="Search Users"> <button type="button" class="input-search-close icon md-close" aria-label="Close"></button> </div> </form> <div class="nav-tabs-horizontal nav-tabs-animate" data-plugin="tabs"> <div class="dropdown page-user-sortlist"> Order By: <a class="dropdown-toggle inline-block" data-toggle="dropdown" href="#" aria-expanded="false">Last Active</a> <div class="dropdown-menu animation-scale-up animation-top-right animation-duration-250" role="menu"> <a class="active dropdown-item" href="javascript:void(0)">Last Active</a> <a class="dropdown-item" href="javascript:void(0)">Username</a> <a class="dropdown-item" href="javascript:void(0)">Location</a> <a class="dropdown-item" href="javascript:void(0)">Register Date</a> </div> </div> <!-- KIEL ALL CONTACTS --> <ul class="nav nav-tabs nav-tabs-line" role="tablist"> </ul> <div class="tab-content"> <div class="tab-pane animation-fade active" id="all_contacts" role="tabpanel"> <ul class="list-group" id="myUL"> <li class="list-group-item"> <div class="media"> <div class="pr-0 pr-sm-20 align-self-center"> <div class="avatar avatar-online"> <img src="../../../global/portraits/1.jpg" alt="..."> <i class="avatar avatar-busy"></i> </div> </div> <div class="media-body align-self-center"> <h5 class="mt-0 mb-5 name"> Herman Beck <small>Last Access: 1 hour ago</small> </h5> <p> <i class="icon icon-color md-pin" aria-hidden="true"></i> Street 4425 Golf Course Rd </p> <div> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-email" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-smartphone" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-twitter" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-facebook" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-dribbble" aria-hidden="true"></i> </a> </div> </div> <div class="pl-0 pl-sm-20 mt-15 mt-sm-0 align-self-center"> <button type="button" class="btn btn-primary btn-sm">Follow</button> </div> </div> </li> <li class="list-group-item animals"> <div class="media"> <div class="pr-0 pr-sm-20 align-self-center"> <div class="avatar avatar-away"> <img src="../../../global/portraits/2.jpg" alt="..."> <i class="avatar avatar-busy"></i> </div> </div> <div class="media-body align-self-center"> <h5 class="mt-0 mb-5 name"> Mary Adams <small>Last Access: 2 hours ago</small> </h5> <p> <i class="icon icon-color md-pin" aria-hidden="true"></i> Street 1391 Depaul Dr </p> <div> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-email" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-smartphone" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-twitter" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-facebook" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-dribbble" aria-hidden="true"></i> </a> </div> </div> <div class="pl-0 pl-sm-20 mt-15 mt-sm-0 align-self-center"> <button type="button" class="btn btn-primary btn-sm">Follow</button> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="pr-0 pr-sm-20 align-self-center"> <div class="avatar avatar-busy"> <img src="../../../global/portraits/3.jpg" alt="..."> <i class="avatar avatar-busy"></i> </div> </div> <div class="media-body align-self-center"> <h5 class="mt-0 mb-5"> Caleb Richards <small>Last Access: 3 hours ago</small> </h5> <p> <i class="icon icon-color md-pin" aria-hidden="true"></i> Street 5067 E Center St </p> <div> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-email" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-smartphone" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-twitter" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-facebook" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-dribbble" aria-hidden="true"></i> </a> </div> </div> <div class="pl-0 pl-sm-20 mt-15 mt-sm-0 align-self-center"> <button type="button" class="btn btn-success btn-sm"> <i class="icon md-check" aria-hidden="true"></i>Following </button> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="pr-0 pr-sm-20 align-self-center"> <div class="avatar avatar-off"> <img src="../../../global/portraits/4.jpg" alt="..."> <i class="avatar avatar-busy"></i> </div> </div> <div class="media-body align-self-center"> <h5 class="mt-0 mb-5"> June Lane <small>Last Access: 4 hours ago</small> </h5> <p> <i class="icon icon-color md-pin" aria-hidden="true"></i> Street 4788 E Little York Rd </p> <div> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-email" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-smartphone" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-twitter" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-facebook" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-dribbble" aria-hidden="true"></i> </a> </div> </div> <div class="pl-0 pl-sm-20 mt-15 mt-sm-0 align-self-center"> <button type="button" class="btn btn-success btn-sm"> <i class="icon md-check" aria-hidden="true"></i>Following </button> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="pr-0 pr-sm-20 align-self-center"> <div class="avatar avatar-online"> <img src="../../../global/portraits/5.jpg" alt="..."> <i class="avatar avatar-busy"></i> </div> </div> <div class="media-body align-self-center"> <h5 class="mt-0 mb-5"> Edward Fletcher <small>Last Access: 5 hours ago</small> </h5> <p> <i class="icon icon-color md-pin" aria-hidden="true"></i> Street 2317 Cowper St </p> <div> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-email" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-smartphone" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-twitter" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-facebook" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-dribbble" aria-hidden="true"></i> </a> </div> </div> <div class="pl-0 pl-sm-20 mt-15 mt-sm-0 align-self-center"> <button type="button" class="btn btn-primary btn-sm">Follow</button> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="pr-0 pr-sm-20 align-self-center"> <div class="avatar avatar-away"> <img src="../../../global/portraits/6.jpg" alt="..."> <i class="avatar avatar-busy"></i> </div> </div> <div class="media-body align-self-center"> <h5 class="mt-0 mb-5"> Crystal Bates <small>Last Access: 6 hours ago</small> </h5> <p> <i class="icon icon-color md-pin" aria-hidden="true"></i> Street 2689 Seventh St </p> <div> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-email" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-smartphone" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-twitter" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-facebook" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-dribbble" aria-hidden="true"></i> </a> </div> </div> <div class="pl-0 pl-sm-20 mt-15 mt-sm-0 align-self-center"> <button type="button" class="btn btn-success btn-sm"> <i class="icon md-check" aria-hidden="true"></i>Following </button> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="pr-0 pr-sm-20 align-self-center"> <div class="avatar avatar-busy"> <img src="../../../global/portraits/7.jpg" alt="..."> <i class="avatar avatar-busy"></i> </div> </div> <div class="media-body align-self-center"> <h5 class="mt-0 mb-5"> Nathan Watts <small>Last Access: 7 hours ago</small> </h5> <p> <i class="icon icon-color md-pin" aria-hidden="true"></i> Street 7858 Golf Course Rd </p> <div> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-email" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-smartphone" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-twitter" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-facebook" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-dribbble" aria-hidden="true"></i> </a> </div> </div> <div class="pl-0 pl-sm-20 mt-15 mt-sm-0 align-self-center"> <button type="button" class="btn btn-success btn-sm"> <i class="icon md-check" aria-hidden="true"></i>Following </button> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="pr-0 pr-sm-20 align-self-center"> <div class="avatar avatar-off"> <img src="../../../global/portraits/8.jpg" alt="..."> <i class="avatar avatar-busy"></i> </div> </div> <div class="media-body align-self-center"> <h5 class="mt-0 mb-5"> Heather Harper <small>Last Access: 8 hours ago</small> </h5> <p> <i class="icon icon-color md-pin" aria-hidden="true"></i> Street 7586 Crescent Canyon St </p> <div> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-email" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-smartphone" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-twitter" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-facebook" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-dribbble" aria-hidden="true"></i> </a> </div> </div> <div class="pl-0 pl-sm-20 mt-15 mt-sm-0 align-self-center"> <button type="button" class="btn btn-primary btn-sm">Follow</button> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="pr-0 pr-sm-20 align-self-center"> <div class="avatar avatar-online"> <img src="../../../global/portraits/9.jpg" alt="..."> <i class="avatar avatar-busy"></i> </div> </div> <div class="media-body align-self-center"> <h5 class="mt-0 mb-5"> Willard Wood <small>Last Access: 9 hours ago</small> </h5> <p> <i class="icon icon-color md-pin" aria-hidden="true"></i> Street 3081 Sunset Blvd </p> <div> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-email" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-smartphone" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-twitter" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-facebook" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-dribbble" aria-hidden="true"></i> </a> </div> </div> <div class="pl-0 pl-sm-20 mt-15 mt-sm-0 align-self-center"> <button type="button" class="btn btn-primary btn-sm">Follow</button> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="pr-0 pr-sm-20 align-self-center"> <div class="avatar avatar-away"> <img src="../../../global/portraits/10.jpg" alt="..."> <i class="avatar avatar-busy"></i> </div> </div> <div class="media-body align-self-center"> <h5 class="mt-0 mb-5"> Ronnie Ellis <small>Last Access: 10 hours ago</small> </h5> <p> <i class="icon icon-color md-pin" aria-hidden="true"></i> Street 8910 Fincher Rd </p> <div> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-email" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-smartphone" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-twitter" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-facebook" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-dribbble" aria-hidden="true"></i> </a> </div> </div> <div class="pl-0 pl-sm-20 mt-15 mt-sm-0 align-self-center"> <button type="button" class="btn btn-success btn-sm"> <i class="icon md-check" aria-hidden="true"></i>Following </button> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="pr-0 pr-sm-20 align-self-center"> <div class="avatar avatar-busy"> <img src="../../../global/portraits/11.jpg" alt="..."> <i class="avatar avatar-busy"></i> </div> </div> <div class="media-body align-self-center"> <h5 class="mt-0 mb-5"> Gwendolyn Wheeler <small>Last Access: 11 hours ago</small> </h5> <p> <i class="icon icon-color md-pin" aria-hidden="true"></i> Street 6030 Lovers Ln </p> <div> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-email" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-smartphone" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-twitter" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-facebook" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-dribbble" aria-hidden="true"></i> </a> </div> </div> <div class="pl-0 pl-sm-20 mt-15 mt-sm-0 align-self-center"> <button type="button" class="btn btn-primary btn-sm">Follow</button> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="pr-0 pr-sm-20 align-self-center"> <div class="avatar avatar-off"> <img src="../../../global/portraits/12.jpg" alt="..."> <i class="avatar avatar-busy"></i> </div> </div> <div class="media-body align-self-center"> <h5 class="mt-0 mb-5"> Daniel Russell <small>Last Access: 12 hours ago</small> </h5> <p> <i class="icon icon-color md-pin" aria-hidden="true"></i> Street 6240 E Cypress St </p> <div> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-email" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color md-smartphone" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-twitter" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-facebook" aria-hidden="true"></i> </a> <a class="text-action" href="javascript:void(0)"> <i class="icon icon-color bd-dribbble" aria-hidden="true"></i> </a> </div> </div> <div class="pl-0 pl-sm-20 mt-15 mt-sm-0 align-self-center"> <button type="button" class="btn btn-primary btn-sm">Follow</button> </div> </div> </li> </ul> <nav> <script> function myFunction() { var input, filter, ul, li, a, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } </script> <ul data-plugin="paginator" data-total="50" data-skin="pagination-no-border"></ul> </nav> </div> <nav> <ul data-plugin="paginator" data-total="50" data-skin="pagination-no-border"></ul> </nav> </div> </div> </div> </div> </div> <!-- End Panel --> </div> </div>