Bootstrap Tables

HTML tables have no style by default. Add the class .table and Bootstrap gives a clean look with the right spacing. Then you can add more classes for different styles.

Basic table

<table class="table">
  <thead>
    <tr><th scope="col">#</th><th scope="col">Name</th><th scope="col">City</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">1</th><td>Anita</td><td>Delhi</td></tr>
    <tr><th scope="row">2</th><td>Ravi</td><td>Pune</td></tr>
    <tr><th scope="row">3</th><td>Maya</td><td>Kolkata</td></tr>
  </tbody>
</table>

Table style classes

Class	Effect
.table-striped	Alternate row colors (zebra)
.table-striped-columns	Alternate column colors
.table-hover	Row highlight on mouse hover
.table-bordered	Borders on all sides
.table-borderless	No borders
.table-sm	Smaller cell padding
.table-dark	Dark table

<table class="table table-striped table-hover table-bordered">
  <thead class="table-dark">
    <tr><th>#</th><th>Product</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>Pen</td><td>10</td></tr>
    <tr><td>2</td><td>Notebook</td><td>45</td></tr>
    <tr><td>3</td><td>Eraser</td><td>5</td></tr>
  </tbody>
</table>

Colored rows and cells

Add a color class on a tr or a td: .table-primary, .table-success, .table-danger, .table-warning and so on. Use .table-active to highlight a row.

<table class="table">
  <tbody>
    <tr class="table-success"><td>Paid</td><td>Order 101</td></tr>
    <tr class="table-warning"><td>Pending</td><td>Order 102</td></tr>
    <tr class="table-danger"><td>Failed</td><td>Order 103</td></tr>
    <tr><td>Normal</td><td class="table-info">Cell color</td></tr>
  </tbody>
</table>

Responsive tables

A wide table can break a small screen. Put it in a .table-responsive wrapper, and it will scroll sideways when needed. Use .table-responsive-md (and others) to make the scroll only below a breakpoint.

<div class="table-responsive">
  <table class="table table-bordered text-nowrap">
    <thead>
      <tr><th>#</th><th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th><th>Column 5</th><th>Column 6</th><th>Column 7</th></tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
    </tbody>
  </table>
</div>

Caption and vertical alignment

<table class="table table-sm align-middle">
  <caption>List of courses</caption>
  <thead><tr><th>Course</th><th>Level</th></tr></thead>
  <tbody>
    <tr><td>HTML</td><td>Beginner</td></tr>
    <tr><td>Bootstrap</td><td>Beginner</td></tr>
  </tbody>
</table>

Group divider

.table-group-divider on a tbody draws a thicker line between the head and the body.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.