Card

Cards are flexible content containers with optional header, footer, images and lists. Use them for products, profiles, pricing plans, dashboard widgets and articles, and lay them out with the grid, card groups or row-cols for equal heights.

1Basic card

Image on top, a title, some text and a button.

Sponsorship

The new mobile agenda gives new ideas to life wherever you are.

Learn more

<div class="card" style="max-width: 20rem;">
  <img src="../assets/img/photo-1.svg" class="card-img-top" alt="Ticketing">
  <div class="card-body">
    <h5 class="card-title">Sponsorship</h5>
    <p class="card-text">The new mobile agenda gives new ideas to life wherever you are.</p>
    <a href="#" class="btn btn-primary">Learn more</a>
  </div>
</div>

2Header and footer

card-header and card-footer frame the body; the footer often holds meta text.

AnnouncementTeam

A guide to live streaming

Our venue booking brings every detail in view from the very first day. A smart idea brings projects moving forward all year round.

Posted 21 hours ago

<div class="card">
  <div class="card-header flex justify-between items-center">
    <span class="font-semibold"><i class="bi bi-megaphone-fill" aria-hidden="true"></i> Announcement</span><span class="badge text-bg-primary">Team</span>
  </div>
  <div class="card-body">
    <h5 class="card-title">A guide to live streaming</h5>
    <p class="card-text">Our venue booking brings every detail in view from the very first day. A smart idea brings projects moving forward all year round.</p>
  </div>
  <div class="card-footer text-muted small">
    Posted 21 hours ago
  </div>
</div>

3Pricing cards

Three plans with equal heights; the recommended plan is highlighted.

Starter

$9/mo

Networking lounges
Hands-on workshops

Team

$29/mo

Certificates
Networking lounges
World-class speakers

Business

$79/mo

Recorded sessions
World-class speakers
Networking lounges
Mobile agenda

<div class="row row-cols-1 row-cols-md-3 g-3 text-center">
  <div class="col">
    <div class="card h-full">
      <div class="card-header">
        &nbsp;
      </div>
      <div class="card-body flex flex-col">
        <h5 class="card-title">Starter</h5>
        <div class="display-6 font-bold my-2">
          $9<small class="text-base font-normal text-muted">/mo</small>
        </div>
        <ul class="list-unstyled small text-start mx-auto mb-6">
          <li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Networking lounges</li>
          <li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Hands-on workshops</li>
        </ul>
        <button type="button" class="btn btn-outline-primary mt-auto w-full">Choose Starter</button>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-full border-primary shadow-md">
      <div class="card-header text-bg-primary">
        Most popular
      </div>
      <div class="card-body flex flex-col">
        <h5 class="card-title">Team</h5>
        <div class="display-6 font-bold my-2">
          $29<small class="text-base font-normal text-muted">/mo</small>
        </div>
        <ul class="list-unstyled small text-start mx-auto mb-6">
          <li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Certificates</li>
          <li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Networking lounges</li>
          <li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> World-class speakers</li>
        </ul>
        <button type="button" class="btn btn-primary mt-auto w-full">Choose Team</button>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-full">
      <div class="card-header">
        &nbsp;
      </div>
      <div class="card-body flex flex-col">
        <h5 class="card-title">Business</h5>
        <div class="display-6 font-bold my-2">
          $79<small class="text-base font-normal text-muted">/mo</small>
        </div>
        <ul class="list-unstyled small text-start mx-auto mb-6">
          <li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Recorded sessions</li>
          <li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> World-class speakers</li>
          <li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Networking lounges</li>
          <li class="mb-1"><span class="text-success"><i class="bi bi-check2" aria-hidden="true"></i></span> Mobile agenda</li>
        </ul>
        <button type="button" class="btn btn-outline-primary mt-auto w-full">Choose Business</button>
      </div>
    </div>
  </div>
</div>

4Profile card

Cover image, overlapping avatar, stats and actions for a user profile.

Felix Ashford

Customer Success · Dublin

264

Posts

81.7k

Followers

593

Following

<div class="card text-center overflow-hidden" style="max-width: 20rem;">
  <img src="../assets/img/wide-2.svg" class="card-img-top object-cover" style="height: 90px;" alt="">
  <div class="card-body pt-0">
    <img src="../assets/img/avatar-1.svg" alt="Felix Ashford" class="rounded-full border border-4 border-white ca-card-av" width="88" height="88">
    <h5 class="card-title mt-2 mb-0">Felix Ashford</h5>
    <p class="text-muted small">Customer Success &middot; Dublin</p>
    <div class="flex justify-around border-t border-b py-2 mb-4 small">
      <div>
        <div class="font-bold">
          264
        </div>
        Posts
      </div>
      <div>
        <div class="font-bold">
          81.7k
        </div>
        Followers
      </div>
      <div>
        <div class="font-bold">
          593
        </div>
        Following
      </div>
    </div>
    <div class="flex gap-2 justify-center">
      <button type="button" class="btn btn-primary btn-sm">Follow</button>
      <button type="button" class="btn btn-outline-secondary btn-sm">Message</button>
    </div>
  </div>
</div>

5Horizontal card

Image and text side by side using the grid; it stacks on small screens.

Story notes for attendees

This calm dashboard connects the whole team on the same page in just a few clicks.

Updated 54 min ago

<div class="card overflow-hidden" style="max-width: 560px;">
  <div class="row g-0">
    <div class="col-sm-4">
      <img src="../assets/img/square-3.svg" class="img-fluid h-full object-cover" alt="The practical community checklist">
    </div>
    <div class="col-sm-8">
      <div class="card-body">
        <h5 class="card-title">Story notes for attendees</h5>
        <p class="card-text">This calm dashboard connects the whole team on the same page in just a few clicks.</p>
        <p class="card-text"><small class="text-muted">Updated 54 min ago</small></p>
      </div>
    </div>
  </div>
</div>

6Image overlay

Text over the image with card-img-overlay and a dark gradient for contrast.

Panel

Three days that change how you work

Apr 4, 2026

<div class="card text-white border-0 overflow-hidden" style="max-width: 32rem;">
  <img src="../assets/img/photo-6.svg" class="card-img" alt="Join the conference of the year">
  <div class="card-img-overlay flex flex-col justify-end ca-card-shade">
    <span class="badge text-bg-light self-start mb-2">Panel</span>
    <h4 class="card-title">Three days that change how you work</h4>
    <p class="card-text small mb-0">Apr 4, 2026</p>
  </div>
</div>

7KPI cards

Small stat cards for dashboards: value, trend and a tinted icon.

Revenue

$48,403.11

24% vs last month

New customers

6.2k

8% vs last month

Orders

1.4k

12% vs last month

Refund rate

5.6%

13% vs last month

<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
  <div class="col">
    <div class="card h-full">
      <div class="card-body">
        <div class="flex justify-between items-start">
          <div>
            <div class="small text-muted">
              Revenue
            </div>
            <div class="text-xl font-bold">
              $48,403.11
            </div>
          </div>
          <span class="rounded-lg p-2 bg-primary-subtle text-primary-emphasis"><i class="bi bi-currency-dollar" aria-hidden="true"></i></span>
        </div>
        <div class="small mt-2 text-success">
          <i class="bi bi-arrow-up-right" aria-hidden="true"></i> 24% vs last month
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-full">
      <div class="card-body">
        <div class="flex justify-between items-start">
          <div>
            <div class="small text-muted">
              New customers
            </div>
            <div class="text-xl font-bold">
              6.2k
            </div>
          </div>
          <span class="rounded-lg p-2 bg-success-subtle text-success-emphasis"><i class="bi bi-people-fill" aria-hidden="true"></i></span>
        </div>
        <div class="small mt-2 text-success">
          <i class="bi bi-arrow-up-right" aria-hidden="true"></i> 8% vs last month
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-full">
      <div class="card-body">
        <div class="flex justify-between items-start">
          <div>
            <div class="small text-muted">
              Orders
            </div>
            <div class="text-xl font-bold">
              1.4k
            </div>
          </div>
          <span class="rounded-lg p-2 bg-warning-subtle text-warning-emphasis"><i class="bi bi-cart-check-fill" aria-hidden="true"></i></span>
        </div>
        <div class="small mt-2 text-success">
          <i class="bi bi-arrow-up-right" aria-hidden="true"></i> 12% vs last month
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-full">
      <div class="card-body">
        <div class="flex justify-between items-start">
          <div>
            <div class="small text-muted">
              Refund rate
            </div>
            <div class="text-xl font-bold">
              5.6%
            </div>
          </div>
          <span class="rounded-lg p-2 bg-danger-subtle text-danger-emphasis"><i class="bi bi-graph-down-arrow" aria-hidden="true"></i></span>
        </div>
        <div class="small mt-2 text-danger">
          <i class="bi bi-arrow-down-right" aria-hidden="true"></i> 13% vs last month
        </div>
      </div>
    </div>
  </div>
</div>

8Card with list group

A flush list group inside a card, with a footer link.

Top tickets

Full access pass782
Full access pass89
Group bundle27

View all

<div class="card" style="max-width: 22rem;">
  <div class="card-header font-semibold">
    Top tickets
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item flex justify-between">Full access pass<span class="text-muted">782</span></li>
    <li class="list-group-item flex justify-between">Full access pass<span class="text-muted">89</span></li>
    <li class="list-group-item flex justify-between">Group bundle<span class="text-muted">27</span></li>
  </ul>
  <div class="card-footer bg-transparent">
    <a href="#" class="small">View all <i class="bi bi-arrow-right" aria-hidden="true"></i></a>
  </div>
</div>

9Card with tabs

Nav tabs in the card header switch the body content through the tab data API.

This elegant story brings complex tasks into simple steps without the usual hassle. Our live streaming helps decisions quicker and clearer from the very first day.

Mobile agenda
Recorded sessions

“This fast workflow shows time back in your day for teams of every size.”

<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs" role="tablist">
      <li class="nav-item" role="presentation"><button class="nav-link active" id="ctab-877-tab" data-ui-toggle="tab" data-ui-target="#ctab-877" type="button" role="tab" aria-controls="ctab-877" aria-selected="true">Overview</button></li>
      <li class="nav-item" role="presentation"><button class="nav-link" id="ctab-878-tab" data-ui-toggle="tab" data-ui-target="#ctab-878" type="button" role="tab" aria-controls="ctab-878" aria-selected="false">Specs</button></li>
      <li class="nav-item" role="presentation"><button class="nav-link" id="ctab-879-tab" data-ui-toggle="tab" data-ui-target="#ctab-879" type="button" role="tab" aria-controls="ctab-879" aria-selected="false">Reviews</button></li>
    </ul>
  </div>
  <div class="card-body tab-content">
    <div class="tab-pane fade show active" id="ctab-877" role="tabpanel" aria-labelledby="ctab-877-tab" tabindex="0">
      <p class="mb-0">This elegant story brings complex tasks into simple steps without the usual hassle. Our live streaming helps decisions quicker and clearer from the very first day.</p>
    </div>
    <div class="tab-pane fade" id="ctab-878" role="tabpanel" aria-labelledby="ctab-878-tab" tabindex="0">
      <ul class="mb-0">
        <li>Mobile agenda</li>
        <li>Recorded sessions</li>
      </ul>
    </div>
    <div class="tab-pane fade" id="ctab-879" role="tabpanel" aria-labelledby="ctab-879-tab" tabindex="0">
      <p class="mb-0"><span class="text-warning" aria-label="Rated 4.5 out of 5"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-half" aria-hidden="true"></i></span> &ldquo;This fast workflow shows time back in your day for teams of every size.&rdquo;</p>
    </div>
  </div>
</div>

10Background colours

text-bg-* colours the whole card with matching readable text.

Primary

This elegant team helps time back in your day wherever you are.

Success

A fast idea keeps new ideas to life for teams of every size.

Danger

Our ticketing turns the whole team on the same page for teams of every size.

Warning

The new hands-on workshops shows you focused on what matters wherever you are.

Info

A simple process makes you focused on what matters on any device.

Dark

A powerful journey shows you focused on what matters without extra tools.

<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
  <div class="col">
    <div class="card text-bg-primary h-full">
      <div class="card-header">
        Primary
      </div>
      <div class="card-body">
        <p class="card-text small mb-0">This elegant team helps time back in your day wherever you are.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card text-bg-success h-full">
      <div class="card-header">
        Success
      </div>
      <div class="card-body">
        <p class="card-text small mb-0">A fast idea keeps new ideas to life for teams of every size.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card text-bg-danger h-full">
      <div class="card-header">
        Danger
      </div>
      <div class="card-body">
        <p class="card-text small mb-0">Our ticketing turns the whole team on the same page for teams of every size.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card text-bg-warning h-full">
      <div class="card-header">
        Warning
      </div>
      <div class="card-body">
        <p class="card-text small mb-0">The new hands-on workshops shows you focused on what matters wherever you are.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card text-bg-info h-full">
      <div class="card-header">
        Info
      </div>
      <div class="card-body">
        <p class="card-text small mb-0">A simple process makes you focused on what matters on any device.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card text-bg-dark h-full">
      <div class="card-header">
        Dark
      </div>
      <div class="card-body">
        <p class="card-text small mb-0">A powerful journey shows you focused on what matters without extra tools.</p>
      </div>
    </div>
  </div>
</div>

11Border colours

border-* utilities colour just the outline and header line.

Primary border

The new recorded sessions makes decisions quicker and clearer in just a few clicks.

Success border

This simple project brings complex tasks into simple steps wherever you are.

Danger border

This powerful process gives customers coming back in just a few clicks.

<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
  <div class="col">
    <div class="card border-primary h-full">
      <div class="card-header bg-transparent border-primary text-primary font-semibold">
        Primary border
      </div>
      <div class="card-body">
        <p class="card-text small mb-0">The new recorded sessions makes decisions quicker and clearer in just a few clicks.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card border-success h-full">
      <div class="card-header bg-transparent border-success text-success font-semibold">
        Success border
      </div>
      <div class="card-body">
        <p class="card-text small mb-0">This simple project brings complex tasks into simple steps wherever you are.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card border-danger h-full">
      <div class="card-header bg-transparent border-danger text-danger font-semibold">
        Danger border
      </div>
      <div class="card-body">
        <p class="card-text small mb-0">This powerful process gives customers coming back in just a few clicks.</p>
      </div>
    </div>
  </div>
</div>

12Product cards

Shop cards with label, wishlist button, rating, price and add-to-cart.

-11%

Workshop

Workshop ticket

(544)

$383.99

Workshop

VIP pass

(499)

$335.99

Workshop

Virtual pass

(273)

$86.00

<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3">
  <div class="col">
    <div class="card h-full">
      <div class="relative">
        <img src="../assets/img/product-1.svg" class="card-img-top" alt="Workshop ticket"><span class="badge text-bg-danger absolute top-0 start-0 m-2">-11%</span>
        <button type="button" class="btn btn-light btn-sm rounded-full absolute top-0 end-0 m-2" aria-label="Add to wishlist"><i class="bi bi-heart-fill" aria-hidden="true"></i></button>
      </div>
      <div class="card-body flex flex-col">
        <div class="small text-muted">
          Workshop
        </div>
        <h6 class="card-title">Workshop ticket</h6>
        <div class="small mb-2">
          <span class="text-warning" aria-label="Rated 3.9 out of 5"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-half" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i></span> <span class="text-muted">(544)</span>
        </div>
        <div class="flex justify-between items-center mt-auto">
          <span class="text-lg font-bold">$383.99</span>
          <button type="button" class="btn btn-primary btn-sm"><i class="bi bi-cart-plus-fill" aria-hidden="true"></i> Add</button>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-full">
      <div class="relative">
        <img src="../assets/img/product-2.svg" class="card-img-top" alt="VIP pass">
        <button type="button" class="btn btn-light btn-sm rounded-full absolute top-0 end-0 m-2" aria-label="Add to wishlist"><i class="bi bi-heart-fill" aria-hidden="true"></i></button>
      </div>
      <div class="card-body flex flex-col">
        <div class="small text-muted">
          Workshop
        </div>
        <h6 class="card-title">VIP pass</h6>
        <div class="small mb-2">
          <span class="text-warning" aria-label="Rated 4.6 out of 5"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-half" aria-hidden="true"></i></span> <span class="text-muted">(499)</span>
        </div>
        <div class="flex justify-between items-center mt-auto">
          <span class="text-lg font-bold">$335.99</span>
          <button type="button" class="btn btn-primary btn-sm"><i class="bi bi-cart-plus-fill" aria-hidden="true"></i> Add</button>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-full">
      <div class="relative">
        <img src="../assets/img/product-3.svg" class="card-img-top" alt="Virtual pass">
        <button type="button" class="btn btn-light btn-sm rounded-full absolute top-0 end-0 m-2" aria-label="Add to wishlist"><i class="bi bi-heart-fill" aria-hidden="true"></i></button>
      </div>
      <div class="card-body flex flex-col">
        <div class="small text-muted">
          Workshop
        </div>
        <h6 class="card-title">Virtual pass</h6>
        <div class="small mb-2">
          <span class="text-warning" aria-label="Rated 5.0 out of 5"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i></span> <span class="text-muted">(273)</span>
        </div>
        <div class="flex justify-between items-center mt-auto">
          <span class="text-lg font-bold">$86.00</span>
          <button type="button" class="btn btn-primary btn-sm"><i class="bi bi-cart-plus-fill" aria-hidden="true"></i> Add</button>
        </div>
      </div>
    </div>
  </div>
</div>

13Blog post card

Category, title, excerpt and an author footer with avatar.

tutorial

What's new in panel

Our ticketing lets new ideas to life without extra tools.

Mason Silva

Jul 24, 2026 · 12 min read

<div class="card h-full" style="max-width: 22rem;">
  <img src="../assets/img/photo-8.svg" class="card-img-top" alt="Inside the powerful launch">
  <div class="card-body">
    <span class="badge bg-primary-subtle text-primary-emphasis mb-2">tutorial</span>
    <h5 class="card-title"><a href="#" class="link-body-emphasis no-underline">What&#39;s new in panel</a></h5>
    <p class="card-text text-muted">Our ticketing lets new ideas to life without extra tools.</p>
  </div>
  <div class="card-footer bg-transparent flex items-center gap-2">
    <img src="../assets/img/avatar-4.svg" alt="Mason Silva" class="rounded-full shrink-0" width="32" height="32">
    <div class="small">
      <div class="font-semibold">
        Mason Silva
      </div>
      <div class="text-muted">
        Jul 24, 2026 &middot; 12 min read
      </div>
    </div>
  </div>
</div>

14Card group

card-group joins cards edge to edge with equal heights; they stack below sm.

Reliable update

A fast idea makes time back in your day wherever you are.

51 min ago

Secure process

The new networking lounges guides complex tasks into simple steps wherever you are.

yesterday

Clear experience

A focused journey turns your work organised wherever you are.

5 days ago

<div class="card-group">
  <div class="card">
    <img src="../assets/img/photo-9.svg" class="card-img-top" alt="Gallery image 1">
    <div class="card-body">
      <h5 class="card-title">Reliable update</h5>
      <p class="card-text small">A fast idea makes time back in your day wherever you are.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">51 min ago</small>
    </div>
  </div>
  <div class="card">
    <img src="../assets/img/photo-10.svg" class="card-img-top" alt="Gallery image 2">
    <div class="card-body">
      <h5 class="card-title">Secure process</h5>
      <p class="card-text small">The new networking lounges guides complex tasks into simple steps wherever you are.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">yesterday</small>
    </div>
  </div>
  <div class="card">
    <img src="../assets/img/photo-11.svg" class="card-img-top" alt="Gallery image 3">
    <div class="card-body">
      <h5 class="card-title">Clear experience</h5>
      <p class="card-text small">A focused journey turns your work organised wherever you are.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">5 days ago</small>
    </div>
  </div>
</div>

15Responsive card grid

row-cols and h-100 give a grid of equal-height cards that reflows by breakpoint.

Honest idea

The new networking lounges shows complex tasks into simple steps with friendly support.

Flexible routine

A flexible idea guides you focused on what matters all year round. This friendly update brings your work organised all year round.

Friendly dashboard

A simple plan connects time back in your day all year round.

Reliable team

Our venue booking turns the whole team on the same page from the very first day. Our ticketing guides customers coming back all year round.

<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
  <div class="col">
    <div class="card h-full shadow-sm border-0">
      <img src="../assets/img/square-5.svg" class="card-img-top" alt="Project 1">
      <div class="card-body">
        <h6 class="card-title">Honest idea</h6>
        <p class="card-text small text-muted mb-0">The new networking lounges shows complex tasks into simple steps with friendly support.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-full shadow-sm border-0">
      <img src="../assets/img/square-6.svg" class="card-img-top" alt="Project 2">
      <div class="card-body">
        <h6 class="card-title">Flexible routine</h6>
        <p class="card-text small text-muted mb-0">A flexible idea guides you focused on what matters all year round. This friendly update brings your work organised all year round.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-full shadow-sm border-0">
      <img src="../assets/img/square-7.svg" class="card-img-top" alt="Project 3">
      <div class="card-body">
        <h6 class="card-title">Friendly dashboard</h6>
        <p class="card-text small text-muted mb-0">A simple plan connects time back in your day all year round.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-full shadow-sm border-0">
      <img src="../assets/img/square-8.svg" class="card-img-top" alt="Project 4">
      <div class="card-body">
        <h6 class="card-title">Reliable team</h6>
        <p class="card-text small text-muted mb-0">Our venue booking turns the whole team on the same page from the very first day. Our ticketing guides customers coming back all year round.</p>
      </div>
    </div>
  </div>
</div>

16Testimonial card

A quote with rating and the customer's photo and role.

The new networking lounges makes customers coming back without extra tools. The new hands-on workshops keeps data easy to understand wherever you are.

Diego Harlow

Frontend Engineer

<div class="card border-0 bg-surface-3" style="max-width: 30rem;">
  <div class="card-body p-6">
    <div class="text-4xl leading-none text-primary">
      <i class="bi bi-quote" aria-hidden="true"></i>
    </div>
    <blockquote class="blockquote mb-4"><p class="text-base">The new networking lounges makes customers coming back without extra tools. The new hands-on workshops keeps data easy to understand wherever you are.</p></blockquote>
    <div class="mb-4">
      <span class="text-warning" aria-label="Rated 5.0 out of 5"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i></span>
    </div>
    <div class="flex items-center gap-4">
      <img src="../assets/img/avatar-5.svg" alt="Diego Harlow" class="rounded-full shrink-0" width="44" height="44">
      <div>
        <div class="font-semibold">
          Diego Harlow
        </div>
        <div class="small text-muted">
          Frontend Engineer
        </div>
      </div>
    </div>
  </div>
</div>

17Activity card

A dashboard widget listing recent events with tinted icons.

Recent activitySee all

Kenji Tanaka placed a new order

22 hours ago

Hana Carter left a comment

just now

Kenji Quinn joined the team

yesterday

<div class="card" style="max-width: 26rem;">
  <div class="card-header flex justify-between items-center">
    <span class="font-semibold">Recent activity</span><a href="#" class="small">See all</a>
  </div>
  <div class="card-body">
    <div class="flex gap-4 mb-4">
      <span class="rounded-full bg-success-subtle text-success-emphasis inline-flex items-center justify-center shrink-0" style="width: 36px; height: 36px;"><i class="bi bi-cart-check-fill" aria-hidden="true"></i></span>
      <div class="small">
        <strong>Kenji Tanaka</strong> placed a new order
        <div class="text-muted">
          22 hours ago
        </div>
      </div>
    </div>
    <div class="flex gap-4 mb-4">
      <span class="rounded-full bg-primary-subtle text-primary-emphasis inline-flex items-center justify-center shrink-0" style="width: 36px; height: 36px;"><i class="bi bi-chat-left-text-fill" aria-hidden="true"></i></span>
      <div class="small">
        <strong>Hana Carter</strong> left a comment
        <div class="text-muted">
          just now
        </div>
      </div>
    </div>
    <div class="flex gap-4 mb-4">
      <span class="rounded-full bg-info-subtle text-info-emphasis inline-flex items-center justify-center shrink-0" style="width: 36px; height: 36px;"><i class="bi bi-person-plus-fill" aria-hidden="true"></i></span>
      <div class="small">
        <strong>Kenji Quinn</strong> joined the team
        <div class="text-muted">
          yesterday
        </div>
      </div>
    </div>
  </div>
</div>

18Loading placeholder

placeholder-glow shapes stand in for content while it loads.

<div class="card" aria-hidden="true" style="max-width: 20rem;">
  <div class="bg-surface-2" style="height: 140px;">
  </div>
  <div class="card-body">
    <h5 class="card-title placeholder-glow"><span class="placeholder col-6"></span></h5>
    <p class="card-text placeholder-glow"><span class="placeholder col-7"></span> <span class="placeholder col-4"></span> <span class="placeholder col-4"></span> <span class="placeholder col-6"></span></p>
    <a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
  </div>
</div>

19Newsletter card

A card with a small form for collecting email sign-ups.

Get the Brand name 20 newsletter

One email a month. A clear team brings time back in your day at a fair price.

<div class="card text-center" style="max-width: 26rem;">
  <div class="card-body p-6">
    <div class="text-3xl text-primary">
      <i class="bi bi-envelope-paper-fill" aria-hidden="true"></i>
    </div>
    <h5 class="card-title">Get the Brand name 20 newsletter</h5>
    <p class="card-text text-muted small">One email a month. A clear team brings time back in your day at a fair price.</p>
    <form class="flex flex-col sm:flex-row gap-2">
      <label class="sr-only" for="news-email-880">Email address</label>
      <input type="email" class="form-control" id="news-email-880" placeholder="you@example.com">
      <button type="submit" class="btn btn-primary whitespace-nowrap">Subscribe</button>
    </form>
  </div>
</div>

20Clickable feature cards

stretched-link makes the whole card clickable; a hover lift shows it.

<div class="row row-cols-1 row-cols-md-3 g-3">
  <div class="col">
    <div class="card h-full ca-card-hover">
      <div class="card-body">
        <span class="inline-flex rounded-lg p-2 mb-4 text-xl bg-primary-subtle text-primary-emphasis"><i class="bi bi-lightning-charge-fill" aria-hidden="true"></i></span>
        <h5 class="card-title"><a href="#" class="stretched-link link-body-emphasis no-underline">Networking lounges</a></h5>
        <p class="card-text small text-muted mb-0">This friendly workflow helps customers coming back with friendly support.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-full ca-card-hover">
      <div class="card-body">
        <span class="inline-flex rounded-lg p-2 mb-4 text-xl bg-primary-subtle text-primary-emphasis"><i class="bi bi-shield-lock-fill" aria-hidden="true"></i></span>
        <h5 class="card-title"><a href="#" class="stretched-link link-body-emphasis no-underline">Networking lounges</a></h5>
        <p class="card-text small text-muted mb-0">Our sponsorship brings the whole team on the same page without the usual hassle.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-full ca-card-hover">
      <div class="card-body">
        <span class="inline-flex rounded-lg p-2 mb-4 text-xl bg-primary-subtle text-primary-emphasis"><i class="bi bi-graph-up-arrow" aria-hidden="true"></i></span>
        <h5 class="card-title"><a href="#" class="stretched-link link-body-emphasis no-underline">Mobile agenda</a></h5>
        <p class="card-text small text-muted mb-0">The new hands-on workshops guides new ideas to life at a fair price.</p>
      </div>
    </div>
  </div>
</div>