→ Shahriar Noyon
→ Service Section

Service Section

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

527

v.4.6

Fork Fullscreen

<div class="row justify-content-center  mb-5">
      <div class="col-lg-7 text-center">
        <h2 class="fw-bold mb-3">Our service list</h2>
        <p class="text-secondary">
          Clean modern service section built with Bootstrap.
        </p>
      </div>
    </div>

<div class="col-lg-4 col-md-6 ">
        <div class="card border-0 shadow-sm service-card 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 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 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 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 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 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