BootstrapHow-ToBeginner · 3 min read

How to Create Striped Table in Bootstrap Easily

To create a striped table in Bootstrap, add the table and table-striped classes to your <table> element. This applies alternating background colors to table rows, making the table easier to read.

📐

Syntax

Use the table class to style the table and add table-striped to enable striped rows. Place both classes inside the class attribute of the <table> tag.

table: Basic Bootstrap table styling.
table-striped: Adds alternating background colors to rows.

html

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

💻

Example

This example shows a simple striped table with headers and three rows. The table-striped class adds alternating light gray backgrounds to every other row.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Striped Table Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Alice</td>
          <td>28</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Bob</td>
          <td>34</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Charlie</td>
          <td>22</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Output

A table with three rows where every other row has a light gray background, making the rows visually striped.

⚠️

Common Pitfalls

Common mistakes when creating striped tables in Bootstrap include:

Forgetting to add the table class along with table-striped, which means the table won't have Bootstrap styles.
Applying table-striped to elements other than <table>, which has no effect.
Overriding Bootstrap styles with custom CSS that removes the background colors.

html

<!-- Wrong: Missing 'table' class -->
<table class="table-striped">
  <!-- content -->
</table>

<!-- Right: Both classes included -->
<table class="table table-striped">
  <!-- content -->
</table>

📊

Quick Reference

Class	Purpose
table	Basic Bootstrap table styling
table-striped	Adds alternating row background colors
table-bordered	Adds borders around table and cells (optional)
table-hover	Adds hover effect on rows (optional)

✅

Key Takeaways

Add both table and table-striped classes to your <table> for striped rows.

The table-striped class creates alternating background colors for better readability.

Always include the table class to apply Bootstrap's table styles.

Avoid overriding Bootstrap's styles that affect row backgrounds to keep stripes visible.

Use Bootstrap 5.3 or later for the latest stable table styling features.