is now part of Shuffle™. The new editor includes templates for Bootstrap, Bulma, Material-UI, and Tailwind CSS.
Switch to Shuffle →
← all Bootstrap classes list

Bootstrap class: .table-striped

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

Preview

# First Name Last Name
1 Mark Otto
2 Jacob Thornton

Check .table-striped in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →
Open in Visual Editor →

Tips 💡

You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.

Sass source

/* _tables.scss:77 */
.table-striped {
  tbody tr:nth-of-type(#{$table-striped-order}) {
    background-color: $table-accent-bg;
  }
}

Uses variables

Code copied to the clipboard.

Copying failed

/* _tables.scss:77 */
$table-striped-order}
$table-accent-bg

More in Bootstrap Tables

Bootstrap 4 & 5