Tables

Use table helpers for responsive wrappers, heads, bodies, rows, cells, variants, striping, hover states, borders, compact sizing, and row-group structure.

Overview

Bootstrap tables opt in to styling with .table. The BCL bs-table helper emits that base class and exposes the common table modifiers as attributes, while bs-thead, bs-tbody, bs-tr, bs-th, and bs-td keep the table anatomy explicit.

Use scope on header cells, add bs-table-caption when the table needs a descriptive label, and wrap wide tables with bs-table-responsive instead of forcing narrow content to compress.

Basic table

Use explicit table section and cell helpers so the rendered structure remains a normal semantic table.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry Bird @twitter
aspnet 

<bs-table>
    <bs-thead>
        <bs-tr>
            <bs-th scope="col">#</bs-th>
            <bs-th scope="col">First</bs-th>
            <bs-th scope="col">Last</bs-th>
            <bs-th scope="col">Handle</bs-th>
        </bs-tr>
    </bs-thead>
    <bs-tbody>
        <bs-tr>
            <bs-th scope="row">1</bs-th>
            <bs-td>Mark</bs-td>
            <bs-td>Otto</bs-td>
            <bs-td>@@mdo</bs-td>
        </bs-tr>
        <bs-tr>
            <bs-th scope="row">2</bs-th>
            <bs-td>Jacob</bs-td>
            <bs-td>Thornton</bs-td>
            <bs-td>@@fat</bs-td>
        </bs-tr>
        <bs-tr>
            <bs-th scope="row">3</bs-th>
            <bs-td>Larry</bs-td>
            <bs-td>Bird</bs-td>
            <bs-td>@@twitter</bs-td>
        </bs-tr>
    </bs-tbody>
</bs-table>

Anatomy

Place captions directly inside the table. Use helper-backed header, body, and footer groups for column labels, data, and summary rows.

Table head

Use bs-thead for column headings and scope="col" on header cells.

Table foot

Use bs-tfoot for footer rows.

Captions

Use bs-table-caption directly inside bs-table.

Quarterly pipeline by team
Team Q1 Q2 Total
Platform 18 24 42
Experience 12 20 32
Total 30 44 74
aspnet 

<bs-table bordered="true">
    <bs-table-caption>Quarterly pipeline by team</bs-table-caption>
    <bs-thead>
        <bs-tr>
            <bs-th scope="col">Team</bs-th>
            <bs-th scope="col">Q1</bs-th>
            <bs-th scope="col">Q2</bs-th>
            <bs-th scope="col">Total</bs-th>
        </bs-tr>
    </bs-thead>
    <bs-tbody>
        <bs-tr>
            <bs-th scope="row">Platform</bs-th>
            <bs-td>18</bs-td>
            <bs-td>24</bs-td>
            <bs-td>42</bs-td>
        </bs-tr>
        <bs-tr>
            <bs-th scope="row">Experience</bs-th>
            <bs-td>12</bs-td>
            <bs-td>20</bs-td>
            <bs-td>32</bs-td>
        </bs-tr>
    </bs-tbody>
    <bs-tfoot>
        <bs-tr>
            <bs-th scope="row">Total</bs-th>
            <bs-td>30</bs-td>
            <bs-td>44</bs-td>
            <bs-td>74</bs-td>
        </bs-tr>
    </bs-tfoot>
</bs-table>

Variants

Use contextual table classes for table, row, and cell variants. Use visible labels or text alongside color so meaning is not conveyed by color alone.

Class Heading Heading
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell
aspnet 

<bs-table-responsive>
    <bs-table>
        <bs-thead>
            <bs-tr>
                <bs-th scope="col">Class</bs-th>
                <bs-th scope="col">Heading</bs-th>
                <bs-th scope="col">Heading</bs-th>
            </bs-tr>
        </bs-thead>
        <bs-tbody>
            <bs-tr>
                <bs-th scope="row">Default</bs-th>
                <bs-td>Cell</bs-td>
                <bs-td>Cell</bs-td>
            </bs-tr>
            <bs-tr table-style="Primary">
                <bs-th scope="row">Primary</bs-th>
                <bs-td>Cell</bs-td>
                <bs-td>Cell</bs-td>
            </bs-tr>
            <bs-tr table-style="Secondary">
                <bs-th scope="row">Secondary</bs-th>
                <bs-td>Cell</bs-td>
                <bs-td>Cell</bs-td>
            </bs-tr>
            <bs-tr table-style="Success">
                <bs-th scope="row">Success</bs-th>
                <bs-td>Cell</bs-td>
                <bs-td>Cell</bs-td>
            </bs-tr>
            <bs-tr table-style="Danger">
                <bs-th scope="row">Danger</bs-th>
                <bs-td>Cell</bs-td>
                <bs-td>Cell</bs-td>
            </bs-tr>
            <bs-tr table-style="Warning">
                <bs-th scope="row">Warning</bs-th>
                <bs-td>Cell</bs-td>
                <bs-td>Cell</bs-td>
            </bs-tr>
            <bs-tr table-style="Info">
                <bs-th scope="row">Info</bs-th>
                <bs-td>Cell</bs-td>
                <bs-td>Cell</bs-td>
            </bs-tr>
            <bs-tr table-style="Light">
                <bs-th scope="row">Light</bs-th>
                <bs-td>Cell</bs-td>
                <bs-td>Cell</bs-td>
            </bs-tr>
            <bs-tr table-style="Dark">
                <bs-th scope="row">Dark</bs-th>
                <bs-td>Cell</bs-td>
                <bs-td>Cell</bs-td>
            </bs-tr>
        </bs-tbody>
    </bs-table>
</bs-table-responsive>

Accented tables

Use Bootstrap contextual classes on rows, cells, or head groups for accents. BCL exposes typed table-level modifiers such as striped, hover, and dark; row, cell, and head contextual variants remain class-based because Bootstrap composes them through table CSS variables.

Component Coverage Notes
Buttons Full Variants, outlines, sizes
Collapse Partial JavaScript binding notes remain explicit
Tables Expanded Helpers cover most markup
aspnet 

<bs-table-responsive>
    <bs-table striped="true" hover="true">
        <bs-thead table-style="Dark">
            <bs-tr>
                <bs-th scope="col">Component</bs-th>
                <bs-th scope="col">Coverage</bs-th>
                <bs-th scope="col">Notes</bs-th>
            </bs-tr>
        </bs-thead>
        <bs-tbody>
            <bs-tr>
                <bs-td>Buttons</bs-td>
                <bs-td>Full</bs-td>
                <bs-td>Variants, outlines, sizes</bs-td>
            </bs-tr>
            <bs-tr table-style="Warning">
                <bs-td>Collapse</bs-td>
                <bs-td>Partial</bs-td>
                <bs-td>JavaScript binding notes remain explicit</bs-td>
            </bs-tr>
            <bs-tr>
                <bs-td>Tables</bs-td>
                <bs-td table-style="Success">Expanded</bs-td>
                <bs-td>Helpers cover most markup</bs-td>
            </bs-tr>
        </bs-tbody>
    </bs-table>
</bs-table-responsive>

How do the variants and accented tables work?

Bootstrap table variants use CSS variables on table, row, and cell selectors. BCL exposes table-level helper properties and allows contextual utility classes on row, cell, and head helpers where Bootstrap expects them.

Striped rows

Set striped for zebra-striping on table rows.

# First Last
1 Mark Otto
2 Jacob Thornton
aspnet 

<bs-table striped="true">
    <bs-thead>
        <bs-tr>
            <bs-th scope="col">#</bs-th>
            <bs-th scope="col">First</bs-th>
            <bs-th scope="col">Last</bs-th>
        </bs-tr>
    </bs-thead>
    <bs-tbody>
        <bs-tr>
            <bs-th scope="row">1</bs-th>
            <bs-td>Mark</bs-td>
            <bs-td>Otto</bs-td>
        </bs-tr>
        <bs-tr>
            <bs-th scope="row">2</bs-th>
            <bs-td>Jacob</bs-td>
            <bs-td>Thornton</bs-td>
        </bs-tr>
    </bs-tbody>
</bs-table>

Striped columns

Set striped-columns for column striping.

Hoverable rows

Combine column striping with hover when rows should show an interactive affordance.

Package Stable Preview Docs
Components Yes No Current
Models Yes No Current
aspnet 

<bs-table striped-columns="true" hover="true">
    <bs-thead>
        <bs-tr>
            <bs-th scope="col">Package</bs-th>
            <bs-th scope="col">Stable</bs-th>
            <bs-th scope="col">Preview</bs-th>
            <bs-th scope="col">Docs</bs-th>
        </bs-tr>
    </bs-thead>
    <bs-tbody>
        <bs-tr>
            <bs-th scope="row">Components</bs-th>
            <bs-td>Yes</bs-td>
            <bs-td>No</bs-td>
            <bs-td>Current</bs-td>
        </bs-tr>
        <bs-tr>
            <bs-th scope="row">Models</bs-th>
            <bs-td>Yes</bs-td>
            <bs-td>No</bs-td>
            <bs-td>Current</bs-td>
        </bs-tr>
    </bs-tbody>
</bs-table>

Table borders

Use table modifier attributes for borders and compact sizing rather than replacing the table helper with raw markup.

Bordered tables

Set bordered to add borders on all table and cell sides.

Tables without borders

Set borderless to remove borders from a table.

Small tables

Set small to compact table cell padding.

Bordered compact table
Cell Cell
Cell Cell
Borderless compact table
Cell Cell
Cell Cell
aspnet 

<bs-row x-gutter="Default3" y-gutter="Default3">
    <bs-div span-md="Six">
        <bs-table small="true" bordered="true">
            <bs-table-caption>Bordered compact table</bs-table-caption>
            <bs-tbody>
                <bs-tr>
                    <bs-td>Cell</bs-td>
                    <bs-td>Cell</bs-td>
                </bs-tr>
                <bs-tr>
                    <bs-td>Cell</bs-td>
                    <bs-td>Cell</bs-td>
                </bs-tr>
            </bs-tbody>
        </bs-table>
    </bs-div>
    <bs-div span-md="Six">
        <bs-table small="true" borderless="true">
            <bs-table-caption>Borderless compact table</bs-table-caption>
            <bs-tbody>
                <bs-tr>
                    <bs-td>Cell</bs-td>
                    <bs-td>Cell</bs-td>
                </bs-tr>
                <bs-tr>
                    <bs-td>Cell</bs-td>
                    <bs-td>Cell</bs-td>
                </bs-tr>
            </bs-tbody>
        </bs-table>
    </bs-div>
</bs-row>

Vertical alignment

Apply Bootstrap alignment utility classes to rows or cells when content height varies. There is no dedicated table-cell vertical alignment property because the standard utility classes compose cleanly with bs-tr and bs-td.

Bottom aligned row Middle aligned cell Top aligned cell
aspnet 

<bs-table bordered="true" style="height: 120px;">
    <bs-tbody>
        <bs-tr vertical-alignment="Bottom">
            <bs-td>Bottom aligned row</bs-td>
            <bs-td vertical-alignment="Middle">Middle aligned cell</bs-td>
            <bs-td vertical-alignment="Top">Top aligned cell</bs-td>
        </bs-tr>
    </bs-tbody>
</bs-table>

Active tables

Use table-active on rows or cells to mark selected state.

Table group dividers

Use group-divider on bs-tbody when a body group needs a stronger top border.

Plan Status Owner
Core Active Platform
Docs Review Web
aspnet 

<bs-table>
    <bs-thead>
        <bs-tr>
            <bs-th scope="col">Plan</bs-th>
            <bs-th scope="col">Status</bs-th>
            <bs-th scope="col">Owner</bs-th>
        </bs-tr>
    </bs-thead>
    <bs-tbody group-divider="true">
        <bs-tr table-active="true">
            <bs-th scope="row">Core</bs-th>
            <bs-td>Active</bs-td>
            <bs-td>Platform</bs-td>
        </bs-tr>
        <bs-tr>
            <bs-th scope="row">Docs</bs-th>
            <bs-td>Review</bs-td>
            <bs-td>Web</bs-td>
        </bs-tr>
    </bs-tbody>
</bs-table>

Nesting

Nested tables do not inherit Bootstrap table styles from a parent table. Add bs-table to the nested table too, and place it inside a regular cell.

How nesting works

Bootstrap scopes table styling to direct child table elements, so nested tables need their own table helper instance.

Project Milestones
Docs
Audit Complete
Parity pass In progress
aspnet 

<bs-table striped="true" bordered="true">
    <bs-thead>
        <bs-tr>
            <bs-th scope="col">Project</bs-th>
            <bs-th scope="col">Milestones</bs-th>
        </bs-tr>
    </bs-thead>
    <bs-tbody>
        <bs-tr>
            <bs-th scope="row">Docs</bs-th>
            <bs-td>
                <bs-table small="true" borderless="true" bottom-margin="None">
                    <bs-tbody>
                        <bs-tr>
                            <bs-td>Audit</bs-td>
                            <bs-td>Complete</bs-td>
                        </bs-tr>
                        <bs-tr>
                            <bs-td>Parity pass</bs-td>
                            <bs-td>In progress</bs-td>
                        </bs-tr>
                    </bs-tbody>
                </bs-table>
            </bs-td>
        </bs-tr>
    </bs-tbody>
</bs-table>

Responsive tables

Wrap wide tables in bs-table-responsive to enable horizontal scrolling without compressing every column.

Always responsive

Use bs-table-responsive without a breakpoint to allow horizontal scrolling at every viewport width.

# Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell
aspnet 

<bs-table-responsive>
    <bs-table small="true">
        <bs-thead>
            <bs-tr>
                <bs-th scope="col">#</bs-th>
                <bs-th scope="col">Heading</bs-th>
                <bs-th scope="col">Heading</bs-th>
                <bs-th scope="col">Heading</bs-th>
                <bs-th scope="col">Heading</bs-th>
                <bs-th scope="col">Heading</bs-th>
                <bs-th scope="col">Heading</bs-th>
            </bs-tr>
        </bs-thead>
        <bs-tbody>
            <bs-tr>
                <bs-th scope="row">1</bs-th>
                <bs-td>Cell</bs-td>
                <bs-td>Cell</bs-td>
                <bs-td>Cell</bs-td>
                <bs-td>Cell</bs-td>
                <bs-td>Cell</bs-td>
                <bs-td>Cell</bs-td>
            </bs-tr>
        </bs-tbody>
    </bs-table>
</bs-table-responsive>

Breakpoint specific

Set breakpoint when horizontal scrolling should only apply below a named Bootstrap breakpoint.

# Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell
aspnet 

<bs-table-responsive breakpoint="Large">
    <bs-table small="true" hover="true">
        <bs-thead>
            <bs-tr>
                <bs-th scope="col">#</bs-th>
                <bs-th scope="col">Heading</bs-th>
                <bs-th scope="col">Heading</bs-th>
                <bs-th scope="col">Heading</bs-th>
                <bs-th scope="col">Heading</bs-th>
                <bs-th scope="col">Heading</bs-th>
            </bs-tr>
        </bs-thead>
        <bs-tbody>
            <bs-tr>
                <bs-th scope="row">1</bs-th>
                <bs-td>Cell</bs-td>
                <bs-td>Cell</bs-td>
                <bs-td>Cell</bs-td>
                <bs-td>Cell</bs-td>
                <bs-td>Cell</bs-td>
            </bs-tr>
        </bs-tbody>
    </bs-table>
</bs-table-responsive>

CSS

Bootstrap table styles are driven by CSS variables, Sass variables, Sass loops, and selector nesting. BCL helpers emit table structure and common modifier classes while leaving theme customization to the approved Bootstrap stylesheet.

Sass variables

Projects that compile Bootstrap Sass can adjust table padding, colors, borders, striping, and hover styles before publishing the CSS bundle.

Sass loops

Bootstrap generates table variant classes from Sass maps. BCL examples use those generated classes for row, cell, and head accents where no dedicated helper property exists.

Customizing

Prefer changing the Bootstrap build or approved theme layer over replacing BCL table helpers with hand-written table markup.