Bootstrap Tables Components (63)

Framework

UI Library

Components

Tables from Artemis Dashboard

Bootstrap

Artemis Dashboard

<section class="py-8">
  <div class="container">
    <div class="bg-white rounded shadow overflow-hidden">
      <div class="pt-4 pb-5 px-6 border-bottom border-secondary-light">
        <h4 class="mb-0" >Recent Transactions</h4>
      </div>
      <div class="px-4 table-responsive">
        <table class="table mb-0 table-borderless table-striped small">
          <thead>
            <tr class="text-secondary"  >
              <th class="py-3 px-6" >Transaction ID</th>
              <th class="py-3 px-6" >Date</th>
              <th class="py-3 px-6" >E-mail</th>
              <th class="py-3 px-6" >Subscription</th>
              <th class="py-3 px-6" >Status</th>
            </tr>
          </thead>
          <tbody>
            <tr  >
              <td class="py-5 px-6" >SR2451EW32</td>
              <td class="py-5 px-6" >08.04.2021</td>
              <td class="py-5 px-6" >name@shuffle.dev</td>
              <td class="py-5 px-6" >Monthly</td>
              <td class="py-5 px-6"><span class="badge bg-success" >Completed</span></td>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tables from Trizzle

Bootstrap

Trizzle

<section class="py-8 bg-dark-light">
  <div class="container">
    <div class="pt-6 bg-secondary rounded-4">
      <div class="px-6 pb-6 border-bottom border-secondary-light border-opacity-50">
        <h6 class="fs-8 fw-semibold text-light mb-6">Companies</h6>
        <div class="w-100 overflow-scroll">
          <table class="table table-borderless w-100" style="min-width: max-content;">
            <thead>
              <tr><th class="p-0 bg-transparent" scope="col">
                <div class="rounded-start-4 py-3 px-6 bg-dark-light"><span class="fs-10 fw-semibold text-secondary-light">NAME</span></div>
              </th>
              <th class="p-0 bg-transparent" scope="col">
                <div class="py-3 px-6 bg-dark-light"><span class="fs-10 fw-semibold text-secondary-light">INDUSTRY</span></div>
              </th>
              <th class="p-0 bg-transparent" scope="col">
                <div class="py-3 px-6 bg-dark-light"><span class="fs-10 fw-semibold text-secondary-light">LOCATION</span></div>
              </th>
              <th class="p-0 bg-transparent" scope="col">
                <div class="py-3 px-6 bg-dark-light"><span class="fs-10 fw-semibold text-secondary-light">ENROLLMENT</span></div>
              </th>
              <th class="p-0 bg-transparent" scope="col">
                <div class="rounded-end-4 py-3 px-6 bg-dark-light"><span class="fs-10 fw-semibold text-secondary-light">LAST CONTACT</span></div>
              </th>
            </tr></thead>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tables from Zospace

Bootstrap

Zospace

<section class="position-relative bg-dark py-24 py-md-40">
  <div class="container pb-24 border-bottom">
    <div class="text-center pb-16 mb-16 border-bottom"><span class="h6 text-primary" >Check of details</span>
      <h2 class="h3 text-white mt-8" >See all features</h2>
    </div>
    <div class="table-responsive mb-20">
      <table class="table table-dark table-borderless" style="min-width: max-content;">
        <thead>
          <tr>
            <th class="pb-12 text-secondary-light"></th>
            <th class="pb-12 text-secondary-light" >Feature 1</th>
            <th class="pb-12 text-secondary-light" >Feature 2</th>
            <th class="pb-12 text-secondary-light" >Feature 3</th>
            <th class="pb-12 text-secondary-light" >Feature 4</th>
            <th class="pb-12 text-secondary-light" >Feature 5</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="ps-14 py-4 pe-6 bg-secondary rounded-start" >Number of Team Members</td>
            <td class="py-4 bg-secondary" >5</td>
            <td class="py-4 bg-secondary" >20</td>
            <td class="py-4 bg-secondary" >200+</td>
            <td class="py-4 bg-secondary" >Unlimited</td>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tables from Wrexa

Bootstrap

Wrexa

<section class="position-relative py-24 pt-lg-40 bg-light overflow-hidden">
  <div class="container">
    <div class="row mb-20">
      <div class="col-12 col-lg-4 mb-16 mb-lg-0">
        <div class="position-relative h-100 pt-20 pb-52 px-8 px-md-12 bg-white rounded">
          <div class="mb-16 pb-5 border-bottom">
            <h4 class="display-6 mb-0" >Files</h4>
          </div>
          <div class="d-flex mb-14 align-items-center"><img class="img-fluid" src="wrexa-assets/elements/folder1.svg" alt=""/><span class="ms-8" >All inspirations</span></div>
          <div class="d-flex mb-14 align-items-center"><img class="img-fluid" src="wrexa-assets/elements/folder2.svg" alt=""/><span class="ms-8" >Bathroom design</span></div>
          <div class="d-flex align-items-center"><img class="img-fluid" src="wrexa-assets/elements/folder3.svg" alt=""/><span class="ms-8" >Songs</span></div><a class="position-absolute bottom-0 start-0 ms-12 mb-24 btn mt-auto btn-primary" href="#" >All files</a>
        </div>
      </div>
      <div class="col-12 col-lg-8">
        <div class="pt-20 pb-24 px-8 px-md-12 bg-white rounded">
          <div class="d-sm-flex align-items-center justify-content-between mb-14 pb-5 border-bottom">
            <h4 class="display-6 mb-4 mb-md-0" >Teamwork</h4>
            <select class="form-select rounded-1 py-1 ps-8" aria-label="New select example" style="max-width: max-content;">
              <option selected="">New</option>
              <option value="1">Old</option>
            </select>
          </div>
          <div class="table-responsive pb-6 px-4 w-100 mb-16" style="width: min-content;">
            <table class="table table-borderless mb-0" style="min-width: max-content;">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tables from Pstls.

Bootstrap

Pstls.

<section class="py-28 bg-white">
  <div class="container">
    <div class="mw-6xl mx-auto">
      <div class="py-12 px-4 px-md-10 bg-white shadow-lg">
        <div class="table-responsive">
          <table class="table table-striped table-borderless">
            <thead>
              <tr>
                <th scope="col"></th>
                <th scope="col"><small class="fw-normal" >Feature 1</small></th>
                <th scope="col"><small class="fw-normal" >Feature 2</small></th>
                <th scope="col"><small class="fw-normal" >Feature 3</small></th>
                <th scope="col"><small class="fw-normal" >Feature 4</small></th>
                <th scope="col"><small class="fw-normal" >Feature 5</small></th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row"><small class="fw-normal" >Number of Team Members</small></th>
                <td><small >5</small></td>
                <td><small >20</small></td>
                <td><small >200+</small></td>
                <td><small >Unlimited</small></td>
                <td><small >Unlimited</small></td>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tables from Metis

Bootstrap

Metis

<section class="py-5 bg-light">
  <div class="container">
    <div class="bg-white px-4 py-3 rounded shadow-sm">
      <table class="table table-responsive table-borderless table-striped">
        <thead>
          <tr><th>Package</th><th>Feature 1</th><th>Feature 2</th><th>Feature 3</th><th>Feature 4</th><th>Feature 5</th></tr>
        </thead>
        <tbody>
          <tr>
            <td>Example for Package 1</td>
            <td class="text-success">
              <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="text-success">
              <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
            </td>
            <td class="text-success">
              <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tables from Sirius Dashboard

Bootstrap

Sirius Dashboard

<section class="py-6">
  <div class="container">
    <div class="row align-items-center mb-8">
      <div class="col-12 col-lg-6 mb-6 mb-xl-0">
        <h5>Project Files</h5>
      </div>
      <div class="col-12 col-xl-2 mb-6 mb-xl-0 flex-grow-1">
        <div class="input-group input-group-sm mw-xs ms-xl-auto">
          <input class="form-control form-control-sm" type="text" placeholder="Type to search..." aria-label="Type to search"/><span class="input-group-text">
            <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.0625 15.625C12.6869 15.625 15.625 12.6869 15.625 9.0625C15.625 5.43813 12.6869 2.5 9.0625 2.5C5.43813 2.5 2.5 5.43813 2.5 9.0625C2.5 12.6869 5.43813 15.625 9.0625 15.625Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M13.7026 13.7031L17.4996 17.5" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span>
        </div>
      </div>
      <div class="col-12 col-lg-auto"><a class="me-2 btn btn-primary" href="#" type="button"><span class="me-3">
            <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.5 14H3.49951C3.3669 14 3.23973 13.9473 3.14596 13.8536C3.05219 13.7598 2.99951 13.6326 2.99951 13.5V2.5C2.99951 2.36739 3.05219 2.24021 3.14596 2.14645C3.23973 2.05268 3.3669 2 3.49951 2H9.5L13 5.5V13.5C13 13.5657 12.9871 13.6307 12.9619 13.6913C12.9368 13.752 12.9 13.8071 12.8536 13.8536C12.8071 13.9 12.752 13.9368 12.6913 13.9619C12.6307 13.9871 12.5657 14 12.5 14Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M9.5 2V5.5H13.0005" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M6.5 9.5H9.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></span><span>File Manager</span></a><a class="me-2 btn px-4 btn-outline-light rounded-3" href="#">
          <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M13.4545 10H2.54545C2.24421 10 2 10.2558 2 10.5714V13.4286C2 13.7442 2.24421 14 2.54545 14H13.4545C13.7558 14 14 13.7442 14 13.4286V10.5714C14 10.2558 13.7558 10 13.4545 10Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M13.4545 2H2.54545C2.24421 2 2 2.25584 2 2.57143V5.42857C2 5.74416 2.24421 6 2.54545 6H13.4545C13.7558 6 14 5.74416 14 5.42857V2.57143C14 2.25584 13.7558 2 13.4545 2Z" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Tables are the daily bread of any business. In our resources you will find many different types of Bootstrap tables components, tailored for different applications. Whether it's users, transactions, packages, datasets - we have ready-made ideas and coded Tailwind components that you can use. You will present and compare data without boring users.

Choose from many variations of the Bootstrap components stats. The variants shown here are available in various UI libraries in the Shuffle editor. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Bootstrap website template. Each library is designed by a professional designer and coded by our team of developers.

Get access to all sections of the Bootstrap components stats, code and our editor. Try the demo for free.

Try for Free →

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Bootstrap 5 Tables Components

Framework

UI Library

Components

Tables from Artemis Dashboard

Get the code for 13,400+ components

Tables from Trizzle

Get the code for 13,400+ components

Tables from Zospace

Get the code for 13,400+ components

Tables from Wrexa

Get the code for 13,400+ components

Tables from Pstls.

Get the code for 13,400+ components

Tables from Metis

Get the code for 13,400+ components

Tables from Sirius Dashboard

Get the code for 13,400+ components

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support