What is the table-striped class?

The table-striped class adds alternating row colors (zebra striping) to improve readability. Every other row gets a slightly different background color.

How do I make tables responsive in Bootstrap?

Wrap your table in a div with the table-responsive class. This makes tables scroll horizontally on screens smaller than 992px, ensuring mobile-friendly display.

What table color variants are available?

Bootstrap offers table-primary, table-success, table-danger, table-warning, table-info, and table-light variants. These can be applied to individual rows (tr) or table sections.

How do I add borders to Bootstrap tables?

Use the table-bordered class to add borders to all table cells. Combine with other classes like table-striped for enhanced styling.

Can I highlight table rows on hover?

Yes, use the table-hover class to highlight table rows when users hover over them. This improves user interaction and readability.

Bootstrap Tables — Complete Guide to Styled Data Tables with Examples | TipsInLearning

Bootstrap Lesson

Bootstrap Tables

Q: What is Bootstrap Tables?

Bootstrap Tables are HTML tables styled with Bootstrap's built-in CSS classes. They provide professional-looking, responsive data tables with minimal custom styling required.

Master Bootstrap Tables — learn how to create professional data tables with striped rows, borders, hover effects, responsive design, and color variants. Complete guide with real-world examples.

22 min read

Beginner

Data Tables

Free Course

Course ProgressBootstrap

What You'll Learn in This Lesson

Basic Bootstrap table structure

Table styling classes

Striped rows, borders, and hover

Making responsive tables

Color variants for rows

Real-world table examples

What is Bootstrap Tables?

Bootstrap Tables are HTML tables enhanced with Bootstrap's built-in CSS classes. They provide professional-looking, responsive data tables with minimal custom styling required. Bootstrap automatically applies proper padding, borders, alignment, and responsiveness to create modern tables.

Why use Bootstrap Tables?

Professional Look

Automatically styled with proper spacing and typography

Responsive Design

Automatically adjusts for mobile and tablet screens

Quick Setup

Minimal HTML code and no custom CSS needed

Common uses for Bootstrap Tables

Product lists — Display products with prices and details
Pricing tables — Compare different pricing plans
User data — Show user information in dashboards
Reports — Display statistics and analytics
Comparison charts — Compare features between options

Basic Table Structure

All Bootstrap tables start with standard HTML table elements. Understanding the structure is essential for using Bootstrap table classes correctly.

HTML table structure

HTML — Table Structure

<table>
  <!-- Table header -->
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>

  <!-- Table body -->
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

Table elements explained

Element	Purpose	Notes
<table>	Table container	Wraps all table content
<thead>	Table header section	Contains header row with column names
<tbody>	Table body section	Contains data rows
<tr>	Table row	Contains cells in a horizontal row
<th>	Header cell	Used in thead for column names
<td>	Data cell	Contains actual table data

The Table Class

The .table class is the foundation for Bootstrap tables. Add it to the <table> element to apply Bootstrap's default table styling.

Basic table example

HTML — Basic Bootstrap Table

<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>john@email.com</td>
    </tr>
  </tbody>
</table>

The .table class adds:

Padding — Proper spacing inside cells
Borders — Subtle borders between rows
Alignment — Proper text alignment
Typography — Professional font sizing

Striped Tables

Add the .table-striped class to create alternating row colors (zebra striping). This improves readability, especially for large tables with many rows.

Striped table example

HTML — Striped Table

<table class="table table-striped">
  <!-- Table content -->
</table>

Striped tables alternate between normal and slightly darker background colors, making it easier to follow rows across columns.

Bordered Tables

The .table-bordered class adds borders to all cells, creating a grid-like appearance. This is useful for displaying structured data that requires clear cell boundaries.

Bordered table example

HTML — Bordered Table

<table class="table table-bordered">
  <!-- Table content -->
</table>

Hover Effect Tables

Add the .table-hover class to highlight rows when users hover over them. This improves user interaction and makes it clear which row is being selected.

Hover table example

HTML — Hover Table

<table class="table table-hover">
  <!-- Table content -->
</table>

Usage tip: Combine table-hover with table-striped for best readability. The hover effect makes it clear which row the user is interacting with.

Dark Tables

Use the .table-dark class to create a dark-themed table with light text. This is perfect for dark mode interfaces and modern dashboards.

Dark table example

HTML — Dark Table

<table class="table table-dark">
  <!-- Table content -->
</table>

Responsive Tables

Mobile-friendly tables are essential for modern websites. Wrap your table in a .table-responsive div to make it scroll horizontally on smaller screens.

Responsive table structure

HTML — Responsive Table

<div class="table-responsive">
  <table class="table">
    <!-- Table content -->
  </table>
</div>

The .table-responsive class enables horizontal scrolling on screens smaller than 992px. You can also use responsive variants:

table-responsive-sm

table-responsive-md

table-responsive-lg

table-responsive-xl

Table Color Variants

Bootstrap provides color classes for rows and individual cells. Use semantic colors to highlight important information.

Row color classes

Class	Color	Use Case
table-primary	Blue	Primary information
table-success	Green	Positive results
table-danger	Red	Errors or critical data
table-warning	Yellow	Warnings or caution
table-info	Light Blue	Information
table-light	Light Gray	Subtle highlighting

Color example

HTML — Table Colors

<table class="table">
  <tbody>
    <tr class="table-success">
      <td>Success row</td>
    </tr>
    <tr class="table-danger">
      <td>Danger row</td>
    </tr>
  </tbody>
</table>

Table Sizing

Control table and cell sizes with Bootstrap utilities. Use .table-sm for compact tables or adjust padding as needed.

Small table example

HTML — Compact Table

<table class="table table-sm">
  <!-- Compact table with less padding -->
</table>

Combined Table Styling

Combine multiple table classes for enhanced styling. This is the most common approach for professional-looking tables.

Combined example

HTML — Combined Styling

<div class="table-responsive">
  <table class="table table-striped table-bordered table-hover">
    <thead class="table-dark">
      <tr>
        <th>ID</th>
        <th>Product</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>101</td>
        <td>Laptop</td>
        <td>$899</td>
      </tr>
    </tbody>
  </table>
</div>

What this includes

Responsive wrapper — Mobile-friendly scrolling
Striped rows — Alternating colors for readability
Borders — Clear cell boundaries
Hover effect — Interactive highlighting
Dark header — Professional appearance

Real-World Table Examples

Example 1: User List

HTML — User List Table

<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead class="table-dark">
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-success">
        <td>1</td>
        <td>John</td>
        <td>john@email.com</td>
        <td>Active</td>
      </tr>
    </tbody>
  </table>
</div>

Example 2: Pricing Table

HTML — Pricing Table

<table class="table table-bordered">
  <thead class="table-primary">
    <tr>
      <th>Plan</th>
      <th>Features</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Basic</td>
      <td>10 GB Storage</td>
      <td>$9.99/mo</td>
    </tr>
  </tbody>
</table>

Bootstrap Tables Best Practices

Always use table-responsive

Wrap tables in table-responsive for mobile-friendly design

Use proper semantic HTML

Use thead, tbody, and th tags correctly for accessibility

Combine classes strategically

Use table-striped and table-hover together for best UX

Use colors meaningfully

Use table-danger for errors, table-success for positive results

Keep headers visible

Use table-dark headers to make column names stand out

Lesson Summary — Key Takeaways

1Bootstrap tables use .table class for professional styling with minimal CSS

2Combine classes: striped + bordered + hover for enhanced tables

3Always wrap tables in table-responsive for mobile compatibility

4Use semantic color variants to highlight important data

5Dark headers with table-dark improve table readability

6Tables are perfect for dashboards, pricing, lists, and reports

Frequently Asked Questions

Common questions about Bootstrap Tables:

Bootstrap Tables are HTML tables enhanced with Bootstrap's CSS classes. They provide professional styling, responsiveness, and various visual options like striped rows, borders, and hover effects without custom CSS.

The table-striped class adds alternating row colors (zebra striping) to tables, improving readability. Every other row gets a slightly darker background color, making it easier to follow rows across columns.

Wrap your table in a div with the table-responsive class. This enables horizontal scrolling on screens smaller than 992px, making tables mobile-friendly and preventing layout breaking on small devices.

Bootstrap offers table-primary (blue), table-success (green), table-danger (red), table-warning (yellow), table-info (light blue), and table-light classes. Apply them to rows or table sections to highlight important data.

Yes, you can combine multiple classes like table table-striped table-bordered table-hover. This creates more feature-rich tables with enhanced styling and interactivity.

Use the table-hover class to highlight rows when users hover over them. This improves user experience by making it clear which row is being selected or viewed.

Bootstrap Tables Tutorial with Examples