brand-logo-row

Summary

A five-up muted greyscale brand-logo strip closing the page above the footer. No header, no CTA — just five evenly distributed logos sitting in a borderless row.

HTML structure (minimal)

<div class="brand-area pt-100 pb-100">
  <div class="container">
    <div class="brand-grid border-0">
      <div class="brand-item border-0 p-0">
        <div class="brand-thumb">
          <img src="brand-01.png" alt="">
        </div>
      </div>
      <div class="brand-item border-0 p-0">
        <div class="brand-thumb"><img src="brand-02.png" alt=""></div>
      </div>
      <!-- three more -->
    </div>
  </div>
</div>

Key SCSS tokens

.brand-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  align-items: center;
}
.brand-thumb img {
  max-width: 100%;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter .3s ease, opacity .3s ease;
  &:hover {
    filter: grayscale(0);
    opacity: 1;
  }
}

Notable details

• Uses CSS Grid repeat(5, 1fr) instead of Bootstrap columns — simpler markup, automatic spacing.
• Logos are presented greyscale + 60% opacity, then revert on hover. The interaction is implicit, not labelled.
• The strip has no border or background, so it blends into whatever section comes before it.

Use when

• Any "as featured in" / "trusted by" section near the foot of a page.
• B2B home pages where customer logos need to feel quietly authoritative.
• Multi-vertical templates that need a neutral row that works regardless of the colour theme above it.

Caveats

• Five fixed columns can crowd narrower screens; add a @media (max-width: 768px) rule to drop to 3 or 2 columns.
• Greyscale filter doesn't help logos that rely on colour to be recognisable — verify each logo reads at 60% opacity.