Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Tables in Bootstrap 5
Tables: Bootstrap provides a clean, consistent table styling with various options for customization.
Introduction to Bootstrap Tables
Bootstrap 5 provides extensive styling options for HTML tables. Tables are enhanced with custom CSS classes to make them more attractive and functional.
Basic Table Structure
| Feature | Description | Class |
|---|---|---|
| Basic Table | Default table styling | .table |
| Striped Table | Alternating row colors | .table-striped |
| Bordered Table | Borders on all sides | .table-bordered |
| Hoverable Table | Highlight rows on hover | .table-hover |
| Small Table | Reduced padding | .table-sm |
Note: Always wrap your table in a
.table-responsive div for horizontal scrolling on small screens.Table Anatomy
HTML Table Structure
<!-- Basic Bootstrap table structure -->
<table class="table">
<thead> <!-- Table header -->
<tr> <!-- Table row -->
<th>Header 1</th> <!-- Table header cell -->
<th>Header 2</th>
</tr>
</thead>
<tbody> <!-- Table body -->
<tr> <!-- Data row -->
<td>Data 1</td> <!-- Table data cell -->
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
<tfoot> <!-- Table footer -->
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
</table>Table Parts Explained
<table>- Main table container<thead>- Table header section<tbody>- Table body section<tfoot>- Table footer section<tr>- Table row<th>- Header cell (bold and centered)<td>- Data cell<caption>- Table caption
Tip: Always use
<thead> for header rows and <tbody> for data rows for proper semantic structure.Table Accessibility
Accessibility Best Practices
Essential Accessibility Features
- Scope attribute: Use
scope=&qout;col&qout;for column headers andscope=&qout;row&qout;for row headers - Caption: Always include a
<caption>for table description - Table headers: Every data cell should be associated with a header
- Color contrast: Ensure sufficient contrast for text and backgrounds
- Keyboard navigation: Tables should be navigable with keyboard
Accessible Table Example
<!-- Accessible table structure -->
<table class="table">
<caption>Employee Salary Information</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Department</th>
<th scope="col">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">John Doe</th>
<td>Engineering</td>
<td>$85,000</td>
</tr>
<tr>
<th scope="row">Jane Smith</th>
<td>Marketing</td>
<td>$75,000</td>
</tr>
</tbody>
</table>Table Components Integration
Tables with Buttons
| Product | Price | Action |
|---|---|---|
| Laptop | $999 | |
| Phone | $699 |
<!-- Table with buttons -->
<table class="table">
<tbody>
<tr>
<td>Product Name</td>
<td>
<button class="btn btn-sm btn-primary">
Edit
</button>
<button class="btn btn-sm btn-danger">
Delete
</button>
</td>
</tr>
</tbody>
</table>Tables with Badges
| Task | Status | Priority |
|---|---|---|
| Design Review | Completed | Medium |
| Code Deployment | Pending | High |
<!-- Table with badges -->
<table class="table">
<tbody>
<tr>
<td>Task Name</td>
<td>
<span class="badge bg-success">
Completed
</span>
</td>
</tr>
</tbody>
</table>Table with Images
Images in Tables
| Image | Product | Description | Price |
|---|---|---|---|
| Laptop Pro | High performance laptop for professionals | $1,299 | |
| Wireless Mouse | Ergonomic wireless mouse with long battery | $49 | |
| Keyboard | Mechanical keyboard with RGB lighting | $129 |
<!-- Table with images -->
<table class="table">
<tbody>
<tr>
<td>
<img src="product.jpg"
alt="Product Name"
class="img-thumbnail"
width="50">
</td>
<td>Product Name</td>
<td>Description</td>
</tr>
</tbody>
</table>
<!-- Alternative: using avatar class -->
<td>
<div class="avatar">
<img src="product.jpg"
alt="Product"
class="rounded-circle"
width="40"
height="40">
</div>
</td>Table with Form Elements
Tables with Checkboxes
| Name | ||
|---|---|---|
| John Doe | john@example.com | |
| Jane Smith | jane@example.com | |
| Bob Johnson | bob@example.com |
<!-- Table with checkboxes -->
<table class="table">
<thead>
<tr>
<th>
<input type="checkbox"
class="form-check-input">
</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox"
class="form-check-input">
</td>
<td>John Doe</td>
</tr>
</tbody>
</table>Tables with Input Fields
| Product | Quantity | Price |
|---|---|---|
| Laptop | $999 | |
| Mouse | $49 | |
| Keyboard | $129 |
<!-- Table with input fields -->
<table class="table">
<tbody>
<tr>
<td>Product Name</td>
<td>
<input type="number"
class="form-control form-control-sm"
value="1"
min="1"
style="width: 80px">
</td>
<td>$99.99</td>
</tr>
</tbody>
</table>Table Nesting
Nested Tables
| Department | Manager | Employees | ||||||
|---|---|---|---|---|---|---|---|---|
| Engineering | John Smith |
| ||||||
| Marketing | Sarah Davis |
|
Note: Nested tables should be used sparingly as they can make the table structure complex and harder to read on mobile devices.
Table Performance Considerations
Performance Tips
- Limit rows: Display only necessary rows (use pagination)
- Virtual scrolling: For very large tables, consider virtual scrolling
- Lazy loading: Load table data as needed
- Minimize columns: Only show essential columns
- Optimize images: Compress and resize images in tables
- Server-side processing: For large datasets, process sorting/filtering on server
- Use table-sm: Smaller tables render faster
Mobile Optimization
- Always use
.table-responsive - Hide non-essential columns on mobile
- Consider card layout instead of tables for mobile
- Touch targets: Make interactive elements at least 44×44 pixels
- Horizontal scrolling: Ensure scrolling is smooth on touch devices
- Font size: Use readable font sizes for mobile
- Tap targets: Space out interactive elements
Customizing Tables with SCSS
SCSS Customization
Customize table styles in your SCSS variables:
// Customize table variables
$table-cell-padding-y: 1rem;
$table-cell-padding-x: 1.5rem;
$table-cell-padding-y-sm: .5rem;
$table-cell-padding-x-sm: .75rem;
// Border customization
$table-border-width: 2px;
$table-border-color: #dee2e6;
// Striped table customization
$table-striped-bg: rgba($primary, .05);
$table-striped-color: $body-color;
// Hover table customization
$table-hover-bg: rgba($primary, .1);
$table-hover-color: $body-color;
// Active table customization
$table-active-bg: $table-hover-bg;
// Table variants (theme colors)
$table-variants: (
"primary": shift-color($primary, $table-bg-scale),
"secondary": shift-color($secondary, $table-bg-scale),
"success": shift-color($success, $table-bg-scale),
"info": shift-color($info, $table-bg-scale),
"warning": shift-color($warning, $table-bg-scale),
"danger": shift-color($danger, $table-bg-scale),
"light": $light,
"dark": $dark,
);
// Import Bootstrap
@import "bootstrap/scss/bootstrap";Tip: You can also create custom table classes by extending Bootstrap's table classes in your SCSS.
Best Practices Summary
Table Design Best Practices
- ✅ Always use
<thead>,<tbody>, and<tfoot>for semantic structure - ✅ Include table captions for accessibility
- ✅ Use
scopeattributes for header cells - ✅ Wrap tables in
.table-responsivefor mobile - ✅ Choose appropriate table variant based on data type
- ✅ Use proper alignment for different data types (numbers right, text left)
- ✅ Implement pagination for large datasets
Common Mistakes to Avoid
- ❌ Using tables for layout purposes (use CSS Grid or Flexbox instead)
- ❌ Not making tables responsive
- ❌ Overloading tables with too much data
- ❌ Ignoring accessibility requirements
- ❌ Using too many colors and styles that distract from data
- ❌ Not testing on mobile devices
- ❌ Forgetting to add proper headers and captions
