Invoice Line Items

<div class="container py-5">
  <div class="p-4 border rounded-4 bg-white">
    <div class="d-flex justify-content-between mb-3">
      <div>
        <h4 class="fw-bold mb-0">Invoice #INV-2026-0142</h4><small class="text-muted">Issued Feb 14, 2026 · Due Feb 28, 2026</small>
      </div><span class="badge bg-warning text-dark align-self-center">Unpaid</span>
    </div>
    <table class="table">
      <thead class="table-light">
        <tr>
          <th>Item</th>
          <th>Qty</th>
          <th>Rate</th>
          <th class="text-end">Amount</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Bootstrap component pack</td>
          <td>1</td>
          <td>$49</td>
          <td class="text-end">$49.00</td>
        </tr>
        <tr>
          <td>Custom design (2 pages)</td>
          <td>2</td>
          <td>$120</td>
          <td class="text-end">$240.00</td>
        </tr>
        <tr>
          <td>Support hours</td>
          <td>3</td>
          <td>$25</td>
          <td class="text-end">$75.00</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3" class="text-end fw-bold">Total</td>
          <td class="text-end fw-bold">$364.00</td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>