<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 ----------> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script> <!------ Include the above in your HEAD tag ----------> <div class="p-10 bg-surface-secondary"> <div class="container"> <div class="text-center"> <h3 class="mb-2">Crafted with <a href="https://github.com/webpixels/css" target="_blank">Webpixels CSS</a></h3> <p>The design system for Bootstrap 5</p> </div> <div class="my-8 text-center"> <a href="https://webpixels.io/components" class="text-warning" target="_blank">Browse all components -></a> </div> <div class="card"> <div class="card-header"> <h6>Bootstrap 5 Table</h6> </div> <div class="table-responsive"> <table class="table table-hover table-nowrap"> <thead class="thead-light"> <tr> <th scope="col">Name</th> <th scope="col">Job Title</th> <th scope="col">Email</th> <th scope="col">Phone</th> <th scope="col">Lead Score</th> <th scope="col">Company</th> <th></th> </tr> </thead> <tbody> <tr> <td data-label="Job Title"> <img alt="..." src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3&w=256&h=256&q=80" class="avatar avatar-sm rounded-circle me-2"> <a class="text-heading font-semibold" href="#"> Robert Fox </a> </td> <td data-label="Email"> <span>Web Designer</span> </td> <td data-label="Phone"> <a class="text-current" href="mailto:robert.fox@example.com">robert.fox@example.com</a> </td> <td data-label="Lead Score"> <a class="text-current" href="tel:202-555-0152">202-555-0152</a> </td> <td data-label="Company"> <span class="badge bg-soft-success text-success">7/10</span> </td> <td data-label=""> <a class="text-current" href="#">Dribbble</a> </td> <td data-label="" class="text-end"> <div class="dropdown"> <a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="bi bi-three-dots-vertical"></i> </a> <div class="dropdown-menu dropdown-menu-end"> <a href="#!" class="dropdown-item"> Action </a> <a href="#!" class="dropdown-item"> Another action </a> <a href="#!" class="dropdown-item"> Something else here </a> </div> </div> </td> </tr> <tr> <td data-label="Job Title"> <img alt="..." src="https://images.unsplash.com/photo-1610271340738-726e199f0258?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3&w=256&h=256&q=80" class="avatar avatar-sm rounded-circle me-2"> <a class="text-heading font-semibold" href="#"> Darlene Robertson </a> </td> <td data-label="Email"> <span>Developer</span> </td> <td data-label="Phone"> <a class="text-current" href="mailto:darlene@example.com">darlene@example.com</a> </td> <td data-label="Lead Score"> <a class="text-current" href="tel:224-567-2662">224-567-2662</a> </td> <td data-label="Company"> <span class="badge bg-soft-warning text-warning">5/10</span> </td> <td data-label=""> <a class="text-current" href="#">Netguru</a> </td> <td data-label="" class="text-end"> <div class="dropdown"> <a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="bi bi-three-dots-vertical"></i> </a> <div class="dropdown-menu dropdown-menu-end"> <a href="#!" class="dropdown-item"> Action </a> <a href="#!" class="dropdown-item"> Another action </a> <a href="#!" class="dropdown-item"> Something else here </a> </div> </div> </td> </tr> <tr> <td data-label="Job Title"> <img alt="..." src="https://images.unsplash.com/photo-1610878722345-79c5eaf6a48c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3&w=256&h=256&q=80" class="avatar avatar-sm rounded-circle me-2"> <a class="text-heading font-semibold" href="#"> Theresa Webb </a> </td> <td data-label="Email"> <span>Marketing Specialist</span> </td> <td data-label="Phone"> <a class="text-current" href="mailto:theresa.webb@example.com">theresa.webb@example.com</a> </td> <td data-label="Lead Score"> <a class="text-current" href="tel:401-505-6800">401-505-6800</a> </td> <td data-label="Company"> <span class="badge bg-soft-danger text-danger">2/10</span> </td> <td data-label=""> <a class="text-current" href="#">Figma</a> </td> <td data-label="" class="text-end"> <div class="dropdown"> <a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="bi bi-three-dots-vertical"></i> </a> <div class="dropdown-menu dropdown-menu-end"> <a href="#!" class="dropdown-item"> Action </a> <a href="#!" class="dropdown-item"> Another action </a> <a href="#!" class="dropdown-item"> Something else here </a> </div> </div> </td> </tr> <tr> <td data-label="Job Title"> <img alt="..." src="https://images.unsplash.com/photo-1612422656768-d5e4ec31fac0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3&w=256&h=256&q=80" class="avatar avatar-sm rounded-circle me-2"> <a class="text-heading font-semibold" href="#"> Kristin Watson </a> </td> <td data-label="Email"> <span>Sales Manager</span> </td> <td data-label="Phone"> <a class="text-current" href="mailto:cody.fisher@example.com">cody.fisher@example.com</a> </td> <td data-label="Lead Score"> <a class="text-current" href="tel:307-560-8817">307-560-8817</a> </td> <td data-label="Company"> <span class="badge bg-soft-success text-success">9/10</span> </td> <td data-label=""> <a class="text-current" href="#">Mailchimp</a> </td> <td data-label="" class="text-end"> <div class="dropdown"> <a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="bi bi-three-dots-vertical"></i> </a> <div class="dropdown-menu dropdown-menu-end"> <a href="#!" class="dropdown-item"> Action </a> <a href="#!" class="dropdown-item"> Another action </a> <a href="#!" class="dropdown-item"> Something else here </a> </div> </div> </td> </tr> <tr> <td data-label="Job Title"> <img alt="..." src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=3&w=256&h=256&q=80" class="avatar avatar-sm rounded-circle me-2"> <a class="text-heading font-semibold" href="#"> Robert Fox </a> </td> <td data-label="Email"> <span>Web Designer</span> </td> <td data-label="Phone"> <a class="text-current" href="mailto:robert.fox@example.com">robert.fox@example.com</a> </td> <td data-label="Lead Score"> <a class="text-current" href="tel:202-555-0152">202-555-0152</a> </td> <td data-label="Company"> <span class="badge bg-soft-success text-success">7/10</span> </td> <td data-label=""> <a class="text-current" href="#">Dribbble</a> </td> <td data-label="" class="text-end"> <div class="dropdown"> <a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="bi bi-three-dots-vertical"></i> </a> <div class="dropdown-menu dropdown-menu-end"> <a href="#!" class="dropdown-item"> Action </a> <a href="#!" class="dropdown-item"> Another action </a> <a href="#!" class="dropdown-item"> Something else here </a> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </div>

/* Webpixels CSS */ /* Utility and component-centric Design System based on Bootstrap for fast, responsive UI development */ /* URL: https://github.com/webpixels/css */ @import url(https://unpkg.com/@webpixels/css@1.1/dist/index.css);