Bootstrap Tables

A Bootstrap table is a normal HTML table enhanced with Bootstrap CSS classes.

<table class="table">

    <tr>
        <th>Name</th>
        <th>Course</th>
    </tr>

    <tr>
        <td>Rahul</td>
        <td>HTML</td>
    </tr>

</table>

The .table class adds basic Bootstrap styling to an HTML table.

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

It provides spacing, alignment, borders between rows, and a clean default appearance.

Table headings are normally placed inside <thead>.

<table class="table">

    <thead>
        <tr>
            <th>Student ID</th>
            <th>Name</th>
            <th>Course</th>
        </tr>
    </thead>

</table>

Using <thead> makes the table structure easier to understand and maintain.

Table data rows are normally placed inside <tbody>.

<tbody>

    <tr>
        <td>101</td>
        <td>Rahul</td>
        <td>ADCA</td>
    </tr>

</tbody>

The <tbody> element contains the main data displayed in the table.

The <tfoot> element can be used for totals or summary information.

<tfoot>

    <tr>
        <th colspan="2">
        Total Students
        </th>

        <th>
        50
        </th>
    </tr>

</tfoot>

The .table-striped class adds alternating background styling to table rows.

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

The .table-bordered class adds borders around the table and its cells.

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

The .table-borderless class removes the table's borders.

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

The .table-hover class adds a hover effect to table rows.

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

Move the mouse over the rows to see the hover effect.

The .table-sm class reduces the padding inside table cells.

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

Small tables are useful when a large amount of data needs to fit into a limited space.

Bootstrap supports contextual table color utilities. For example, table-dark creates a dark table.

<table class="table table-dark">

    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            </tr>
    </thead>

</table>

You can combine .table-dark and .table-striped.

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

Bootstrap contextual classes can be applied to individual rows or cells.

<tr class="table-success">
    <td>Rahul</td>
    <td>Paid</td>
</tr>

<tr class="table-warning">
    <td>Amit</td>
    <td>Pending</td>
</tr>

<tr class="table-danger">
    <td>Ravi</td>
    <td>Failed</td>
</tr>

Contextual table classes can also be applied to individual cells.

<td class="table-success">
Paid
</td>

<td class="table-danger">
Due
</td>

The .table-responsive class helps a wide table scroll horizontally when necessary on smaller screens.

<div class="table-responsive">

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

</div>

This prevents a wide table from forcing the entire page to overflow horizontally.

Bootstrap also provides breakpoint-specific responsive table wrappers. For example, .table-responsive-md makes the table responsive below the medium breakpoint.

<div class="table-responsive-md">

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

</div>

Other available breakpoint versions include:

• .table-responsive-sm
• .table-responsive-md
• .table-responsive-lg
• .table-responsive-xl
• .table-responsive-xxl

Bootstrap utility classes can be used to control the alignment of table content.

<td class="text-center">
100
</td>

<td class="text-end">
₹500
</td>

The align-middle, align-top, and align-bottom utilities can be used for vertical alignment.

<td class="align-middle">
Content
</td>

The HTML <caption> element can provide a description or title for a table.

<table class="table">

    <caption>
    List of Students
    </caption>

    ...
    
</table>

Captions can help explain what the table represents.

Badges can be used inside tables to show statuses.

<td>

    <span class="badge text-bg-success">
    Active
    </span>

</td>

Buttons can be placed inside table cells for actions such as View, Edit, and Delete.

<td>

    <a href="#"
    class="btn btn-primary btn-sm">
    View
    </a>

    <a href="#"
    class="btn btn-warning btn-sm">
    Edit
    </a>

    <a href="#"
    class="btn btn-danger btn-sm">
    Delete
    </a>

</td>

Small images or profile pictures can be placed inside table cells.

<img src="profile.jpg"
class="rounded-circle"
style="width:40px;height:40px;"
alt="Student">

Student	Course
Rahul	ADCA
Amit	Python

Bootstrap tables are useful for displaying payment information.

Attendance records can be displayed using badges and table styling.

Tables are also useful for displaying examination marks.

Tables should be structured properly so that their information is easy to understand, including for users of assistive technologies.

• Use <caption> when a table needs a title or description.
• Use <thead> for table headings.
• Use <tbody> for the main table data.
• Use <tfoot> for totals or summaries when appropriate.
• Use meaningful column headings.
• Do not use tables for page layout.
• Make wide tables usable on smaller screens.

Common mistakes include:

• Using tables for page layout.
• Creating very wide tables without responsive handling.
• Using unclear column headings.
• Putting too much information into one cell.
• Using color as the only indicator of status.
• Forgetting mobile users.
• Using excessive buttons inside every row.

A good table should present information in a clear and easy-to-scan format.

Important Bootstrap table classes include:

.table
.table-striped
.table-bordered
.table-borderless
.table-hover
.table-sm
.table-dark
.table-success
.table-danger
.table-warning
.table-info
.table-primary
.table-responsive
.table-responsive-sm
.table-responsive-md
.table-responsive-lg
.table-responsive-xl
.table-responsive-xxl

These classes can be combined to create different table designs.

Here is a practical student management table using several Bootstrap features.

<div class="table-responsive">

<table class="table table-striped table-hover table-bordered">

<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Course</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>

<tbody>

<tr>

<td>101</td>

<td>Rahul</td>

<td>ADCA</td>

<td>
<span class="badge text-bg-success">
Active
</span>
</td>

<td>

<a href="#"
class="btn btn-primary btn-sm">
View
</a>

<a href="#"
class="btn btn-warning btn-sm">
Edit
</a>

<a href="#"
class="btn btn-danger btn-sm">
Delete
</a>

</td>

</tr>

</tbody>

</table>

</div>

The following example combines responsive behavior, striped rows, hover effects, borders, badges, buttons, and table headings.

<div class="table-responsive">

<table class="table table-striped table-hover table-bordered">

    <caption>
    Student Management
    </caption>

    <thead>

        <tr>
            <th>ID</th>
            <th>Student</th>
            <th>Course</th>
            <th>Fee</th>
            <th>Status</th>
            <th>Actions</th>
        </tr>

    </thead>

    <tbody>

        <tr>

            <td>101</td>

            <td>Rahul Kumar</td>

            <td>ADCA</td>

            <td>₹10,000</td>

            <td>
                <span class="badge text-bg-success">
                Paid
                </span>
            </td>

            <td>

                <a href="#"
                class="btn btn-primary btn-sm">
                View
                </a>

                <a href="#"
                class="btn btn-warning btn-sm">
                Edit
                </a>

            </td>

        </tr>

        <tr>

            <td>102</td>

            <td>Amit Kumar</td>

            <td>Python</td>

            <td>₹15,000</td>

            <td>
                <span class="badge text-bg-warning">
                Pending
                </span>
            </td>

            <td>

                <a href="#"
                class="btn btn-primary btn-sm">
                View
                </a>

                <a href="#"
                class="btn btn-warning btn-sm">
                Edit
                </a>

            </td>

        </tr>

    </tbody>

</table>

</div>