Bootstrap 5 Client Logo
A Client Logo component is a horizontal or grid-based display of partner, client, or integration brand logos, typically used to build social proof on landing pages and homepages. In Bootstrap 5, it's constructed using flex or grid utilities alongside img tags styled for consistent sizing and grayscale treatment. Use it when you want visitors to immediately recognise credible relationships without requiring them to read testimonials.
Primary Class
.client-logoCommon Use Cases
- →SaaS landing pages displaying logos of enterprise customers like Slack, Shopify, or HubSpot to establish credibility above the fold
- →Agency portfolio pages listing brands the agency has delivered work for, grouped by industry sector
- →Integration or marketplace pages showing compatible third-party tools such as Zapier, Stripe, or Salesforce that a platform supports
- →Event or conference websites listing sponsors in tiered rows — gold, silver, bronze — with size differences reflecting sponsorship level
Variants & Classes
| Variant | Description |
|---|---|
| Client Logo Default | Standard client logo with Bootstrap's default styling. |
| Client Logo Responsive | Responsive variant that adapts to different screen sizes. |
Code Example
<section class="py-5 bg-light">
<div class="container">
<p class="text-center text-muted text-uppercase fw-semibold mb-4 small">Trusted by teams at</p>
<div class="row align-items-center justify-content-center g-4">
<div class="col-6 col-sm-4 col-md-2 text-center">
<img src="/logos/stripe.svg" alt="Stripe" class="img-fluid opacity-50" style="max-height: 32px;">
</div>
<div class="col-6 col-sm-4 col-md-2 text-center">
<img src="/logos/shopify.svg" alt="Shopify" class="img-fluid opacity-50" style="max-height: 32px;">
</div>
<div class="col-6 col-sm-4 col-md-2 text-center">
<img src="/logos/hubspot.svg" alt="HubSpot" class="img-fluid opacity-50" style="max-height: 32px;">
</div>
<div class="col-6 col-sm-4 col-md-2 text-center">
<img src="/logos/notion.svg" alt="Notion" class="img-fluid opacity-50" style="max-height: 32px;">
</div>
<div class="col-6 col-sm-4 col-md-2 text-center">
<img src="/logos/figma.svg" alt="Figma" class="img-fluid opacity-50" style="max-height: 32px;">
</div>
<div class="col-6 col-sm-4 col-md-2 text-center">
<img src="/logos/linear.svg" alt="Linear" class="img-fluid opacity-50" style="max-height: 32px;">
</div>
</div>
</div>
</section>Live Examples
Basic Client Logo
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Canvas Builder generated client logo with custom colours
- ✓Client Logo with interactive states
- ✓Responsive client logo for all screen sizes
Best Practices
Use SVGs and cap logo height uniformly
Set a fixed max-height (32px–48px is standard) via inline style or a utility class rather than relying on width, so logos with different aspect ratios stay visually balanced without distortion.
Apply grayscale via CSS filter, not separate assets
Add filter: grayscale(100%) to the img elements and transition to full colour on hover using a CSS class like .logo-grayscale — this keeps your asset library lean and adds a subtle interactive touch.
Pair opacity-50 with a light background for visual harmony
Bootstrap's opacity-50 utility tones down logos so they don't compete with your primary CTA; always test this on both light and dark section backgrounds since opacity behaves differently against each.
Use col-6 col-sm-4 col-md-2 for responsive wrapping
This breakpoint pattern gives you two logos per row on mobile, three on tablet, and six across on desktop — preventing the component from feeling cramped or over-spaced at any viewport width.