mC0de / Bootstrap Elements / Lesson 06 of 07

Bootstrap Table Design

Turn rows and columns into clear, readable data. Learn how to create beautifully styled Bootstrap tables with striped rows, hover effects, borders, status colors, and responsive layouts.

Beginner Friendly Bootstrap 5.3 Responsive Tables Live Sandbox

tables.html

<table class="table table-striped">
  <thead>...</thead>
  <tbody>...</tbody>
</table>

StudentScoreStatus

Alex96%Passed

Jordan82%Passed

Taylor68%Review

01 / Getting Started

What Is Bootstrap Table Design?

Tables organize information into rows and columns. They’re useful for schedules, reports, student grades, product comparisons, and financial information.

Bootstrap transforms ordinary HTML tables into polished, readable layouts using a few CSS classes.

Student	Score	Status
Alex	96%	Passed
Jordan	82%	Passed
Sam	91%	Passed

Remember: Tables are intended for tabular data, not for building the overall layout of a website. Use Bootstrap’s grid and flex utilities for page layouts.

02 / Table Structure

Build Your First Bootstrap Table

Start with a regular HTML <table> element and add Bootstrap’s table class.

<table class="table">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alex</td>
      <td>96%</td>
    </tr>
  </tbody>
</table>

tableApplies Bootstrap’s base table styling.

theadGroups the table’s column headings.

tbodyContains the main data rows.

th scope="col"Identifies a column heading for accessibility.

Each <tr> represents a row. The <td> elements contain individual data cells.

03 / Striped Rows

Improve Readability with Stripes

For tables with many rows, alternating backgrounds can make data easier to follow. Add table-striped alongside the base table class.

<table class="table table-striped">
  ...
</table>

Bootstrap applies subtle alternating row colors automatically, without requiring you to style individual rows.

04 / Hover Effects

Highlight Rows on Hover

The table-hover class highlights rows as users move their mouse over them. This can make dense data easier to scan.

<table class="table table-striped table-hover">
  ...
</table>

Design tip: Hover styling is a visual aid. It doesn’t automatically make a row clickable. If a row performs an action, provide a clear, accessible link or button.

05 / Borders and Compact Tables

Customize Borders and Spacing

Bootstrap includes classes to control borders and cell padding.

table-borderedAdds borders around all cells.

table-borderlessRemoves table borders.

table-smReduces cell padding for a compact layout.

table-group-dividerAdds a stronger divider between table groups.

<table class="table table-bordered table-sm">
  ...
</table>

06 / Colors and Status

Use Contextual Table Colors

Bootstrap provides classes that highlight rows or cells according to their meaning.

<tr class="table-success">
  <td>Alex</td>
  <td>Passed</td>
</tr>

<tr class="table-warning">
  <td>Taylor</td>
  <td>Needs Review</td>
</tr>

Other available classes include table-primary, table-danger, table-info, table-secondary, and table-dark.

Accessibility tip: Don’t communicate a student’s status through color alone. Include a readable label such as “Passed” or “Needs Review.”

07 / Table Headers

Customize Your Header

Use table-light or table-dark on a table header group to change its appearance.

<table class="table">
  <thead class="table-dark">
    <tr>
      <th scope="col">Student</th>
      <th scope="col">Grade</th>
    </tr>
  </thead>
</table>

You can also include a <caption> to describe what the table represents. This helps readers and assistive technologies understand the data.

08 / Responsive Tables

Make Tables Work on Mobile

Tables with several columns can become wider than a phone screen. Wrap the table inside table-responsive to allow horizontal scrolling.

<div class="table-responsive">
  <table class="table table-striped">
    ...
  </table>
</div>

You can also use breakpoint-specific wrappers such as table-responsive-md when you only want horizontal scrolling below a particular screen size.

Important: Apply table-responsive to the wrapping <div>, not the table itself. On smaller screens, users can scroll sideways to see additional columns.

09 / Combining Classes

Build a Professional Data Table

Bootstrap classes work together. For example, you can combine stripes, hover effects, borders, and responsive scrolling in one table.

<div class="table-responsive">
  <table class="table table-striped
                table-hover table-bordered">
    <thead class="table-dark">
      ...
    </thead>
    <tbody>
      ...
    </tbody>
  </table>
</div>

Choose the features that improve readability rather than applying every style automatically.

Your Turn / Practice Time

🚀 mC0de Challenge

Build a Student Performance Dashboard

You’re creating a simple dashboard that displays student scores and performance. Make the table professional, easy to read, and mobile-friendly.

Your mission: Complete these five tasks using the Sandbox below.

Create a table with Student, Course, Score, and Status columns. Add at least four students with different scores. Apply table-striped, table-hover, and table-bordered. Add Passed and Needs Review labels, using Bootstrap contextual styling. Wrap your table in table-responsive and test it at different screen widths.

Check off each task as you finish. Use Load Solution to compare your work.

Interactive Coding Workspace

mC0de Bootstrap Sandbox

Edit your table, run the code, and inspect the live result.

HTML Input / tables.html

<div class=”container py-4″>
  <h2>Student Performance</h2>
  <p>Review the latest course results.</p>

  <table class=”table”>
    <thead>
      <tr>
        <th scope=”col”>Student</th>
        <th scope=”col”>Course</th>
        <th scope=”col”>Score</th>
        <th scope=”col”>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alex</td>
        <td>HTML</td>
        <td>96%</td>
        <td>Passed</td>
      </tr>
      <tr>
        <td>Jordan</td>
        <td>CSS</td>
        <td>82%</td>
        <td>Passed</td>
      </tr>
      <!– Add more students here –>
    </tbody>
  </table>
</div>

Live Result / Bootstrap 5.3

Ready to code. Edit the table to see your changes.

Lesson Recap

✓ What You’ve Learned

table applies Bootstrap’s standard table styling.
table-striped adds alternating row backgrounds.
table-hover highlights rows on mouse hover.
table-bordered adds borders around cells.
table-borderless removes borders, while table-sm reduces padding.
Contextual classes and badges help communicate data status.
table-dark and table-light style table headers.
table-responsive provides horizontal scrolling for wide tables.
Semantic headings, scopes, and captions make tables easier to understand.

Up next: Bootstrap Form Design — our final lesson in the Bootstrap Elements learning path!

Your Learning Journey

Bootstrap Elements Learning Path 0 of 7 completed

Lesson 06 / Table Design 0% Complete

Nice Work! 🎉

You’ve learned how to build responsive Bootstrap tables, customize their appearance, highlight important data, and make information easier to read on different devices. Ready to record your progress?

Lesson 06 of 07 · Bootstrap Elements

table-design