Bootstrap 5 Learning Kit

Page Navigation:

Tables

Default

# Country Language Capital
1 England English London
2 France French Paris
3 Germany German Berlin

Colors

Use the following contextual color classes for a table (<table>), row (<tr>) or cell (<th> or <td>): .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, and .table-dark.

These color classes work together with all the other table styles.

Table

# Country Language Capital
1 England English London
2 France French Paris
3 Germany German Berlin

Row

# Country Language Capital
1 England English London
2 France French Paris
3 Germany German Berlin

Cell

# Country Language Capital
1 England English London
2 France French Paris
3 Germany German Berlin

Accents

Striped

# Country Language Capital
1 England English London
2 France French Paris
3 Germany German Berlin

Hover

# Country Language Capital
1 England English London
2 France French Paris
3 Germany German Berlin

Striped and hover

# Country Language Capital
1 England English London
2 France French Paris
3 Germany German Berlin

Active row or cell

# Country Language Capital
1 England English London
2 France French Paris
3 Germany German Berlin

Borders

Bordered

# Country Language Capital
1 England English London
2 France French Paris
3 Germany German Berlin

Colored border

# Country Language Capital
1 England English London
2 France French Paris
3 Germany German Berlin

Borderless

# Country Language Capital
1 England English London
2 France French Paris
3 Germany German Berlin

Small

# Country Language Capital
1 England English London
2 France French Paris
3 Germany German Berlin

Vertical alignment

# Country Language Capital
1 England English Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.
2 France French ParLorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.is
3 Germany German Lorem ipsum dolor sit amet, consectetur adipiscing elit. In laoreet pellentesque lorem sed elementum. Suspendisse maximus convallis ex. Etiam eleifend velit leo.

Nesting

# Country Language Capital
1 England English London
2 France French Paris
3
# Country Language Capital
1 England English London
2 France French Paris
3 Germany German Berlin

Head and foot

# Country Language Capital
1 England English London
2 France French Paris
3 Germany German Berlin
Footer Footer Footer Footer

Captions

Default

Table caption
# Country Language Capital
1 England English London
2 France French Paris
3 Germany German Berlin

Top

Table caption
# Country Language Capital
1 England English London
2 France French Paris
3 Germany German Berlin

Responsive

All breakpoints

# Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head
1 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell

Below small

# Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head
1 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell

Below medium

# Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head
1 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell

Below large

# Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head
1 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell

Below extra large

# Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head
1 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell

Below extra extra large

# Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head Table head
1 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell