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.
Bootstrap class
No dedicated Bootstrap class
Common 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 and classes
| Variant | Description and classes |
|---|---|
| Logo row | Logos centred in a responsive row.row align-items-center justify-content-center g-4 + col-6 col-md-2 |
| Muted logos | Logos faded so they do not compete with content.img-fluid opacity-50 |
| Bordered tiles | Each logo in its own tile.border rounded-3 p-3 |
| Light band | Neutral background strip.py-5 bg-body-tertiary |
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="https://placehold.co/140x40/f8f9fa/495057?text=Brightline" alt="Brightline" class="img-fluid opacity-50" style="max-height: 32px;">
</div>
<div class="col-6 col-sm-4 col-md-2 text-center">
<img src="https://placehold.co/140x40/f8f9fa/495057?text=Cobalt" alt="Cobalt" class="img-fluid opacity-50" style="max-height: 32px;">
</div>
<div class="col-6 col-sm-4 col-md-2 text-center">
<img src="https://placehold.co/140x40/f8f9fa/495057?text=Beacon" alt="Beacon" class="img-fluid opacity-50" style="max-height: 32px;">
</div>
<div class="col-6 col-sm-4 col-md-2 text-center">
<img src="https://placehold.co/140x40/f8f9fa/495057?text=Quanta" alt="Quanta" class="img-fluid opacity-50" style="max-height: 32px;">
</div>
<div class="col-6 col-sm-4 col-md-2 text-center">
<img src="https://placehold.co/140x40/f8f9fa/495057?text=Solstice" alt="Solstice" class="img-fluid opacity-50" style="max-height: 32px;">
</div>
<div class="col-6 col-sm-4 col-md-2 text-center">
<img src="https://placehold.co/140x40/f8f9fa/495057?text=Arcadia" alt="Arcadia" class="img-fluid opacity-50" style="max-height: 32px;">
</div>
</div>
</div>
</section>Live examples
Basic Client Logo
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 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 to 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.