Bootstrap class: .table-bordered

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

Tips 💡

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

Sass source

/* _print.scss:116 */
.table-bordered {
  th,
  td {
    border: 1px solid $gray-300 !important;
  }
}

/* _tables.scss:48 */
.table-bordered {
  border: $table-border-width solid $table-border-color;

  th,
  td {
    border: $table-border-width solid $table-border-color;
  }

  thead {
    th,
    td {
      border-bottom-width: (2 * $table-border-width);
    }
  }
}

Uses variables

/* _print.scss:116 */
$gray-300

/* _tables.scss:48 */
$table-border-width
$table-border-color
$table-border-width
$table-border-color
$table-border-width

More in Bootstrap Tables

Bootstrap 4 & 5

☝️ This is a preview of the Shuffle Assistant™. Chat with it, or switch to Shuffle to learn about our powerful tools!

Switch to Shuffle

Bootstrap Editor

Shuffle Layout!