What does the .table-striped class do?

Adds alternating row background colors for readability

Adds a border around every cell in the table

Highlights only the header row in a different color

What is the effect of adding .table-hover to a table?

Highlights a row's background when the user hovers it

Automatically sorts rows whenever they're hovered

Makes table rows draggable to reorder them

How do you make a wide table scroll horizontally on small screens?

Add .table-fluid directly on the element

Tables scroll horizontally by default with no extra markup

What does the .table-sm class do?

Reduces cell padding to make the table more compact

Restricts the table's width to the small breakpoint only

Hides the table entirely on small screens

How do you emphasize one table row, like a warning row?

Add a contextual class like .table-warning to the

Add .bg-warning to each individual in that row

Bootstrap Tables

Tables display data in neat rows and columns, and Bootstrap makes them look clean with almost no effort. By adding a single class you get better spacing and borders, and with a few more classes you can add stripes, hover effects, borders, colors, and responsive scrolling. In this lesson you will learn how to build and style tables the Bootstrap way.

The Basic .table Class

Start with a normal HTML table made of <table>, <thead>, <tbody>, <tr>, <th>, and <td> elements. Then add the .table class to the <table> tag. Bootstrap immediately improves the spacing, adds light horizontal borders, and gives the table a consistent look.

A basic Bootstrap table

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Aisha</td>
      <td>Designer</td>
    </tr>
    <tr>
      <td>Ben</td>
      <td>Developer</td>
    </tr>
  </tbody>
</table>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Striped Rows, Bordered, and Hover

You can layer extra classes on top of .table to change how the table looks. Add .table-striped for zebra stripes on alternate rows, .table-bordered to draw borders around every cell, and .table-hover to highlight a row when the mouse moves over it.

Combining table styles

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<table class="table table-striped table-hover table-bordered">
  <thead>
    <tr><th>Product</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Notebook</td><td>$3</td></tr>
    <tr><td>Pen</td><td>$1</td></tr>
    <tr><td>Eraser</td><td>$1</td></tr>
  </tbody>
</table>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Class	Effect
.table	Base styling, required for all the others
.table-striped	Adds zebra striping to table rows
.table-bordered	Adds borders on all sides of every cell
.table-borderless	Removes all borders
.table-hover	Highlights a row on mouse hover
.table-sm	Makes the table more compact

Colored Tables and Rows

Bootstrap offers contextual color classes for whole tables and for individual rows or cells. Use .table-dark for a dark table, or add classes like .table-success and .table-danger to a <tr> to color a single row.

Coloring rows

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<table class="table">
  <tbody>
    <tr class="table-success"><td>Order shipped</td></tr>
    <tr class="table-warning"><td>Payment pending</td></tr>
    <tr class="table-danger"><td>Order cancelled</td></tr>
  </tbody>
</table>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Note: You can also color just the header. Add .table-light or .table-dark to the <thead> to make it stand out from the body rows.

Responsive Tables

Wide tables can overflow small screens. Wrap your table in a <div> with the class .table-responsive and Bootstrap will add horizontal scrolling on narrow devices, so the table stays usable on phones without breaking the layout.

Making a table responsive

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr><th>ID</th><th>Name</th><th>Email</th><th>Country</th></tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>Priya</td><td>priya@mail.com</td><td>India</td></tr>
    </tbody>
  </table>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Always begin with the .table class on the table element.
Stack extra classes like .table-striped and .table-hover to combine effects.
Use contextual classes such as .table-success on a <tr> to color a single row.
Wrap wide tables in .table-responsive so they scroll on small screens.

Exercise: Bootstrap Tables

What does the base .table class provide?

Keep Going

Bootstrap Interview QuestionsPractice real questions asked for Bootstrap Frontend Developer SalarySee what Frontend Developer roles pay in the market Auto Apply for JobsApply to open roles related to Bootstrap and tweak your resume