Bootstrap Snippet Directory Filter using HTML CSS Bootstrap jQuery

"Directory Filter"
Bootstrap 4.1.1 Snippet by ramonvillaw

4.1.1 jQuery

414 0 Fav

Post to Facebook Tweet this

<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>  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <link href="img/favicon.ico" rel="icon" type="image/x-icon"> <title>Finder</title> </head> <body> <header>  <nav class="navbar navbar-expand navbar-dark bg-dark fixed-top"> <div class="container"> <a class="navbar-brand" href="#"><img src="https://pipeline.mediumra.re/assets/img/logo.svg"></a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-md-end" id="navbarsExample08"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link me-5" href="https://wa.me/+526131249090" target="_blank"> <i class="bi bi-whatsapp"></i> (+52) 613 124 9090</a> </li> <li class="nav-item"> <a class="btn btn-warning" href="#" data-bs-toggle="modal" data-bs-target="#negocio"> <i class="bi bi-plus"> </i> Añadir tu negocio</a> </li> </ul> </div> </div> </nav> </header> <div class="container">  <div class="modal fade" id="negocio" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content rounded-4 shadow"> <div class="modal-header border-bottom-0"> <h1 class="modal-title fs-5">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body py-0"> <div class="form-floating mb-3"> <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com"> <label for="floatingInput">Email address</label> </div> <div class="form-floating mb-3"> <input type="text" class="form-control" id="floatingPassword" placeholder="Password"> <label for="floatingPassword">Password</label> </div> <div class="form-floating mb-3"> <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search..."> <datalist id="datalistOptions"> <option value="San Francisco"> <option value="New York"> <option value="Seattle"> <option value="Los Angeles"> <option value="Chicago"> </datalist> <label for="floatingPassword">Tags</label> </div> <div class="form-floating"> <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea> <label for="floatingTextarea">Comments</label> </div> </div> <div class="modal-footer flex-column align-items-stretch w-100 gap-2 pb-3 border-top-0"> <button type="button" class="btn btn-lg btn-primary">Save changes</button> <button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <main class="flex-shrink-0 pt-5"> <div class="container"> <div class="row"> <div class="col-12"> <h1 class="text-center mt-5">Directory</h1> <div class="row mb-3 mt-5"> <p class="d-inline-flex gap-1"> <input type="search" class="form-control form-control-lg rounded-pill bg-light" id="filtro" name="filtro" placeholder="Ingresa palabras (s) clave aquí..."> <a href="#" class="btn btn-lg btn-light"><i class="bg-opacity-50 bi bi-sliders"></i></a> <a href="#" class="btn btn-lg btn-light"><i class="bi bi-sort-down"></i></a> </p> </div> </div> </div> </div> </main> <div class="container"> <di class="row"> <div class="col-12"> <div class="row mb-5"> <div class="col-12 col-xl-4 col-md-6 negocios"> <div class="card mb-4"> <div class="card-body"> <div class="list-group-item list-group-item-action d-flex gap-3"> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" alt="twbs" width="70" height="70" class="rounded-circle flex-shrink-0"> <div class="d-flex gap-2 w-100 justify-content-between"> <div> <h6 class="mb-0 mt-2">Listgroup heading</h6> <p class="mb-0 mt-2 opacity-75">Some placeholder .</p> </div> <small class="text-nowrap"> <a href="tel:+526131249090" class="btn btn-light btn-sm rounded-circle"> <i class="bi bi-telephone"></i></a> <a href="https://wa.me/+526131249090" target="_blank" class="btn btn-light btn-sm rounded-circle"> <i class="bi bi-whatsapp"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-share"></i></a> </small> </div> </div> </div> </div> </div> <div class="col-12 col-xl-4 col-md-6 negocios"> <div class="card mb-4"> <div class="card-body"> <div class="list-group-item list-group-item-action d-flex gap-3"> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" alt="twbs" width="70" height="70" class="rounded-circle flex-shrink-0"> <div class="d-flex gap-2 w-100 justify-content-between"> <div> <h6 class="mb-0 mt-2">Listgroup heading</h6> <p class="mb-0 mt-2 opacity-75">Some placeholder .</p> </div> <small class="text-nowrap"> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-telephone"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-whatsapp"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-share"></i></a> </small> </div> </div> </div> </div> </div> <div class="col-12 col-xl-4 col-md-6 negocios"> <div class="card mb-4"> <div class="card-body"> <div class="list-group-item list-group-item-action d-flex gap-3"> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" alt="twbs" wwidth="70" height="70" class="rounded-circle flex-shrink-0"> <div class="d-flex gap-2 w-100 justify-content-between"> <div> <h6 class="mb-0 mt-2">Listgroup heading</h6> <p class="mb-0 mt-2 opacity-75">Some placeholder .</p> </div> <small class="text-nowrap"> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-telephone"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-whatsapp"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-share"></i></a> </small> </div> </div> </div> </div> </div> <div class="col-12 col-xl-4 col-md-6 negocios"> <div class="card mb-4"> <div class="card-body"> <div class="list-group-item list-group-item-action d-flex gap-3"> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" alt="twbs" width="70" height="70" class="rounded-circle flex-shrink-0"> <div class="d-flex gap-2 w-100 justify-content-between"> <div> <h6 class="mb-0 mt-2">Listgroup heading</h6> <p class="mb-0 mt-2 opacity-75">Some placeholder .</p> </div> <small class="text-nowrap"> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-telephone"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-whatsapp"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-share"></i></a> </small> </div> </div> </div> </div> </div> <div class="col-12 col-xl-4 col-md-6 negocios"> <div class="card mb-4"> <div class="card-body"> <div class="list-group-item list-group-item-action d-flex gap-3"> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" alt="twbs" width="70" height="70" class="rounded-circle flex-shrink-0"> <div class="d-flex gap-2 w-100 justify-content-between"> <div> <h6 class="mb-0 mt-2">Listgroup heading</h6> <p class="mb-0 mt-2 opacity-75">Some placeholder .</p> </div> <small class="text-nowrap"> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-telephone"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-whatsapp"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-share"></i></a> </small> </div> </div> </div> </div> </div> <div class="col-12 col-xl-4 col-md-6 negocios"> <div class="card mb-4"> <div class="card-body"> <div class="list-group-item list-group-item-action d-flex gap-3"> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" alt="twbs" width="70" height="70" class="rounded-circle flex-shrink-0"> <div class="d-flex gap-2 w-100 justify-content-between"> <div> <h6 class="mb-0 mt-2">Listgroup heading</h6> <p class="mb-0 mt-2 opacity-75">Some placeholder .</p> </div> <small class="text-nowrap"> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-telephone"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-whatsapp"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-share"></i></a> </small> </div> </div> </div> </div> </div> <div class="col-12 col-xl-4 col-md-6 negocios"> <div class="card mb-4"> <div class="card-body"> <div class="list-group-item list-group-item-action d-flex gap-3"> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" alt="twbs" width="70" height="70" class="rounded-circle flex-shrink-0"> <div class="d-flex gap-2 w-100 justify-content-between"> <div> <h6 class="mb-0 mt-2">Listgroup heading</h6> <p class="mb-0 mt-2 opacity-75">Some placeholder .</p> </div> <small class="text-nowrap"> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-telephone"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-whatsapp"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-share"></i></a> </small> </div> </div> </div> </div> </div> <div class="col-12 col-xl-4 col-md-6 negocios"> <div class="card mb-4"> <div class="card-body"> <div class="list-group-item list-group-item-action d-flex gap-3"> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" alt="twbs" width="70" height="70" class="rounded-circle flex-shrink-0"> <div class="d-flex gap-2 w-100 justify-content-between"> <div> <h6 class="mb-0 mt-2">Listgroup heading</h6> <p class="mb-0 mt-2 opacity-75">Some placeholder .</p> </div> <small class="text-nowrap"> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-telephone"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-whatsapp"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-share"></i></a> </small> </div> </div> </div> </div> </div> <div class="col-12 col-xl-4 col-md-6 negocios"> <div class="card mb-4"> <div class="card-body"> <div class="list-group-item list-group-item-action d-flex gap-3"> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" alt="twbs" width="70" height="70" class="rounded-circle flex-shrink-0"> <div class="d-flex gap-2 w-100 justify-content-between"> <div> <h6 class="mb-0 mt-2">Listgroup heading</h6> <p class="mb-0 mt-2 opacity-75">Some placeholder .</p> </div> <small class="text-nowrap"> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-telephone"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-whatsapp"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-share"></i></a> </small> </div> </div> </div> </div> </div> <div class="col-12 col-xl-4 col-md-6 negocios"> <div class="card mb-4"> <div class="card-body"> <div class="list-group-item list-group-item-action d-flex gap-3"> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" alt="twbs" width="70" height="70" class="rounded-circle flex-shrink-0"> <div class="d-flex gap-2 w-100 justify-content-between"> <div> <h6 class="mb-0 mt-2">Listgroup heading</h6> <p class="mb-0 mt-2 opacity-75">Some placeholder .</p> </div> <small class="text-nowrap"> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-telephone"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-whatsapp"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-share"></i></a> </small> </div> </div> </div> </div> </div> <div class="col-12 col-xl-4 col-md-6 negocios"> <div class="card mb-4"> <div class="card-body"> <div class="list-group-item list-group-item-action d-flex gap-3"> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" alt="twbs" width="70" height="70" class="rounded-circle flex-shrink-0"> <div class="d-flex gap-2 w-100 justify-content-between"> <div> <h6 class="mb-0 mt-2">Listgroup heading</h6> <p class="mb-0 mt-2 opacity-75">Some placeholder .</p> </div> <small class="text-nowrap"> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-telephone"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-whatsapp"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-share"></i></a> </small> </div> </div> </div> </div> </div> <div class="col-12 col-xl-4 col-md-6 negocios"> <div class="card mb-4"> <div class="card-body"> <div class="list-group-item list-group-item-action d-flex gap-3"> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" alt="twbs" wwidth="70" height="70" class="rounded-circle flex-shrink-0"> <div class="d-flex gap-2 w-100 justify-content-between"> <div> <h6 class="mb-0 mt-2">Listgroup heading</h6> <p class="mb-0 mt-2 opacity-75">Some placeholder .</p> </div> <small class="text-nowrap"> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-telephone"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-whatsapp"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-share"></i></a> </small> </div> </div> </div> </div> </div> <div class="col-12 col-xl-4 col-md-6 negocios"> <div class="card mb-4"> <div class="card-body"> <div class="list-group-item list-group-item-action d-flex gap-3"> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" alt="twbs" width="70" height="70" class="rounded-circle flex-shrink-0"> <div class="d-flex gap-2 w-100 justify-content-between"> <div> <h6 class="mb-0 mt-2">Listgroup heading</h6> <p class="mb-0 mt-2 opacity-75">Some placeholder .</p> </div> <small class="text-nowrap"> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-telephone"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-whatsapp"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-share"></i></a> </small> </div> </div> </div> </div> </div> <div class="col-12 col-xl-4 col-md-6 negocios"> <div class="card mb-4"> <div class="card-body"> <div class="list-group-item list-group-item-action d-flex gap-3"> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" alt="twbs" width="70" height="70" class="rounded-circle flex-shrink-0"> <div class="d-flex gap-2 w-100 justify-content-between"> <div> <h6 class="mb-0 mt-2">Listgroup heading</h6> <p class="mb-0 mt-2 opacity-75">Some placeholder .</p> </div> <small class="text-nowrap"> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-telephone"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-whatsapp"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-share"></i></a> </small> </div> </div> </div> </div> </div> <div class="col-12 col-xl-4 col-md-6 negocios"> <div class="card mb-4"> <div class="card-body"> <div class="list-group-item list-group-item-action d-flex gap-3"> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" alt="twbs" width="70" height="70" class="rounded-circle flex-shrink-0"> <div class="d-flex gap-2 w-100 justify-content-between"> <div> <h6 class="mb-0 mt-2">Listgroup heading</h6> <p class="mb-0 mt-2 opacity-75">Some placeholder .</p> </div> <small class="text-nowrap"> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-telephone"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-whatsapp"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-share"></i></a> </small> </div> </div> </div> </div> </div> <div class="col-12 col-xl-4 col-md-6 negocios"> <div class="card mb-4"> <div class="card-body"> <div class="list-group-item list-group-item-action d-flex gap-3"> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" alt="twbs" width="70" height="70" class="rounded-circle flex-shrink-0"> <div class="d-flex gap-2 w-100 justify-content-between"> <div> <h6 class="mb-0 mt-2">Listgroup heading</h6> <p class="mb-0 mt-2 opacity-75">Some placeholder .</p> </div> <small class="text-nowrap"> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-telephone"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-whatsapp"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-share"></i></a> </small> </div> </div> </div> </div> </div> <div class="col-12 col-xl-4 col-md-6 negocios"> <div class="card mb-4"> <div class="card-body"> <div class="list-group-item list-group-item-action d-flex gap-3"> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" alt="twbs" width="70" height="70" class="rounded-circle flex-shrink-0"> <div class="d-flex gap-2 w-100 justify-content-between"> <div> <h6 class="mb-0 mt-2">Nikkos Sushi</h6> <p class="mb-0 mt-2 opacity-75">Restaurante de Sushi.</p> </div> <small class="text-nowrap"> <a href="tel:+526131248743" class="btn btn-light btn-sm rounded-circle"> <i class="bi bi-telephone"></i></a> <a href="https://wa.me/+526131248743" target="_blank" class="btn btn-light btn-sm rounded-circle"> <i class="bi bi-whatsapp"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-share"></i></a> </small> </div> </div> </div> </div> </div> <div class="col-12 col-xl-4 col-md-6 negocios"> <div class="card mb-4"> <div class="card-body"> <div class="list-group-item list-group-item-action d-flex gap-3"> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" alt="twbs" width="70" height="70" class="rounded-circle flex-shrink-0"> <div class="d-flex gap-2 w-100 justify-content-between"> <div> <h6 class="mb-0 mt-2">El Tapatío</h6> <p class="mb-0 mt-2 opacity-75">Restaurante, Snack Bar.</p> </div> <small class="text-nowrap"> <a href="tel:+526131003413" class="btn btn-light btn-sm rounded-circle"> <i class="bi bi-telephone"></i></a> <a href="https://wa.me/+526131003413" target="_blank" class="btn btn-light btn-sm rounded-circle"> <i class="bi bi-whatsapp"></i></a> <a class="btn btn-light btn-sm rounded-circle"><i class="bi bi-share"></i></a> </small> </div> </div> </div> </div> </div> </div> </div> </di> </div> <footer class="footer fixed-bottom mt-auto py-3 bg-body-tertiary"> <div class="container"> <span class="text-body-secondary">Finder Loreto, MX.</span> </div> </footer> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/bootstrap.bundle.min.js" type="text/javascript"></script> <script type="text/javascript"> </script> </body> </html>

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

$(document).ready(function() { (function ($) { $('#filtro').keyup(function () { var rex = new RegExp($(this).val(), 'i'); $('.negocios').hide(); $('.negocios').filter(function () { return rex.test($(this).text()); }).show(); }) }(jQuery)); });

Questions / Comments:

Posting GuidelinesFormatting