→ lamiajahan
→ service

service

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

Tags: Footer Header Card Banner

Author lamiajahan

198

v.4.6

Fork Fullscreen

<nav class="navbar navbar-expand-lg bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">Its Tithy</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav m-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="about.html">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="portfolio.html">portfolio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="service.html">Service</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact.html">Contact</a>
        </li>   
    </div>
  </div>
</nav>
   
    
     <section class="py-5 bg-warning mt-5">
  <div class="container">

<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>
     
      
    <section class="client-section">
        <div class="container-fluid text-center mt-5 py-5 bg-success">

<div class="section-title">
                <h2>Our Clients</h2>
                <p>
                    We proudly work with amazing companies around the world.
                    Here are some of our valuable clients who trust our services.
                </p>
            </div>

<div class="col-lg-4 col-md-6">
                    <div class="client-card">

<h4>TechNova Ltd</h4>
                        <span>UI/UX Design Partner</span>

<p>
                            Working together to build modern digital experiences
                            with clean interfaces and powerful performance.
                        </p>

</div>
                </div>

<div class="col-lg-4 col-md-6">
                    <div class="client-card">

<h4>Pixel Agency</h4>
                        <span>Web Development</span>

<p>
                            Delivered scalable and responsive web applications
                            tailored for business growth and customer engagement.
                        </p>

</div>
                </div>

<div class="col-lg-4 col-md-6">
                    <div class="client-card">

<h4>Creative Studio</h4>
                        <span>Branding & Marketing</span>

<p>
                            Helping brands establish strong online identities
                            with creative strategy and modern visual solutions.
                        </p>

</div>
                </div>

</div>

</div>
    </section>
    
     
      <section>
        <div class="container text-center bg-success-subtle mt-5">
            <h1>FAQ Parts</h1>
            <div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
         1.What is the service?
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item’s accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        2.Who do you serve?
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the second item’s accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        3.How much does it cost?
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the third item’s accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        4.What is the experience like?
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the third item’s accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        5.How do I take the next step?
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the third item’s accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It’s also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>
        </div>
      </section>

<footer class="bg-dark text-light py-5 my-5">
    <div class="container">
        <div class="row g-4">
            
            <div class="col-lg-4 col-md-6">
                <h5 class="mb-4">About Us</h5>
                <p class="mb-4">We are dedicated to providing innovative solutions that help businesses grow and succeed
                    in the digital age.</p>
                <div class="social-links">
                    <a href="#" class="social-icon bg-primary"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social-icon bg-info"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="social-icon bg-danger"><i class="fab fa-instagram"></i></a>
                    <a href="#" class="social-icon bg-primary"><i class="fab fa-linkedin-in"></i></a>
                </div>
            </div>

<div class="col-lg-2 col-md-6">
                <h5 class="mb-4">Quick Links</h5>
                <ul class="list-unstyled">
                    <li class="mb-2"><a href="#" class="footer-link">Home</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">About</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Services</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Portfolio</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Contact</a></li>
                </ul>
            </div>

<div class="col-lg-2 col-md-6">
                <h5 class="mb-4">Services</h5>
                <ul class="list-unstyled">
                    <li class="mb-2"><a href="#" class="footer-link">Web Design</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Development</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Marketing</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Consulting</a></li>
                    <li class="mb-2"><a href="#" class="footer-link">Analytics</a></li>
                </ul>
            </div>

<div class="col-lg-4 col-md-6">
                <h5 class="mb-4">Contact Info</h5>
                <ul class="list-unstyled">
                    <li class="mb-3">
                        <i class="fas fa-map-marker-alt me-2"></i>
                        123 Business Street, New York, NY 10001
                    </li>
                    <li class="mb-3">
                        <i class="fas fa-phone me-2"></i>
                        <a href="tel:+1234567890" class="footer-link">+1 (234) 567-890</a>
                    </li>
                    <li class="mb-3">
                        <i class="fas fa-envelope me-2"></i>
                        <a href="mailto:contact@example.com" class="footer-link">contact@example.com</a>
                    </li>
                </ul>
            </div>
        </div>

<div class="row mt-5">
            <div class="col-12">
                <hr class="mb-4">
                <div class="text-center">
                    <p class="mb-0">&copy; 2024 Your Company. All rights reserved.</p>
                </div>
            </div>
        </div>
    </div>
</footer>

More Examples

Carrousel banner product
It's a carousel; clicking on its categories opens a banner with the product.

Author:
Juan Antonio González Hernández

7 months ago

1.5k

v.5.3
Home Page of portfolio (WDD)

Author:
sajid taz

4 months ago

694

v.4.6
Agriculture Website for Live project_WDD

Author:
Anonymous

4 months ago

526

v.4.6
Liberation war Archive WDD

Author:
Anonymous

4 months ago

728

v.4.6
E-Commerce index

Author:
Creative Araf

3 months ago

351

v.5.3
E-Commerce Product Detail Page

Author:
Creative Araf

3 months ago

446

v.5.3
E-Commerce Cart Section

Author:
Creative Araf

3 months ago

323

v.5.3
E-Commerce Contact Section

Author:
Creative Araf

3 months ago

335

v.5.3
Personal Portfolio Index

Author:
Creative Araf

3 months ago

321

v.5.3
Personal Portfolio About Section

Author:
Creative Araf

3 months ago

446

v.5.3
Personal Portfolio --Portfolio Section

Author:
Creative Araf

3 months ago

405

v.5.3
Personal Portfolio Service Section

Author:
Creative Araf

3 months ago

372

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent