Our Clients

This bootstrap css example is contributed by Shahriar Noyon, on 15-May-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Card

Author Shahriar Noyon

584

v.4.6

Fork Fullscreen

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

<section>
        <div class="container py-5">
            
            <div class="text-center mb-5">
                <h2 class="section-title d-inline-block">Our Clients</h2>
                <p class="text-muted mt-2">Trusted by leading companies and organizations</p>
            </div>

<div class="row g-4">

<div class="col-6 col-md-4 col-lg-3">
                    <div class="card client-card text-center p-4">
                        <i class="bi bi-building client-icon"></i>
                        <h6 class="client-name mt-3">TechVision Ltd</h6>
                    </div>
                </div>

<div class="col-6 col-md-4 col-lg-3">
                    <div class="card client-card text-center p-4">
                        <i class="bi bi-bank client-icon"></i>
                        <h6 class="client-name mt-3">City Bank</h6>
                    </div>
                </div>

<div class="col-6 col-md-4 col-lg-3">
                    <div class="card client-card text-center p-4">
                        <i class="bi bi-hospital client-icon"></i>
                        <h6 class="client-name mt-3">MediCare Hospital</h6>
                    </div>
                </div>

<div class="col-6 col-md-4 col-lg-3">
                    <div class="card client-card text-center p-4">
                        <i class="bi bi-shop client-icon"></i>
                        <h6 class="client-name mt-3">GreenMart</h6>
                    </div>
                </div>

<div class="col-6 col-md-4 col-lg-3">
                    <div class="card client-card text-center p-4">
                        <i class="bi bi-airplane client-icon"></i>
                        <h6 class="client-name mt-3">SkyTravel</h6>
                    </div>
                </div>

<div class="col-6 col-md-4 col-lg-3">
                    <div class="card client-card text-center p-4">
                        <i class="bi bi-briefcase client-icon"></i>
                        <h6 class="client-name mt-3">Prime Solutions</h6>
                    </div>
                </div>

<div class="col-6 col-md-4 col-lg-3">
                    <div class="card client-card text-center p-4">
                        <i class="bi bi-mortarboard client-icon"></i>
                        <h6 class="client-name mt-3">EduBright</h6>
                    </div>
                </div>

<div class="col-6 col-md-4 col-lg-3">
                    <div class="card client-card text-center p-4">
                        <i class="bi bi-truck client-icon"></i>
                        <h6 class="client-name mt-3">Fast Logistics</h6>
                    </div>
                </div>

</div>
        </div>
    </section>

More Examples