Clients
These sections showcase the logos of trusted partners, customers, or brands that the company has worked with.
Overview
"Clients" components showcase the logos of trusted partners, customers, or brands that the company has worked with. These sections help build credibility and trust by visually displaying recognizable names, often using clean, grid-based layouts.
Examples
Below are a few examples of “Clients” sections.
Example 1
Our Clients
We are trusted by 200+ brands across the world
<section class="bg-body py-5">
<div class="container text-center">
<h2 class="text-primary text-uppercase fw-semibold fs-5 mb-2">Our Clients</h2>
<h3 class="h2 mb-4">We are trusted by 200+ brands across the world</h3>
<div class="row g-3">
<div class="col-6 col-md-4 col-lg-2">
<img src="https://placehold.co/220x220/31343C/EEE?text=Placeholder" class="img-fluid" alt="Client 1 Logo">
</div>
<div class="col-6 col-md-4 col-lg-2">
<img src="https://placehold.co/220x220/31343C/EEE?text=Placeholder" class="img-fluid" alt="Client 2 Logo">
</div>
<div class="col-6 col-md-4 col-lg-2">
<img src="https://placehold.co/220x220/31343C/EEE?text=Placeholder" class="img-fluid" alt="Client 3 Logo">
</div>
<div class="col-6 col-md-4 col-lg-2">
<img src="https://placehold.co/220x220/31343C/EEE?text=Placeholder" class="img-fluid" alt="Client 4 Logo">
</div>
<div class="col-6 col-md-4 col-lg-2">
<img src="https://placehold.co/220x220/31343C/EEE?text=Placeholder" class="img-fluid" alt="Client 5 Logo">
</div>
<div class="col-6 col-md-4 col-lg-2">
<img src="https://placehold.co/220x220/31343C/EEE?text=Placeholder" class="img-fluid" alt="Client 5 Logo">
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container
text-center"> <h2 class="text-primary text-uppercase fw-semibold fs-5
mb-2">Our Clients</h2> <h3 class="h2 mb-4">We are trusted by 200+
brands across the world</h3> <div class="row g-3"> <div
class="col-6 col-md-4 col-lg-2"> <img
src="https://placehold.co/220x220/31343C/EEE?text=Placeholder"
class="img-fluid" alt="Client 1 Logo"> </div> <div
class="col-6 col-md-4 col-lg-2"> <img
src="https://placehold.co/220x220/31343C/EEE?text=Placeholder"
class="img-fluid" alt="Client 2 Logo"> </div> <div
class="col-6 col-md-4 col-lg-2"> <img
src="https://placehold.co/220x220/31343C/EEE?text=Placeholder"
class="img-fluid" alt="Client 3 Logo"> </div> <div
class="col-6 col-md-4 col-lg-2"> <img
src="https://placehold.co/220x220/31343C/EEE?text=Placeholder"
class="img-fluid" alt="Client 4 Logo"> </div> <div
class="col-6 col-md-4 col-lg-2"> <img
src="https://placehold.co/220x220/31343C/EEE?text=Placeholder"
class="img-fluid" alt="Client 5 Logo"> </div> <div
class="col-6 col-md-4 col-lg-2"> <img
src="https://placehold.co/220x220/31343C/EEE?text=Placeholder"
class="img-fluid" alt="Client 5 Logo"> </div> </div>
</div> </section>
Example 2
Our Clients
We are trusted by 200+ brands across the world
Lorem ipsum dolor sit amet, consectetur adipiscing elit libero corpori digniss.
<section class="bg-body py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<h2 class="text-primary text-uppercase fw-semibold fs-5 mb-2">Our Clients</h2>
<h3 class="h2 mb-2">We are trusted by 200+ brands across the world</h3>
<p class="lead mb-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit libero corpori digniss.
</p>
<button class="btn btn-lg btn-outline-secondary">Case studies<i class="ri-arrow-right-line ms-2"></i></button>
</div>
<div class="col-lg-6 mt-4 mt-lg-0">
<div class="row g-3">
<div class="col-6 col-md-4">
<img src="https://placehold.co/220x220/31343C/EEE?text=Placeholder" class="img-fluid" alt="Client 1 Logo">
</div>
<div class="col-6 col-md-4">
<img src="https://placehold.co/220x220/31343C/EEE?text=Placeholder" class="img-fluid" alt="Client 2 Logo">
</div>
<div class="col-6 col-md-4">
<img src="https://placehold.co/220x220/31343C/EEE?text=Placeholder" class="img-fluid" alt="Client 3 Logo">
</div>
<div class="col-6 col-md-4">
<img src="https://placehold.co/220x220/31343C/EEE?text=Placeholder" class="img-fluid" alt="Client 4 Logo">
</div>
<div class="col-6 col-md-4">
<img src="https://placehold.co/220x220/31343C/EEE?text=Placeholder" class="img-fluid" alt="Client 5 Logo">
</div>
<div class="col-6 col-md-4">
<img src="https://placehold.co/220x220/31343C/EEE?text=Placeholder" class="img-fluid" alt="Client 5 Logo">
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row align-items-center"> <div class="col-lg-6"> <h2
class="text-primary text-uppercase fw-semibold fs-5 mb-2">Our Clients</h2>
<h3 class="h2 mb-2">We are trusted by 200+ brands across the world</h3>
<p class="lead mb-3"> Lorem ipsum dolor sit amet, consectetur adipiscing elit
libero corpori digniss. </p> <button class="btn btn-lg
btn-outline-secondary">Case studies<i class="ri-arrow-right-line
ms-2"></i></button> </div> <div class="col-lg-6 mt-4
mt-lg-0"> <div class="row g-3"> <div class="col-6
col-md-4"> <img
src="https://placehold.co/220x220/31343C/EEE?text=Placeholder"
class="img-fluid" alt="Client 1 Logo"> </div> <div
class="col-6 col-md-4"> <img
src="https://placehold.co/220x220/31343C/EEE?text=Placeholder"
class="img-fluid" alt="Client 2 Logo"> </div> <div
class="col-6 col-md-4"> <img
src="https://placehold.co/220x220/31343C/EEE?text=Placeholder"
class="img-fluid" alt="Client 3 Logo"> </div> <div
class="col-6 col-md-4"> <img
src="https://placehold.co/220x220/31343C/EEE?text=Placeholder"
class="img-fluid" alt="Client 4 Logo"> </div> <div
class="col-6 col-md-4"> <img
src="https://placehold.co/220x220/31343C/EEE?text=Placeholder"
class="img-fluid" alt="Client 5 Logo"> </div> <div
class="col-6 col-md-4"> <img
src="https://placehold.co/220x220/31343C/EEE?text=Placeholder"
class="img-fluid" alt="Client 5 Logo"> </div> </div>
</div> </div> </div> </section>
Example 3
We are trusted by 200+ brands across the world
Lorem ipsum dolor sit amet consect adipisi elit libero corpori digniss. Sit amet consect adipisi elit. Dolorum quibusd, libero corporis dignissi provident nulla nemo!
<section class="bg-body py-5">
<div class="container">
<div class="row mb-4">
<div class="col-lg-6 mb-2 mb-lg-0">
<h2 class="mb-0">We are trusted by 200+ brands across the world</h2>
</div>
<div class="col-lg-6">
<p class="mb-0">
Lorem ipsum dolor sit amet consect adipisi elit libero corpori digniss. Sit amet consect adipisi elit. Dolorum quibusd, libero corporis dignissi provident nulla nemo!
</p>
</div>
</div>
<div class="row mb-4 g-3">
<div class="col-6 col-md-4 col-lg-2">
<img src="https://placehold.co/220x220/31343C/EEE?text=Placeholder" class="img-fluid" alt="Client 1 Logo">
</div>
<div class="col-6 col-md-4 col-lg-2">
<img src="https://placehold.co/220x220/31343C/EEE?text=Placeholder" class="img-fluid" alt="Client 2 Logo">
</div>
<div class="col-6 col-md-4 col-lg-2">
<img src="https://placehold.co/220x220/31343C/EEE?text=Placeholder" class="img-fluid" alt="Client 3 Logo">
</div>
<div class="col-6 col-md-4 col-lg-2">
<img src="https://placehold.co/220x220/31343C/EEE?text=Placeholder" class="img-fluid" alt="Client 4 Logo">
</div>
<div class="col-6 col-md-4 col-lg-2">
<img src="https://placehold.co/220x220/31343C/EEE?text=Placeholder" class="img-fluid" alt="Client 5 Logo">
</div>
<div class="col-6 col-md-4 col-lg-2">
<img src="https://placehold.co/220x220/31343C/EEE?text=Placeholder" class="img-fluid" alt="Client 5 Logo">
</div>
</div>
<div class="text-center">
<button class="btn btn-lg btn-outline-secondary">Case studies<i class="ri-arrow-right-line ms-2"></i></button>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row mb-4"> <div class="col-lg-6 mb-2 mb-lg-0"> <h2
class="mb-0">We are trusted by 200+ brands across the world</h2> </div>
<div class="col-lg-6"> <p class="mb-0"> Lorem ipsum dolor sit
amet consect adipisi elit libero corpori digniss. Sit amet consect adipisi elit. Dolorum
quibusd, libero corporis dignissi provident nulla nemo! </p> </div> </div>
<div class="row mb-4 g-3"> <div class="col-6 col-md-4 col-lg-2">
<img src="https://placehold.co/220x220/31343C/EEE?text=Placeholder"
class="img-fluid" alt="Client 1 Logo"> </div> <div
class="col-6 col-md-4 col-lg-2"> <img
src="https://placehold.co/220x220/31343C/EEE?text=Placeholder"
class="img-fluid" alt="Client 2 Logo"> </div> <div
class="col-6 col-md-4 col-lg-2"> <img
src="https://placehold.co/220x220/31343C/EEE?text=Placeholder"
class="img-fluid" alt="Client 3 Logo"> </div> <div
class="col-6 col-md-4 col-lg-2"> <img
src="https://placehold.co/220x220/31343C/EEE?text=Placeholder"
class="img-fluid" alt="Client 4 Logo"> </div> <div
class="col-6 col-md-4 col-lg-2"> <img
src="https://placehold.co/220x220/31343C/EEE?text=Placeholder"
class="img-fluid" alt="Client 5 Logo"> </div> <div
class="col-6 col-md-4 col-lg-2"> <img
src="https://placehold.co/220x220/31343C/EEE?text=Placeholder"
class="img-fluid" alt="Client 5 Logo"> </div> </div> <div
class="text-center"> <button class="btn btn-lg
btn-outline-secondary">Case studies<i class="ri-arrow-right-line
ms-2"></i></button> </div> </div> </section>
ESC