Bootstrap 5 Logo Marquee
A Logo Marquee is a horizontally scrolling strip that displays a row of client, partner, or technology logos in a continuous loop. It is used to build social proof by showing recognisable brand associations without dedicating a full section to each logo. The component works best on landing pages, agency homepages, and SaaS product pages where trust signals need to appear above the fold or between content sections.
Primary Class
.logo-marqueeCommon Use Cases
- →A SaaS startup listing logos of enterprise clients like Shopify, Stripe, or HubSpot to validate credibility for new visitors evaluating the product
- →A digital agency displaying logos of press mentions such as Forbes, TechCrunch, or Wired to reinforce authority on a portfolio landing page
- →A technology platform showing integration partner logos (Zapier, Slack, Salesforce) so prospects immediately understand compatibility with their existing stack
- →A conference or event website cycling through sponsor logos in a marquee to give each brand exposure without requiring a dedicated sponsors section
Variants & Classes
| Variant | Description |
|---|---|
| Logo Marquee Default | Standard logo marquee with Bootstrap's default styling. |
| Logo Marquee Responsive | Responsive variant that adapts to different screen sizes. |
Code Example
<section class="py-5 bg-light overflow-hidden">
<div class="container">
<p class="text-center text-muted small text-uppercase fw-semibold mb-4">Trusted by teams at</p>
</div>
<div class="logo-marquee d-flex align-items-center gap-5">
<div class="logo-marquee__track d-flex align-items-center gap-5 flex-nowrap">
<img src="/assets/logos/stripe.svg" alt="Stripe" height="28" class="opacity-75">
<img src="/assets/logos/shopify.svg" alt="Shopify" height="28" class="opacity-75">
<img src="/assets/logos/notion.svg" alt="Notion" height="28" class="opacity-75">
<img src="/assets/logos/linear.svg" alt="Linear" height="28" class="opacity-75">
<img src="/assets/logos/vercel.svg" alt="Vercel" height="28" class="opacity-75">
<img src="/assets/logos/figma.svg" alt="Figma" height="28" class="opacity-75">
<!-- Duplicate set for seamless loop -->
<img src="/assets/logos/stripe.svg" alt="Stripe" height="28" class="opacity-75">
<img src="/assets/logos/shopify.svg" alt="Shopify" height="28" class="opacity-75">
<img src="/assets/logos/notion.svg" alt="Notion" height="28" class="opacity-75">
<img src="/assets/logos/linear.svg" alt="Linear" height="28" class="opacity-75">
<img src="/assets/logos/vercel.svg" alt="Vercel" height="28" class="opacity-75">
<img src="/assets/logos/figma.svg" alt="Figma" height="28" class="opacity-75">
</div>
</div>
</section>
<style>
.logo-marquee {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.logo-marquee__track {
animation: marquee-scroll 28s linear infinite;
will-change: transform;
}
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.logo-marquee__track {
animation: none;
flex-wrap: wrap;
justify-content: center;
}
}
</style>Live Examples
Basic Logo Marquee
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Canvas Builder generated logo marquee with custom colours
- ✓Logo Marquee with interactive states
- ✓Responsive logo marquee for all screen sizes
Best Practices
Duplicate the logo set, not the whole track
For a seamless infinite loop, render the full set of logos twice inside one track element and animate it to translateX(-50%). This way the animation resets invisibly without any visual jump.
Use CSS mask-image to fade the edges
Apply a horizontal linear-gradient mask on the outer wrapper so logos fade in from the left and out to the right, which looks significantly more polished than a hard clip and takes only three lines of CSS.
Respect prefers-reduced-motion
Always include a media query that disables the animation for users with vestibular disorders. Swap the track to flex-wrap: wrap so logos still display in a readable static grid rather than disappearing entirely.
Keep logo heights consistent, not widths
Set a fixed height (24px to 36px is standard) and let width scale naturally via auto. This handles logos with very different aspect ratios, such as a wordmark next to a square icon, without distortion.