Bootstrap 5 Case Study Card
A Case Study Card is a Bootstrap 5 content component built on .card that summarises a client project in a compact, scannable block: a cover image or logo, the client name, a short outcome statement, and one or two headline metrics, with a link to the full story. Use it on portfolio grids, service pages and homepage proof sections where visitors need to compare results quickly before committing to a long read.
Bootstrap class
.card .h-100 .card-body .ratioCommon use cases
- A B2B SaaS agency showing three client wins on its homepage, each with a logo, the problem solved and a headline figure such as a 38% drop in churn.
- A web design studio portfolio page that filters projects by industry (hospitality, legal, e-commerce) and links each card to a full project write-up.
- A managed IT provider's services page where each card names the client's sector, the migration performed and the downtime avoided, to reassure cautious buyers.
- A solar installer's regional landing pages that surface local residential installs with system size, annual savings and a short homeowner quote.
Variants and classes
| Variant | Description and classes |
|---|---|
| Image top | The standard layout with a cropped cover image above the text, ideal for three-column grids..card .h-100 .card-img-top .card-body |
| Horizontal | Image and copy sit side by side from the md breakpoint up, which suits featured or single-column lists..card .mb-4 .row .g-0 .col-md-5 .col-md-7 .img-fluid .rounded-start |
| Metrics led | Leads with big result numbers in a row of columns so the outcome is the first thing read..card .card-body .row .text-center .fs-2 .fw-bold .text-muted .small |
| Image overlay | Places the client name and result on top of a full-bleed photo for a visual, editorial look..card .text-bg-dark .card-img .card-img-overlay .d-flex .flex-column .justify-content-end |
| Quote and logo | Swaps the cover image for a client logo and a pull quote, useful when the testimonial is the main proof..card .border-0 .shadow-sm .card-body .blockquote .mb-0 .small .text-muted |
Code example
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<article class="card h-100 shadow-sm">
<div class="ratio ratio-16x9">
<img src="/images/case-studies/harbour-coffee.jpg" class="card-img-top object-fit-cover" alt="Harbour Coffee online store on a laptop and phone" loading="lazy">
</div>
<div class="card-body d-flex flex-column">
<span class="badge text-bg-primary align-self-start mb-2">E-commerce</span>
<h3 class="card-title h5">Harbour Coffee: from market stall to national shipping</h3>
<p class="card-text text-muted">We rebuilt the checkout and subscription flow on a faster, mobile-first storefront.</p>
<div class="row text-center border-top pt-3 mt-auto">
<div class="col-6">
<div class="fs-3 fw-bold text-primary">+62%</div>
<div class="small text-muted">Online revenue</div>
</div>
<div class="col-6">
<div class="fs-3 fw-bold text-primary">1.4s</div>
<div class="small text-muted">Load time</div>
</div>
</div>
</div>
<div class="card-footer bg-transparent border-0 pb-3">
<a href="/case-studies/harbour-coffee" class="stretched-link fw-semibold">Read the case study</a>
</div>
</article>
</div>
</div>Live examples
Basic Case Study Card
Canvas template variants
Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:
- Canvas Builder pairs each card with a 16:9 cover image using the .ratio helper, so every card in a grid keeps the same image height regardless of the source file dimensions.
- Result metrics are styled with your brand primary colour and a heavier font weight, while the industry badge and read-more link use the same accent so the card matches the rest of the page.
- Cards sit inside a responsive .row with .row-cols-1 .row-cols-md-2 .row-cols-lg-3 and .g-4, and use .h-100 so card heights stay equal even when headlines wrap onto different line counts.
Best practices
Lock the image ratio, not the height
Wrap the image in .ratio .ratio-16x9 and add .object-fit-cover to the img. Client screenshots come in every shape, and this keeps the grid aligned without fixed pixel heights that break on mobile.
Use .stretched-link for a full-card click target
Put .stretched-link on the single read-more anchor so the whole card is clickable while keeping one link for screen readers. Avoid adding other links inside the card, as they will sit under the stretched area and become hard to click.
Pin the metrics to the bottom with flex
Make .card-body a .d-flex .flex-column and give the metrics row .mt-auto. Numbers then line up across cards even when one title runs to three lines and another to one.
Limit each card to two metrics
Two figures with short labels are read; four are skimmed past. Pick the result that matters most to your buyer, such as revenue or time saved, and leave the rest for the full case study.
Write alt text that describes the project
Use the client and what the image shows, for example 'Harbour Coffee online store on a laptop and phone', rather than 'case study image'. Add loading="lazy" to cards below the fold to protect LCP.