Back to Services
Services

Three Column Services

Card grid for three service offerings.

#services#cards#grid

Live preview

Source code

html
<section class="py-5 bg-light">
  <div class="container py-4">
    <div class="text-center mb-5">
      <h6 class="text-primary fw-bold text-uppercase" style="letter-spacing:2px;">Our Expertise</h6>
      <h2 class="display-6 fw-bold">Premium Services</h2>
      <div class="mx-auto mt-3 bg-primary" style="width:60px;height:3px;"></div>
    </div>
    <div class="row g-4">
      <div class="col-lg-4 col-md-6">
        <div class="card h-100 border-0 shadow-sm service-card text-center p-4">
          <div class="bg-primary-subtle text-primary rounded-circle mx-auto mb-4 d-flex align-items-center justify-content-center" style="width:80px;height:80px;"><i class="bi bi-laptop fs-1"></i></div>
          <h4 class="fw-bold mb-3">Web Development</h4>
          <p class="text-muted mb-4">Custom coded, fully responsive web apps built with modern frameworks.</p>
          <a href="#" class="text-primary fw-bold text-decoration-none mt-auto">Read More <i class="bi bi-arrow-right ms-1"></i></a>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="card h-100 border-0 shadow-sm service-card text-center p-4">
          <div class="bg-success-subtle text-success rounded-circle mx-auto mb-4 d-flex align-items-center justify-content-center" style="width:80px;height:80px;"><i class="bi bi-phone fs-1"></i></div>
          <h4 class="fw-bold mb-3">Mobile Apps</h4>
          <p class="text-muted mb-4">Native and cross-platform mobile experiences for iOS and Android.</p>
          <a href="#" class="text-success fw-bold text-decoration-none mt-auto">Read More <i class="bi bi-arrow-right ms-1"></i></a>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="card h-100 border-0 shadow-sm service-card text-center p-4">
          <div class="bg-warning-subtle text-warning rounded-circle mx-auto mb-4 d-flex align-items-center justify-content-center" style="width:80px;height:80px;"><i class="bi bi-palette fs-1"></i></div>
          <h4 class="fw-bold mb-3">UI/UX Design</h4>
          <p class="text-muted mb-4">Intuitive interfaces that enhance every customer journey.</p>
          <a href="#" class="text-warning fw-bold text-decoration-none mt-auto">Read More <i class="bi bi-arrow-right ms-1"></i></a>
        </div>
      </div>
    </div>
  </div>
</section>

More designs in this section