Bootstrap Table Card Snippet

How to use this Bootstrap snippet
Marketing Campaigns
Campaign Client Project Status Budget
Twitter
SMM
Oliver
United States
Bootstrap
v5.3+ 		Pending $495
Facebook
PPC
Emma
United Kingdom
WordPress
v6.3+ 		Paid $950
Github
PPC
Isabella
Canada
React
v18+ 		Paused $700
YouTube
SMM
William
UAE
Vue
v3+ 		Active $875
Google
SEM
Preston
Australia
Svelte
v4+ 		Closed $1230

How to use this Bootstrap Table Card Snippet

Place the code in the <body> for Interface 
          
<!-- Table 2 - 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">Marketing Campaigns</h5>
            <div class="table-responsive">
              <table class="table table-borderless bsb-table-xl text-nowrap align-middle m-0">
                <thead>
                  <tr>
                    <th>Campaign</th>
                    <th>Client</th>
                    <th>Project</th>
                    <th>Status</th>
                    <th>Budget</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <div class="d-flex align-items-center">
                        <span class="fs-6 bsb-w-35 bsb-h-35 text-bg-primary rounded-circle d-flex align-items-center justify-content-center me-2">
                          <i class="bi bi-twitter-x"></i>
                        </span>
                        <div>
                          <h6 class="m-0">Twitter</h6>
                          <span class="text-secondary fs-7">SMM</span>
                        </div>
                      </div>
                    </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>
                      <span class="badge bg-danger bsb-w-85">Pending</span>
                    </td>
                    <td>$495</td>
                  </tr>
                  <tr>
                    <td>
                      <div class="d-flex align-items-center">
                        <span class="fs-6 bsb-w-35 bsb-h-35 text-bg-success rounded-circle d-flex align-items-center justify-content-center me-2">
                          <i class="bi bi-facebook"></i>
                        </span>
                        <div>
                          <h6 class="m-0">Facebook</h6>
                          <span class="text-secondary fs-7">PPC</span>
                        </div>
                      </div>
                    </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>
                      <span class="badge bg-success bsb-w-85">Paid</span>
                    </td>
                    <td>$950</td>
                  </tr>
                  <tr>
                    <td>
                      <div class="d-flex align-items-center">
                        <span class="fs-6 bsb-w-35 bsb-h-35 text-bg-danger rounded-circle d-flex align-items-center justify-content-center me-2">
                          <i class="bi bi-github"></i>
                        </span>
                        <div>
                          <h6 class="m-0">Github</h6>
                          <span class="text-secondary fs-7">PPC</span>
                        </div>
                      </div>
                    </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>
                      <span class="badge bg-info bsb-w-85">Paused</span>
                    </td>
                    <td>$700</td>
                  </tr>
                  <tr>
                    <td>
                      <div class="d-flex align-items-center">
                        <span class="fs-6 bsb-w-35 bsb-h-35 bg-info text-white rounded-circle d-flex align-items-center justify-content-center me-2">
                          <i class="bi bi-youtube"></i>
                        </span>
                        <div>
                          <h6 class="m-0">YouTube</h6>
                          <span class="text-secondary fs-7">SMM</span>
                        </div>
                      </div>
                    </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>
                      <span class="badge bg-warning bsb-w-85">Active</span>
                    </td>
                    <td>$875</td>
                  </tr>
                  <tr>
                    <td>
                      <div class="d-flex align-items-center">
                        <span class="fs-6 bsb-w-35 bsb-h-35 bg-warning text-white rounded-circle d-flex align-items-center justify-content-center me-2">
                          <i class="bi bi-google"></i>
                        </span>
                        <div>
                          <h6 class="m-0">Google</h6>
                          <span class="text-secondary fs-7">SEM</span>
                        </div>
                      </div>
                    </td>
                    <td>
                      <h6 class="mb-1">Preston</h6>
                      <span class="text-secondary fs-7">Australia</span>
                    </td>
                    <td>
                      <h6 class="mb-1">Svelte</h6>
                      <span class="text-secondary fs-7">v4+</span>
                    </td>
                    <td>
                      <span class="badge bg-primary bsb-w-85">Closed</span>
                    </td>
                    <td>$1230</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://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/components/tables/table-2/assets/css/table-2.css">

The Bootstrap Table Card Snippet is a layout example demonstrating how to integrate a table within a card component using the Bootstrap framework for websites. This snippet can help developers customize and incorporate similar designs into their websites to present tabular data clearly and organized, making it easy for users to understand and navigate.