Bootstrap 5 Logo Cloud
A logo cloud is a horizontal or grid-based row of partner, client, or sponsor brand marks used to build social proof or signal integrations. It is composed from Bootstrap 5's grid system, flexbox utilities, and image or SVG elements, with optional grayscale filtering applied via an inline style or a small custom CSS rule. Use it on landing pages, pricing pages, and homepages wherever trust signals or ecosystem partners need to be displayed at a glance.
Primary Class
d-flex flex-wrap justify-content-center align-items-center gap-4Common Use Cases
- →A SaaS product lists the logos of ten enterprise clients on its homepage to demonstrate that well-known companies trust the platform.
- →A payment gateway integration page shows logos of Stripe, PayPal, Klarna and Apple Pay to confirm which processors are supported out of the box.
- →An agency portfolio page displays award bodies and press outlets such as Awwwards, Smashing Magazine and The Drum that have featured the studio's work.
- →A conference website uses a tiered logo cloud with heading labels to separate Gold, Silver and Bronze sponsors at different visual sizes.
Variants & Classes
| Variant | Description |
|---|---|
| Grayscale on White | All logos are rendered in greyscale by default and return to full colour on hover, keeping the section visually quiet while still being interactive. |
| Bordered Card Grid | Each logo sits inside a Bootstrap card with a light border and equal padding, giving a structured tile appearance suited to sponsor or partner directories. |
| Tinted Background Band | The entire logo cloud sits on a subtle bg-body-secondary band with generous vertical padding, visually separating it from adjacent content sections. |
| Stacked Tiered Sponsors | Multiple rows carry a small heading label such as 'Platinum' or 'Gold' above each row, with logo size decreasing per tier using Bootstrap width utilities. |
Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Logo Cloud</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
.logo-cloud-img {
filter: grayscale(100%) opacity(0.6);
transition: filter 0.25s ease;
max-height: 40px;
width: auto;
object-fit: contain;
}
.logo-cloud-img:hover {
filter: grayscale(0%) opacity(1);
}
</style>
</head>
<body class="bg-white">
<section class="py-5 border-top border-bottom">
<div class="container">
<p class="text-center text-body-secondary text-uppercase fw-semibold letter-spacing-1 mb-4" style="font-size:0.75rem;letter-spacing:0.1em;">Trusted by teams at</p>
<div class="d-flex flex-wrap justify-content-center align-items-center gap-5">
<!-- Replace src values with real logo files or inline SVGs -->
<a href="#" class="d-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Amazon_logo.svg"
alt="Amazon" class="logo-cloud-img" width="100" height="40">
</a>
<a href="#" class="d-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
alt="Google" class="logo-cloud-img" width="100" height="40">
</a>
<a href="#" class="d-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/44/Microsoft_logo.svg"
alt="Microsoft" class="logo-cloud-img" width="100" height="40">
</a>
<a href="#" class="d-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg"
alt="IBM" class="logo-cloud-img" width="100" height="40">
</a>
<a href="#" class="d-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg"
alt="Apple" class="logo-cloud-img" width="34" height="40">
</a>
<a href="#" class="d-block">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Slack_Technologies_Logo.svg"
alt="Slack" class="logo-cloud-img" width="90" height="40">
</a>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Live Examples
Bordered Tile Grid
Each logo sits inside a Bootstrap card component with equal padding, forming a uniform tile grid that scales from two columns on mobile to six on desktop.
Tiered Sponsor Block
Three rows labelled Platinum, Gold and Silver use Bootstrap headings and decreasing image widths to create a clear visual hierarchy for event sponsorship.
Dark Background Logo Cloud
A full-width dark band using bg-dark inverts logo visibility requirements. Logos are white SVGs or PNG assets with transparent backgrounds, kept at reduced opacity until hovered.
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Grayscale hover logo row generated automatically from a list of brand names
- ✓Bordered tile grid with six logos per row on desktop and two on mobile
- ✓Tiered sponsor block with Platinum, Gold and Silver rows at decreasing sizes
- ✓Dark-background logo cloud with brightness-invert filter applied by Canvas Builder
- ✓Scrolling marquee-style logo strip for landing pages with many partner brands
Best Practices
Always set explicit width and height on logo images
Omitting dimensions causes cumulative layout shift as images load, which harms Core Web Vitals scores. Set both attributes on each img element and use object-fit: contain so logos are never distorted regardless of their natural aspect ratio.
Use CSS filter rather than separate greyscale image assets
The filter: grayscale(100%) approach means you only need one image file per brand. Pair it with opacity to soften logos further, and add a transition for a smooth hover reveal. This also respects prefers-reduced-motion if you wrap the transition in a media query.
Prefer inline SVG or SVG img src over PNG for brand logos
SVG marks remain sharp at all display densities without requiring @2x variants. If a partner supplies only a PNG, request at least 200px wide at 1x so it does not appear blurry on high-DPI screens. For accessibility, always include a meaningful alt attribute describing the brand name.
Avoid anchor tags if logos are purely decorative
If the logo cloud is used only for social proof with no destination URL, replace anchor tags with plain div or figure elements and add aria-hidden="true" to each image to prevent screen readers announcing a list of unlabelled links.