Skip to component content

Table

Display related rows and columns with Bootstrap's native, responsive table markup.

A native table groups related rows under visible column headers.
Request Owner Status
First row Column value Plain text
Second row Column value Plain text
Third row Column value Plain text

Usage

Use .table for data that needs row and column relationships to stay visible. Render column headers in thead, data rows in tbody, and a caption when the table needs context beyond the surrounding heading.

Use row headers for named records, align numeric columns consistently, and keep status or action cells short enough that the row remains scannable. Bootstrap table variants are opt-in, so choose striped, hover, bordered, or compact styles only when they improve comparison.

Wrap wide tables in a responsive container so columns remain inspectable on smaller screens. If the user needs filtering, sorting, pagination, row selection, or responsive cards, move up to Data Table instead of adding those behaviors directly to a basic table.

Basic

Render statuses with documented Badge markup and right-align the numeric column.

Table
Customer service desk queue at a glance.
Request Owner Status SLA
Partner agreement Mira Kaya Pending 2h 12m
Compliance review Noah Demir Ready 4h 05m
Workspace access Lena Aras Done Closed 
<div class="table-responsive">
  <table class="table">
    <caption>Customer service desk queue at a glance.</caption>
    <thead>
      <tr>
        <th scope="col">Request</th>
        <th scope="col">Owner</th>
        <th scope="col">Status</th>
        <th scope="col" class="text-end">SLA</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Partner agreement</th>
        <td>Mira Kaya</td>
        <td>
          <span class="badge text-bg-warning">Pending</span>
        </td>
        <td class="text-end">2h 12m</td>
      </tr>
      <tr>
        <th scope="row">Compliance review</th>
        <td>Noah Demir</td>
        <td>
          <span class="badge border text-body-secondary">Ready</span>
        </td>
        <td class="text-end">4h 05m</td>
      </tr>
      <tr>
        <th scope="row">Workspace access</th>
        <td>Lena Aras</td>
        <td>
          <span class="badge text-bg-success">Done</span>
        </td>
        <td class="text-end">Closed</td>
      </tr>
    </tbody>
  </table>
</div>

Pass footer for a summary row that closes out a usage ledger.

Table
Line item Amount
Portal seats $240
Storage add-on $36
Credit -$20
Total $256

Actions

A row-actions column composed from an icon-only dropdown trigger and documented Bootstrap Dropdown Menu markup.

Table
Deployment Status Actions
Web frontend Live
API gateway Rolling out
Batch worker Failed 
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Deployment</th>
        <th scope="col">Status</th>
        <th scope="col" class="text-end">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Web frontend</th>
        <td>
          <span class="badge text-bg-success">Live</span>
        </td>
        <td class="text-end">
          <div class="table-row-actions dropdown">
            <button
                  class="btn btn-ghost btn-icon-sm"
                  type="button"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                  aria-label="Open actions for Web frontend"
                >
              <i class="lucide lucide-ellipsis" data-icon="inline-start" aria-hidden="true"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
              <li>
                <button class="dropdown-item" type="button">
                  <span>View logs</span>
                </button>
              </li>
              <li>
                <button class="dropdown-item" type="button">
                  <span>Redeploy</span>
                </button>
              </li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li>
                <button class="dropdown-item" type="button" data-variant="destructive">
                  <span>Roll back</span>
                </button>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">API gateway</th>
        <td>
          <span class="badge text-bg-warning">Rolling out</span>
        </td>
        <td class="text-end">
          <div class="table-row-actions dropdown">
            <button
                  class="btn btn-ghost btn-icon-sm"
                  type="button"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                  aria-label="Open actions for API gateway"
                >
              <i class="lucide lucide-ellipsis" data-icon="inline-start" aria-hidden="true"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
              <li>
                <button class="dropdown-item" type="button">
                  <span>View logs</span>
                </button>
              </li>
              <li>
                <button class="dropdown-item" type="button">
                  <span>Redeploy</span>
                </button>
              </li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li>
                <button class="dropdown-item" type="button" data-variant="destructive">
                  <span>Roll back</span>
                </button>
              </li>
            </ul>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">Batch worker</th>
        <td>
          <span class="badge text-bg-danger">Failed</span>
        </td>
        <td class="text-end">
          <div class="table-row-actions dropdown">
            <button
                  class="btn btn-ghost btn-icon-sm"
                  type="button"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                  aria-label="Open actions for Batch worker"
                >
              <i class="lucide lucide-ellipsis" data-icon="inline-start" aria-hidden="true"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
              <li>
                <button class="dropdown-item" type="button">
                  <span>View logs</span>
                </button>
              </li>
              <li>
                <button class="dropdown-item" type="button">
                  <span>Redeploy</span>
                </button>
              </li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li>
                <button class="dropdown-item" type="button" data-variant="destructive">
                  <span>Roll back</span>
                </button>
              </li>
            </ul>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Compact, striped, and hoverable

Bootstrap's own striped, hover, and small modifiers combine freely for denser, scannable rows.

Table
Compact admin usage rows for a support team.
Workspace ID Workspace Plan Requests
m00-portal Moo UI Portal Growth 18
m01-partners Partner Desk Business 9
m02-billing Billing Hub Starter 4
m03-support Support Lab Trial 2 
<div class="table-responsive">
  <table class="table table-striped table-hover table-sm caption-top">
    <caption>Compact admin usage rows for a support team.</caption>
    <thead>
      <tr>
        <th scope="col">Workspace ID</th>
        <th scope="col">Workspace</th>
        <th scope="col">Plan</th>
        <th scope="col" class="text-end">Requests</th>
      </tr>
    </thead>
    <tbody>
      <tr id="m00-portal">
        <th scope="row">m00-portal</th>
        <td>Moo UI Portal</td>
        <td>Growth</td>
        <td class="text-end">18</td>
      </tr>
      <tr id="m01-partners">
        <th scope="row">m01-partners</th>
        <td>Partner Desk</td>
        <td>Business</td>
        <td class="text-end">9</td>
      </tr>
      <tr id="m02-billing">
        <th scope="row">m02-billing</th>
        <td>Billing Hub</td>
        <td>Starter</td>
        <td class="text-end">4</td>
      </tr>
      <tr id="m03-support">
        <th scope="row">m03-support</th>
        <td>Support Lab</td>
        <td>Trial</td>
        <td class="text-end">2</td>
      </tr>
    </tbody>
  </table>
</div>

RTL

Use one compact queue summary table in Arabic, Hebrew, and English.

التكرار المالك الحالة الوقت المقدر
مراجعة العميل محمد معلق 6h 40m
إصدار الفاتورة سارة جاهز 2h 11m
وصول المنصة ليلى مكتمل مغلق 
<div class="w-100" dir="rtl">
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">التكرار</th>
          <th scope="col">المالك</th>
          <th scope="col">الحالة</th>
          <th scope="col" class="text-end">الوقت المقدر</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">مراجعة العميل</th>
          <td>محمد</td>
          <td>
            <span class="badge text-bg-warning">معلق</span>
          </td>
          <td class="text-end">6h 40m</td>
        </tr>
        <tr>
          <th scope="row">إصدار الفاتورة</th>
          <td>سارة</td>
          <td>
            <span class="badge border text-body-secondary">جاهز</span>
          </td>
          <td class="text-end">2h 11m</td>
        </tr>
        <tr>
          <th scope="row">وصول المنصة</th>
          <td>ليلى</td>
          <td>
            <span class="badge text-bg-success">مكتمل</span>
          </td>
          <td class="text-end">مغلق</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
בקשה אחראי סטטוס זמן משוער
סקירת לקוח מיכאל ממתין 6h 40m
הפקת חשבונית סערה מוכן 2h 11m
גישה לפלטפורמה לירון בוצע סגור 
<div class="w-100" dir="rtl">
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">בקשה</th>
          <th scope="col">אחראי</th>
          <th scope="col">סטטוס</th>
          <th scope="col" class="text-end">זמן משוער</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">סקירת לקוח</th>
          <td>מיכאל</td>
          <td>
            <span class="badge text-bg-warning">ממתין</span>
          </td>
          <td class="text-end">6h 40m</td>
        </tr>
        <tr>
          <th scope="row">הפקת חשבונית</th>
          <td>סערה</td>
          <td>
            <span class="badge border text-body-secondary">מוכן</span>
          </td>
          <td class="text-end">2h 11m</td>
        </tr>
        <tr>
          <th scope="row">גישה לפלטפורמה</th>
          <td>לירון</td>
          <td>
            <span class="badge text-bg-success">בוצע</span>
          </td>
          <td class="text-end">סגור</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
Request Owner Status SLA
Customer review Michael Pending 6h 40m
Invoice build Sara Ready 2h 11m
Platform access Liron Done Closed 
<div class="w-100" dir="ltr">
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Request</th>
          <th scope="col">Owner</th>
          <th scope="col">Status</th>
          <th scope="col" class="text-end">SLA</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Customer review</th>
          <td>Michael</td>
          <td>
            <span class="badge text-bg-warning">Pending</span>
          </td>
          <td class="text-end">6h 40m</td>
        </tr>
        <tr>
          <th scope="row">Invoice build</th>
          <td>Sara</td>
          <td>
            <span class="badge border text-body-secondary">Ready</span>
          </td>
          <td class="text-end">2h 11m</td>
        </tr>
        <tr>
          <th scope="row">Platform access</th>
          <td>Liron</td>
          <td>
            <span class="badge text-bg-success">Done</span>
          </td>
          <td class="text-end">Closed</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Component reference

Status
Accepted
Runtime
native HTML/CSS
Markup
Bootstrap/native HTML
Reference

For Bootstrap's source behavior and contextual row/cell variants, see the Bootstrap Tables documentation.

Known limitation
This Table intentionally has no sorting, filtering, or pagination. Need those on top of a table? The Data Table component composes this same Bootstrap table markup with that interactive behavior.
Pages
Home Introduction Installation Layout Examples Account Appearance FAQ Forgot Password Overview Pricing Profile Sign In Sign Up Tasks Users Components Blocks Charts Utilities Support & Evidence Contributing AI Usage Changelog License
Components
Accordion Alert Alert Dialog Avatar Badge Breadcrumb Button Button Group Card Chart Checkbox Close Button Collapsible Combobox Context Menu Data Table Date Picker Dialog Dropdown Menu Empty Field Form Input Input Group Kbd Menubar Native Select Navigation Pagination Popover Progress Radio Group Separator Sheet Sidebar Skeleton Slider Spinner Switch Table Table of Contents Tabs Textarea Toast Toggle Group Tooltip Typography
Utilities
Border Scroll Fade
Blocks
Accordion Panels Sidebar (Floating) Sidebar (Inset)
↵ Go to Page

Settings

Theme
Choose how Moo UI looks on this device.
Sidebar
Choose how the sidebar sits on the page.
Theme Builder
Tune catalog tokens and chart colors for this browser.
Base color
Theme color
Chart color
Heading font
Body font
Radius
Direction
Choose the reading direction. RTL flips the layout live.
Reset

Restore the default appearance.