• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Tables

← Previous Next →

What are Bootstrap 4 Tables?

Bootstrap 4 Tables are pre-styled HTML tables enhanced with CSS classes and utilities to improve readability, responsiveness, and visual appeal. Tables are commonly used for displaying structured data, reports, product lists, schedules, and more. Bootstrap 4 provides ready-to-use classes for borders, stripes, hover effects, small tables, and responsive tables.

With mobile-first design, tables can be made scrollable or compact to fit smaller screens without breaking layout.

Basic Table Structure

A simple table in Bootstrap 4 uses the .table class:

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Email</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Alice</td>
      <td>alice@example.com</td>
      <td>Active</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Maria</td>
      <td>maria@example.com</td>
      <td>Inactive</td>
    </tr>
  </tbody>
</table>

  • .table adds padding, border-bottoms, and typography to the table.

  • <thead> defines the header row, <tbody> contains the body rows.

Table Variants

Bootstrap 4 includes multiple table styles for visual distinction:

<table class="table table-striped">
  <!-- Striped rows -->
</table>

<table class="table table-bordered">
  <!-- Borders around all cells -->
</table>

<table class="table table-hover">
  <!-- Row highlights on hover -->
</table>

<table class="table table-sm">
  <!-- Smaller, compact table -->
</table>

  • .table-striped adds alternating row colors.

  • .table-bordered gives cell borders for clarity.

  • .table-hover highlights rows on mouseover for better interactivity.

  • .table-sm reduces padding for compact display.

Contextual Classes

Bootstrap 4 provides contextual classes to indicate status in table rows or cells:

<tr class="table-primary">
  <td>1</td>
  <td>Alice</td>
  <td>Active</td>
</tr>
<tr class="table-success">
  <td>2</td>
  <td>Maria</td>
  <td>Completed</td>
</tr>
<tr class="table-danger">
  <td>3</td>
  <td>Jessica</td>
  <td>Error</td>
</tr>
<tr class="table-warning">
  <td>4</td>
  <td>Emma</td>
  <td>Pending</td>
</tr>
<tr class="table-info">
  <td>5</td>
  <td>Sophia</td>
  <td>Processing</td>
</tr>

  • .table-primary, .table-success, .table-danger, .table-warning, .table-info apply semantic background colors to rows.

  • Useful for status indicators, alerts, or highlighting important rows.

Table Head and Footer

Tables can have separate header and footer rows for clarity:

<thead class="thead-dark">
  <tr>
    <th>#</th>
    <th>Name</th>
    <th>Email</th>
    <th>Status</th>
  </tr>
</thead>

<tfoot class="thead-light">
  <tr>
    <td colspan="4">End of Data</td>
  </tr>
</tfoot>

  • .thead-dark creates dark-themed headers, while .thead-light provides light headers.

  • Footer can display totals, summaries, or notes.

Responsive Tables

Tables often exceed screen width on smaller devices. Bootstrap 4 allows scrollable tables using .table-responsive:

<div class="table-responsive">
  <table class="table table-bordered table-hover">
    <!-- Table content -->
  </table>
</div>

  • .table-responsive wraps the table in a scrollable container on small screens.

  • This preserves layout and avoids breaking content on mobile devices.

Additional Table Utilities

Bootstrap 4 also provides utility classes for text alignment and styling:

<table class="table text-center">
  <tr>
    <td class="text-left">Left aligned</td>
    <td class="text-center">Center aligned</td>
    <td class="text-right">Right aligned</td>
  </tr>
</table>

  • .text-left, .text-center, .text-right control horizontal text alignment.

  • Combine with .table-striped, .table-bordered, or .table-hover for custom layouts.

Best Practices for Bootstrap Tables

  1. Use .table for consistent styling across all tables.

  2. Apply .table-striped or .table-hover for readability and interaction.

  3. Use contextual classes to highlight important rows.

  4. Wrap large tables in .table-responsive for mobile-friendly design.

  5. Align text appropriately using .text-left, .text-center, or .text-right.

  6. Keep tables simple and readable; avoid overloading with too many colors or styles.

  7. Test tables on desktop and mobile screens to ensure proper visibility.

Summary of the Tutorial

This tutorial covered Bootstrap 4 Tables, including basic table structure, table variants, contextual classes, responsive tables, headers and footers, and additional utilities. You learned how to use Bootstrap classes to create readable, structured, and responsive tables suitable for displaying data across all devices. Mastering Bootstrap tables improves data presentation and overall website usability.

Practice Questions

  1. Create a basic table with 4 columns: #, Name, Email, and Status.

  2. Add .table-striped to the table to show alternating row colors.

  3. Apply .table-bordered to add borders around all cells.

  4. Use .table-hover to highlight rows when hovering over them.

  5. Create a compact table using .table-sm with smaller padding.

  6. Apply contextual classes to rows: .table-primary, .table-success, .table-danger, .table-warning, and .table-info.

  7. Add a table header with .thead-dark and a footer with .thead-light.

  8. Wrap a wide table in .table-responsive to make it scrollable on small devices.

  9. Align text in different columns using .text-left, .text-center, and .text-right.

  10. Combine .table-striped, .table-bordered, .table-hover, and .table-sm in a single table for a fully styled example.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top