3. Bootstrap Tables, Buttons, Cards & List Groups

Core Concepts & Rules

• Responsive Table: Wrapping inside
  enables horizontal scrolling.

  Button Variants: btn-primary, btn-success, btn-danger, btn-warning, btn-info, btn-outline-*.

  🔍 Line-by-Line Code Breakdown

  1. Line 1-3:
  creates zebra-striped hoverable table.

  🎯 Interview Focus & Questions

  • Q: What is table-responsive?
    A: A container wrapper enabling horizontal scrolling for wide tables on small viewports.
  💻 Practical Bootstrap Code Example - Styled Tables & Contextual Buttons

  <div class="table-responsive">
    <table class="table table-striped table-hover">
      <thead><tr><th>ID</th><th>Name</th><th>Status</th></tr></thead>
      <tbody><tr><td>101</td><td>Aman</td><td><span class="badge bg-success">Active</span></td></tr></tbody>
    </table>
  </div>

  📤 Expected Rendered Result:

  Zebra-striped table with hover effects and green Active status badge.

  Module 2: Cards, Alerts, Badges & List Groups

  Flexible content containers, status feedback badges, and list groups.

  🇬🇧 English Definition

  A Card is a flexible content container with card-header, card-body, card-title, and card-footer. Alerts provide contextual user feedback.

  🇮🇳 Hinglish Definition

  Card flexible container hai text, images aur actions ke liye. Alert alert-success/danger alert messages dikhane ke liye use hota hai.

  Core Concepts & Rules

  • Card Structure:

    ...

    ...

  • Alerts:
    Warning Message

  🔍 Line-by-Line Code Breakdown

  1. Line 1-5:
     renders styled card content container.

  🎯 Interview Focus & Questions

  • Q: What is a Bootstrap Card?
    A: A flexible content container for text, images, headers, footers, and action buttons.

  💻 Practical Bootstrap Code Example - Cards, Alerts, Badges & List Groups

  <div class="card shadow-sm" style="max-width: 18rem;">
    <div class="card-body">
      <h5 class="card-title">Bootstrap 5</h5>
      <p class="card-text">Learn responsive UI design with Instructor.</p>
      <a href="javascript:void(0)" class="btn btn-primary btn-sm">Explore</a>
    </div>
  </div>

  📤 Expected Rendered Result:

  Card container with title, text description, and small primary button.