<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 mt-5"> <div class="row mt-3"> <h1>People Directory</h1> </div> <div class="row mt-3"> <div class="col-8"> <a href="#" class="btn btn-warning rounded-pill">All People</a> <a href="#" class="btn btn-light rounded-pill">Operations</a> <a href="#" class="btn btn-light rounded-pill">Product</a> <a href="#" class="btn btn-light rounded-pill"> PR </a> <a href="#" class="btn btn-light rounded-pill">Development</a> <a href="#" class="btn btn-light rounded-pill">Finance</a> <a href="#" class="btn btn-light rounded-pill">Sales</a> </div> <div class="col-4"> <input type="search" name="" class="form-control rounded-pill" placeholder="search"> </div> </div> <div class="row my-3 text-center"> <div class="col-3"> <div class="card"> <div class="card-body"> <h5 class="card-title mb-3"><span class="badge text-bg-warning rounded-pill">Operations</span></h5> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" height="100px" class="mb-3 rounded-circle" alt="..."> <p class="card-text"><b>Josh Homme</b></p> <p><small><a href="#">j.homme@company.com</a></small></p> <div class="d-grid gap-2 d-md-block"> <a href="#" class="btn btn-light rounded-pill"><i class="bi bi-envelope"></i></a> <a href="#" class="btn btn-light rounded-pill active"><i class="bi bi-telephone"></i></a> <a href="#" class="btn btn-light rounded-pill"><i class="bi bi-three-dots"></i></a> </div> </div> </div> </div> <div class="col-3"> <div class="card"> <div class="card-body"> <h5 class="card-title mb-3"><span class="badge text-bg-primary rounded-pill">Operations</span></h5> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" height="100px" class="mb-3 rounded-circle" alt="..."> <p class="card-text"><b>Josh Homme</b></p> <p><small><a href="#">j.homme@company.com</a></small></p> <div class="d-grid gap-2 d-md-block"> <a href="#" class="btn btn-light rounded-pill"><i class="bi bi-envelope"></i></a> <a href="#" class="btn btn-light rounded-pill active"><i class="bi bi-telephone"></i></a> <a href="#" class="btn btn-light rounded-pill"><i class="bi bi-three-dots"></i></a> </div> </div> </div> </div> <div class="col-3"> <div class="card"> <div class="card-body"> <h5 class="card-title mb-3"><span class="badge text-bg-danger rounded-pill">Operations</span></h5> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" height="100px" class="mb-3 rounded-circle" alt="..."> <p class="card-text"><b>Josh Homme</b></p> <p><small><a href="#">j.homme@company.com</a></small></p> <div class="d-grid gap-2 d-md-block"> <a href="#" class="btn btn-light rounded-pill"><i class="bi bi-envelope"></i></a> <a href="#" class="btn btn-light rounded-pill active"><i class="bi bi-telephone"></i></a> <a href="#" class="btn btn-light rounded-pill"><i class="bi bi-three-dots"></i></a> </div> </div> </div> </div> <div class="col-3"> <div class="card"> <div class="card-body"> <h5 class="card-title mb-3"><span class="badge text-bg-success rounded-pill">Operations</span></h5> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" height="100px" class="mb-3 rounded-circle" alt="..."> <p class="card-text"><b>Josh Homme</b></p> <p><small><a href="#">j.homme@company.com</a></small></p> <div class="d-grid gap-2 d-md-block"> <a href="#" class="btn btn-light rounded-pill"><i class="bi bi-envelope"></i></a> <a href="#" class="btn btn-light rounded-pill active"><i class="bi bi-telephone"></i></a> <a href="#" class="btn btn-light rounded-pill"><i class="bi bi-three-dots"></i></a> </div> </div> </div> </div> </div> <div class="row my-3 text-center"> <div class="col-3"> <div class="card"> <div class="card-body"> <h5 class="card-title mb-3"><span class="badge text-bg-danger rounded-pill">Operations</span></h5> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" height="100px" class="mb-3 rounded-circle" alt="..."> <p class="card-text"><b>Josh Homme</b></p> <p><small><a href="#">j.homme@company.com</a></small></p> <div class="d-grid gap-2 d-md-block"> <a href="#" class="btn btn-light rounded-pill"><i class="bi bi-envelope"></i></a> <a href="#" class="btn btn-light rounded-pill active"><i class="bi bi-telephone"></i></a> <a href="#" class="btn btn-light rounded-pill"><i class="bi bi-three-dots"></i></a> </div> </div> </div> </div> <div class="col-3"> <div class="card"> <div class="card-body"> <h5 class="card-title mb-3"><span class="badge text-bg-secondary rounded-pill">Operations</span></h5> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" height="100px" class="mb-3 rounded-circle" alt="..."> <p class="card-text"><b>Josh Homme</b></p> <p><small><a href="#">j.homme@company.com</a></small></p> <div class="d-grid gap-2 d-md-block"> <a href="#" class="btn btn-light rounded-pill"><i class="bi bi-envelope"></i></a> <a href="#" class="btn btn-light rounded-pill active"><i class="bi bi-telephone"></i></a> <a href="#" class="btn btn-light rounded-pill"><i class="bi bi-three-dots"></i></a> </div> </div> </div> </div> <div class="col-3"> <div class="card"> <div class="card-body"> <h5 class="card-title mb-3"><span class="badge text-bg-warning rounded-pill">Operations</span></h5> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" height="100px" class="mb-3 rounded-circle" alt="..."> <p class="card-text"><b>Josh Homme</b></p> <p><small><a href="#">j.homme@company.com</a></small></p> <div class="d-grid gap-2 d-md-block"> <a href="#" class="btn btn-light rounded-pill"><i class="bi bi-envelope"></i></a> <a href="#" class="btn btn-light rounded-pill active"><i class="bi bi-telephone"></i></a> <a href="#" class="btn btn-light rounded-pill"><i class="bi bi-three-dots"></i></a> </div> </div> </div> </div> <div class="col-3"> <div class="card"> <div class="card-body"> <h5 class="card-title mb-3"><span class="badge text-bg-primary rounded-pill">Operations</span></h5> <img src="https://secure.gravatar.com/avatar/c4e20a0d57fcd711988820710611a801?s=100&r=g&d=mm" height="100px" class="mb-3 rounded-circle" alt="..."> <p class="card-text"><b>Josh Homme</b></p> <p><small><a href="#">j.homme@company.com</a></small></p> <div class="d-grid gap-2 d-md-block"> <a href="#" class="btn btn-light rounded-pill"><i class="bi bi-envelope"></i></a> <a href="#" class="btn btn-light rounded-pill active"><i class="bi bi-telephone"></i></a> <a href="#" class="btn btn-light rounded-pill"><i class="bi bi-three-dots"></i></a> </div> </div> </div> </div> </div> </div>

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