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

Bootstrap class: .table

<table class="table">
  <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 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.

Tips 💡

Sass source

/* _print.scss:107 */
.table {
  border-collapse: collapse !important;

  td,
  th {
    background-color: $white !important;
  }
}

/* _print.scss:134 */
.table .thead-dark th {
  color: inherit;
  border-color: $table-border-color;
}

/* _tables.scss:26 */
.table {
  background-color: $body-bg;
}

/* _tables.scss:114 */
.table {
  .thead-dark {
    th {
      color: $table-dark-color;
      background-color: $table-dark-bg;
      border-color: $table-dark-border-color;
    }
  }

  .thead-light {
    th {
      color: $table-head-color;
      background-color: $table-head-bg;
      border-color: $table-border-color;
    }
  }
}

Uses variables

Code copied to the clipboard.

Copying failed

/* _print.scss:107 */
$white

/* _print.scss:134 */
$table-border-color

/* _tables.scss:26 */
$body-bg

/* _tables.scss:114 */
$table-dark-color
$table-dark-bg
$table-dark-border-color
$table-head-color
$table-head-bg
$table-border-color

More in Bootstrap Tables