Bootstrap Tables and Images
With one or two classes, Bootstrap turns plain tables and images into clean, responsive ones.
A Basic Table
Add the class table to any <table>. Bootstrap adds padding, lines between rows and a neat header.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<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="container mt-4">
<table class="table">
<thead>
<tr><th>#</th><th>Student</th><th>Course</th><th>Marks</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Ayesha Khan</td><td>Web Development</td><td>91</td></tr>
<tr><td>2</td><td>Ali Raza</td><td>Graphic Design</td><td>84</td></tr>
<tr><td>3</td><td>Sana Iqbal</td><td>Python</td><td>88</td></tr>
</tbody>
</table>
</div>
</body>
</html>Table Styles
Add these classes next to table:
| Class | Effect |
|---|---|
table-striped | Every other row is shaded |
table-bordered | Borders on all cells |
table-borderless | No borders |
table-hover | Rows highlight when the mouse is over them |
table-sm | Smaller padding, more compact |
table-dark | Dark table with light text |
Coloured Rows and a Responsive Wrapper
You can colour a single row or cell with table-success, table-danger, table-warning and so on. Wrap wide tables in table-responsive so they scroll sideways on small phones instead of breaking the page.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<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="container mt-4">
<div class="table-responsive">
<table class="table table-striped table-hover table-bordered align-middle">
<thead class="table-dark">
<tr><th>Invoice</th><th>Customer</th><th>Date</th><th>Amount</th><th>Status</th></tr>
</thead>
<tbody>
<tr><td>INV-101</td><td>Hamza Traders</td><td>02-10-2026</td><td>Rs 12,500</td><td>Paid</td></tr>
<tr class="table-warning"><td>INV-102</td><td>Karachi Prints</td><td>05-10-2026</td><td>Rs 8,200</td><td>Due soon</td></tr>
<tr class="table-danger"><td>INV-103</td><td>Star Mobiles</td><td>20-09-2026</td><td>Rs 4,750</td><td>Late</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>align-middle centres the cell content vertically. table-dark on <thead> makes only the header dark.
Use colour together with words (like "Paid" or "Late"). Some people cannot tell red and green apart, so colour alone is not enough.
Images
| Class | Effect |
|---|---|
img-fluid | The image never gets wider than its parent (responsive) |
rounded | Slightly rounded corners |
rounded-circle | Round image (use a square picture) |
img-thumbnail | A white border with a light frame |
mx-auto d-block | Centres a block image |
Example
<img src="shop-front.jpg" class="img-fluid rounded" alt="Front of Ali's shop on Tariq Road">
<img src="ayesha.jpg" class="rounded-circle" width="120" height="120" alt="Ayesha, our teacher">
<img src="certificate.jpg" class="img-thumbnail" width="200" alt="Course certificate">img-fluid is the most important one. Without it, a large photo can be wider than a phone screen and make the whole page scroll sideways.
Figures with Captions
Example
<figure class="figure">
<img src="lab.jpg" class="figure-img img-fluid rounded" alt="Computer lab">
<figcaption class="figure-caption">Our computer lab in Orangi Town.</figcaption>
</figure>Always write a helpful alt text. It is read by screen readers and shown if the image fails to load.
Exercise
Exercise
Which class makes table rows change colour when the mouse moves over them?