Tables & Lists

1. Bootstrap Tables

Step 1: Create a Basic Table

Use the .table class to style a table.

👉 Example: Basic Table

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Smith</td>
      <td>jane@example.com</td>
    </tr>
  </tbody>
</table>

✅ Explanation:

.table applies Bootstrap styling to the table.
<thead> and <tbody> separate headings and data rows.

Step 2: Striped Table (Alternate Row Colors)

Use .table-striped to apply zebra striping to rows.

👉 Example: Striped Table

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Laptop</td>
      <td>$1000</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Phone</td>
      <td>$500</td>
    </tr>
  </tbody>
</table>

Step 3: Bordered Table

Use .table-bordered to add borders to table cells.

👉 Example: Bordered Table

<table class="table table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>Country</th>
      <th>Capital</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>USA</td>
      <td>Washington, D.C.</td>
    </tr>
    <tr>
      <td>2</td>
      <td>UK</td>
      <td>London</td>
    </tr>
  </tbody>
</table>

Step 4: Hover Effect on Rows

Use .table-hover to highlight rows on hover.

👉 Example: Hover Table

<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Alice</td>
      <td>Developer</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Bob</td>
      <td>Designer</td>
    </tr>
  </tbody>
</table>

Step 5: Responsive Table

Use .table-responsive to make tables scrollable on small screens.

👉 Example: Responsive Table

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Employee</th>
        <th>Department</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Chris</td>
        <td>Marketing</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Emma</td>
        <td>Sales</td>
      </tr>
    </tbody>
  </table>
</div>

2. Bootstrap Lists

Step 6: Basic List Group

Use .list-group and .list-group-item to create a stylish list.

👉 Example: Basic List Group

<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

✅ Explanation:

.list-group wraps the list.
.list-group-item styles individual items.

Step 7: Active & Disabled List Items

Add .active to highlight an item.
Use .disabled to disable an item.

👉 Example: Active & Disabled List Items

<ul class="list-group">
  <li class="list-group-item active">Active Item</li>
  <li class="list-group-item">Regular Item</li>
  <li class="list-group-item disabled">Disabled Item</li>
</ul>

Step 8: List Group with Links

Use <a> inside a .list-group to create clickable links.

👉 Example: Clickable List Items

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Home</a>
  <a href="#" class="list-group-item list-group-item-action">Services</a>
  <a href="#" class="list-group-item list-group-item-action">Contact</a>
</div>

Step 9: List with Badges (Counters)

Use .badge inside list items for notifications.

👉 Example: List with Badges

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Messages <span class="badge bg-primary rounded-pill">5</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Notifications <span class="badge bg-danger rounded-pill">3</span>
  </li>
</ul>

Conclusion

Bootstrap Tables & Lists make it easy to display structured data with built-in styling and responsiveness. You can use striped rows, hover effects, borders, responsive layouts, and interactive lists to enhance your website's user experience. 🚀

BOOTSTRAP