Bootstrap Table Card Example

How to use this Bootstrap snippet
Monthly Transactions
Invoice Customer Product Price Status
#HO3210
Web, UI Design
Oliver
United States
Bootstrap
v5.3+ 		$495 Pending
#DR8672
Web, UX Design
Emma
United Kingdom
WordPress
v6.3+ 		$950 Paid
#SA2910
Web, SEO
Isabella
Canada
React
v18+ 		$700 On Hold
#BD1019
SEM, SEO
William
UAE
Vue
v3+ 		$875 Negotiating

How to use this Bootstrap Table Card Example

Place the code in the <body> for Interface 
          
<!-- Table 1 - Bootstrap Brain Component -->
<section class="py-3 py-md-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-lg-9 col-xl-8">
        <div class="card widget-card border-light shadow-sm">
          <div class="card-body p-4">
            <h5 class="card-title widget-card-title mb-4">Monthly Transactions</h5>
            <div class="table-responsive">
              <table class="table table-borderless bsb-table-xl text-nowrap align-middle m-0">
                <thead>
                  <tr>
                    <th>Invoice</th>
                    <th>Customer</th>
                    <th>Product</th>
                    <th>Price</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <h6 class="mb-1">#HO3210</h6>
                      <span class="text-secondary fs-7">Web, UI Design</span>
                    </td>
                    <td>
                      <h6 class="mb-1">Oliver</h6>
                      <span class="text-secondary fs-7">United States</span>
                    </td>
                    <td>
                      <h6 class="mb-1">Bootstrap</h6>
                      <span class="text-secondary fs-7">v5.3+</span>
                    </td>
                    <td>$495</td>
                    <td>
                      <span class="badge rounded-pill bg-danger">Pending</span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <h6 class="mb-1">#DR8672</h6>
                      <span class="text-secondary fs-7">Web, UX Design</span>
                    </td>
                    <td>
                      <h6 class="mb-1">Emma</h6>
                      <span class="text-secondary fs-7">United Kingdom</span>
                    </td>
                    <td>
                      <h6 class="mb-1">WordPress</h6>
                      <span class="text-secondary fs-7">v6.3+</span>
                    </td>
                    <td>$950</td>
                    <td>
                      <span class="badge rounded-pill bg-success">Paid</span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <h6 class="mb-1">#SA2910</h6>
                      <span class="text-secondary fs-7">Web, SEO</span>
                    </td>
                    <td>
                      <h6 class="mb-1">Isabella</h6>
                      <span class="text-secondary fs-7">Canada</span>
                    </td>
                    <td>
                      <h6 class="mb-1">React</h6>
                      <span class="text-secondary fs-7">v18+</span>
                    </td>
                    <td>$700</td>
                    <td>
                      <span class="badge rounded-pill bg-info">On Hold</span>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <h6 class="mb-1">#BD1019</h6>
                      <span class="text-secondary fs-7">SEM, SEO</span>
                    </td>
                    <td>
                      <h6 class="mb-1">William</h6>
                      <span class="text-secondary fs-7">UAE</span>
                    </td>
                    <td>
                      <h6 class="mb-1">Vue</h6>
                      <span class="text-secondary fs-7">v3+</span>
                    </td>
                    <td>$875</td>
                    <td>
                      <span class="badge rounded-pill bg-warning">Negotiating</span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Place the <link> tag in the <head> for CSS 
          
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/components/tables/table-1/assets/css/table-1.css">

This Bootstrap Table Card Example typically showcases a predefined layout demonstrating the integration of a table within a card component using the Bootstrap framework for websites. This example aims to display a visually appealing and organized representation of tabular data within a card structure. The primary purpose of this example is to offer website developers a visual reference or starting point for implementing tables within card components using Bootstrap.