Services part

This bootstrap css example is contributed by istiakahmedchowdhury10, on 22-Jul-2026. Component is made with bootstrap css v.4.6. It is responsive.

Tags: Card

Author istiakahmedchowdhury10

v.4.6

Fork Fullscreen

<h2 class="display-3 fw-bold text-white mb-3 tracking-tight">
          <span class="text-info">My services</span>
        </h2>
        <p class="section-desc">Everything you need to build, grow, and scale your business — all in one place.
        </p>
      </div>

<div class="col-lg-4 col-md-6 ">
          <div class="card border-0 shadow-sm service-card w-100 h-100  p-4 position-relative overflow-hidden">

<h5 class="fw-semibold mt-4">Responsive Design</h5>

<p class="text-secondary mt-3">
              Fully responsive layouts optimized for every device and screen size.
            </p>

<a href="#" class="text-decoration-none fw-medium text-primary">
              Learn More
            </a>

</div>
        </div>

<div class="col-lg-4 col-md-6">
          <div class="card border-0 shadow-sm service-card w-100 h-100  p-4 position-relative overflow-hidden">

<h5 class="fw-semibold mt-4">Modern Layout</h5>

<p class="text-secondary mt-3">
              Minimal and clean design structure focused on better user experience.
            </p>

<a href="#" class="text-decoration-none fw-medium text-success">
              Learn More
            </a>

</div>
        </div>

<div class="col-lg-4 col-md-6">
          <div class="card border-0 shadow-sm service-card w-100 h-100  p-4 position-relative overflow-hidden">

<h5 class="fw-semibold mt-4">MERN Stack Website Create</h5>

<p class="text-secondary mt-3">
              Smart analytics and performance tools to grow your business faster.
            </p>

<a href="#" class="text-decoration-none fw-medium text-warning">
              Learn More
            </a>

</div>
        </div>

<div class="col-lg-4 col-md-6 mt-3">
          <div class="card border-0 shadow-sm service-card w-100 h-100  p-4 position-relative overflow-hidden">

<h5 class="fw-semibold mt-4">UI UX Design</h5>

<p class="text-secondary mt-3">
              Optimized workflow and lightning fast loading performance.
            </p>

<a href="#" class="text-decoration-none fw-medium text-danger">
              Learn More
            </a>

</div>
        </div>

<div class="col-lg-4 col-md-6 mt-3">
          <div class="card border-0 shadow-sm service-card w-100 h-100  p-4 position-relative overflow-hidden">

<h5 class="fw-semibold mt-4">Secure System</h5>

<p class="text-secondary mt-3">
              Secure and reliable system architecture built for modern platforms.
            </p>

<a href="#" class="text-decoration-none fw-medium text-info">
              Learn More
            </a>

</div>
        </div>

<div class="col-lg-4 col-md-6 mt-3">
          <div class="card border-0 shadow-sm service-card w-100 h-100 p-4 position-relative overflow-hidden">

<h5 class="fw-semibold mt-4">24/7 Support</h5>

<p class="text-secondary mt-3">
              Professional support team ready to assist you anytime.
            </p>

<a href="#" class="text-decoration-none fw-medium text-dark">
              Learn More
            </a>

</div>
        </div>

</div>

</div>
  </section>

More Examples