→ Ad Apon7
→ Service list section

Service list section

This bootstrap css example is contributed by Ad Apon7, on 08-May-2026. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Card

Author Ad Apon7

v.5.3

Fork Fullscreen

<div class="row justify-content-center  mb-5">
      <div class="col-lg-7 text-center">
        <h2 class="fw-bold mb-3">Our Features</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">Business Growth</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">Fast Performance</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

Music speakers status

Author:
Jonathan

1 year ago

998

v.5.3
Product Modal with JS

Author:
java stories story

7 months ago

1.2k

v.5.3
Map Section

Author:
Tanvir fahad

2 days ago

19

v.4.6
featured product

Author:
Juan Antonio González Hernández

2 months ago

396

v.4.6
Card w/ gradient background
A modern and visually appealing card component with a gradient background and hover effect.

Author:
Prajwal Hallale

2 years ago

4.7k

v.5.3
A Bootstrap Playground
TBD

Author:
Pranjal Adhikari

10 months ago

873

v.4.6
main css
do not copy

Author:
Fitar Ahmed

3 hours ago

1

v.4.6
skill info

Author:
Gana JNsksk

1 day ago

29

v.4.6
slider card product

Author:
Juan Antonio González Hernández

1 month ago

284

v.5.3
Category Tab

Author:
java stories story

8 months ago

1.3k

v.5.3
HTML and JavaScript for Product Showcase Page
JavaScript: Pagination Handling: The script fetches images based on the current page and updates the pagination controls dynamically. Product Cards: Each product is displayed as a card with an image, title, description, and price

Author:
zobaidul kaziex

1 year ago

1.9k

v.4.6
Product Card
Card diseñada para mostrar productos de forma atractiva y ordenada, inspirada en Mercado Libre. Incluye imagen fija, título uniforme, precio anterior tachado, precio actual con descuento y etiquetas promocionales como "Envío gratis". Incorpora un efecto hover con sombra acentuada y usa clases CSS para fácil integración y mantenimiento.

Author:
Facundo Banegaz

1 year ago

1.4k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent