Bootstrap Tables & Images

Add .table to any <table> for Bootstrap styling. Variants: .table-striped (zebra rows), .table-bordered, .table-hover (highlight on mouse over), .table-sm (compact).

Tables

Add .table to any <table> for Bootstrap styling. Variants: .table-striped (zebra rows), .table-bordered, .table-hover (highlight on mouse over), .table-sm (compact).

Wrap tables in .table-responsive so they scroll horizontally on small screens instead of breaking the layout.

Real-life example: A styled table is like a neat marksheet — columns line up, alternate rows are shaded, and you can spot your row when you hover.

Striped hover table

<div class="table-responsive">
  <table class="table table-striped table-hover">
    <thead class="table-dark">
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Course</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Ali</td>
        <td>Bootstrap 5</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Sara</td>
        <td>JavaScript</td>
      </tr>
    </tbody>
  </table>
</div>

Images

Use .img-fluid on images so they scale down on small screens (max-width: 100%). Shape helpers: .rounded, .rounded-circle, .img-thumbnail.

Always set alt text for accessibility. Combine with float utilities or grid columns for layouts.

Real-life example: .img-fluid is like a flexible rubber photo frame — it shrinks to fit a small wall but never spills outside the frame.

Responsive and shaped images

<img src="hero.jpg" alt="Team photo" class="img-fluid rounded mb-3" />

<img src="avatar.jpg" alt="Profile" class="rounded-circle" width="80" height="80" />

<img src="product.jpg" alt="Product" class="img-thumbnail" width="150" />