Service section

This bootstrap css example is contributed by Md. Hasibur Rahman, on 10-Jul-2026. Component is made with bootstrap css v.4.6. It is responsive. similar terms for this example are Frequently asked questions, QnA

Tags: Footer FAQ

Author Md. Hasibur Rahman

159

v.4.6

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Service | Rakib - Web Designer & Developer</title>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
    <div class="container">
      <a class="navbar-brand fw-bold" href="index.html">Rakib<span class="text-primary">.</span></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="mainNav">
        <ul class="navbar-nav ms-auto">
          <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 active" href="service.html">Service</a></li>
          <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

<div class="page-title-banner">
    <div class="container">
      <h1 class="fw-bold">Our Services</h1>
      <p class="mb-0">Home / Service</p>
    </div>
  </div>

<section>
    <div class="container">
      <div class="section-title">
        <span class="eyebrow">Services</span>
        <h2>What I Can Do For You</h2>
        <p>A simple, focused list of services I offer to clients</p>
      </div>
      <div class="row g-5 text-center">

<div class="col-md-4 col-sm-6">
          <div class="card h-100 p-4">
            <i class="bi bi-code-slash fs-1 text-primary mb-3"></i>
            <h5>Web Design</h5>
            <p class="small text-muted">Clean, modern, and easy to navigate website design.</p>
          </div>
        </div>

<div class="col-md-4 col-sm-6">
          <div class="card h-100 p-4">
            <i class="bi bi-laptop fs-1 text-primary mb-3"></i>
            <h5>Web Development</h5>
            <p class="small text-muted">Front-end development using HTML, CSS, JavaScript & Bootstrap.</p>
          </div>
        </div>

<div class="col-md-4 col-sm-6">
          <div class="card h-100 p-4">
            <i class="bi bi-phone fs-1 text-primary mb-3"></i>
            <h5>Responsive Design</h5>
            <p class="small text-muted">Websites that work perfectly on mobile, tablet & desktop.</p>
          </div>
        </div>

<div class="col-md-4 col-sm-6">
          <div class="card h-100 p-4">
            <i class="bi bi-palette fs-1 text-primary mb-3"></i>
            <h5>Graphic Design</h5>
            <p class="small text-muted">Simple logo and banner design for your brand.</p>
          </div>
        </div>

<div class="col-md-4 col-sm-6">
          <div class="card h-100 p-4">
            <i class="bi bi-search fs-1 text-primary mb-3"></i>
            <h5>Basic SEO</h5>
            <p class="small text-muted">On-page SEO setup to help your site get found.</p>
          </div>
        </div>

<div class="col-md-4 col-sm-6">
          <div class="card h-100 p-4">
            <i class="bi bi-tools fs-1 text-primary mb-3"></i>
            <h5>Maintenance & Support</h5>
            <p class="small text-muted">Ongoing updates and support after launch.</p>
          </div>
        </div>

</div>
    </div>
  </section>

<section class="bg-light-alt">
    <div class="container">
      <div class="section-title">
        <span class="eyebrow">Testimonials</span>
        <h2>Our Clients</h2>
        <p>Some businesses that trust our work</p>
      </div>
      <div class="row g-5 text-center align-items-center">
        <div class="col-6 col-md-2">
          <img src="https://placehold.co/150x80?text=Client+A" class="img-fluid" alt="Client A" />
        </div>
        <div class="col-6 col-md-2">
          <img src="https://placehold.co/150x80?text=Client+B" class="img-fluid" alt="Client B" />
        </div>
        <div class="col-6 col-md-2">
          <img src="https://placehold.co/150x80?text=Client+C" class="img-fluid" alt="Client C" />
        </div>
        <div class="col-6 col-md-2">
          <img src="https://placehold.co/150x80?text=Client+D" class="img-fluid" alt="Client D" />
        </div>
        <div class="col-6 col-md-2">
          <img src="https://placehold.co/150x80?text=Client+E" class="img-fluid" alt="Client E" />
        </div>
        <div class="col-6 col-md-2">
          <img src="https://placehold.co/150x80?text=Client+F" class="img-fluid" alt="Client F" />
        </div>
      </div>
    </div>
  </section>

<section>
    <div class="container">
      <div class="section-title">
        <span class="eyebrow">Got Questions?</span>
        <h2>Frequently Asked Questions</h2>
      </div>

<div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
              1. What services do you offer?
            </button>
          </h2>
          <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
            <div class="accordion-body">
              I offer web design, front-end web development, responsive design,
              basic graphic design, and website maintenance.
            </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="#faq2">
              2. How long does it take to build a website?
            </button>
          </h2>
          <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
            <div class="accordion-body">
              A simple website usually takes 5 to 10 working days, depending
              on the number of pages and features required.
            </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="#faq3">
              3. Do you provide responsive websites?
            </button>
          </h2>
          <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
            <div class="accordion-body">
              Yes, every website I build is fully responsive and works well
              on mobile phones, tablets, and desktop computers.
            </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="#faq4">
              4. What technologies do you use?
            </button>
          </h2>
          <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
            <div class="accordion-body">
              I mainly use HTML5, CSS3, JavaScript, and the Bootstrap
              framework to build clean and reliable websites.
            </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="#faq5">
              5. Do you offer support after the website is delivered?
            </button>
          </h2>
          <div id="faq5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
            <div class="accordion-body">
              Yes, I offer basic maintenance and support after delivery to
              fix bugs and make small content updates.
            </div>
          </div>
        </div>

</div>
    </div>
  </section>

<footer class="bg-dark text-light pt-5 pb-3">
    <div class="container">
      <div class="row">
        <div class="col-md-4 mb-3">
          <h5>Rakib.</h5>
          <p class="small">Web Designer & Front-End Developer based in Dhaka, Bangladesh.</p>
        </div>
        <div class="col-md-4 mb-3">
          <h5>Quick Links</h5>
          <ul class="list-unstyled">
            <li><a href="index.html" class="footer-link">Home</a></li>
            <li><a href="about.html" class="footer-link">About</a></li>
            <li><a href="portfolio.html" class="footer-link">Portfolio</a></li>
            <li><a href="service.html" class="footer-link">Service</a></li>
            <li><a href="contact.html" class="footer-link">Contact</a></li>
          </ul>
        </div>
        <div class="col-md-4 mb-3">
          <h5>Date & Time</h5>
          <p id="liveDateTime" class="small">--</p>
        </div>
      </div>
      <hr class="border-secondary" />
      <p class="text-center mb-0 small">&copy; 2026 Rakib. All Rights Reserved.</p>
    </div>
  </footer>

More Examples

Personal Portfolio Service Section

Author:
Creative Araf

2 months ago

275

v.5.3
E-Commerce Full

Author:
Zahid Hasan Riyad

1 month ago

413

v.5.3
Parsonal PortFolio Full WebSite

Author:
Zahid Hasan Riyad

1 month ago

320

v.5.3
Contact_All_Contanet

Author:
Sahin Miah

4 months ago

365

v.4.6
fitar footer
do not copy

Author:
Fitar Ahmed

4 months ago

814

v.4.6
Simple Footer

Author:
Anonymous

2 years ago

4.2k

v.4.6
footer with js

Author:
Huryra

1 month ago

148

v.4.6
FAQ accordion
The accordion component is a vertically stacked set of items

Author:
Prajwal Hallale

2 years ago

6.5k

v.5.3
Footer
footer

Author:
Faysal

1 month ago

245

v.4.6
vulgh

Author:
Anonymous

1 month ago

215

v.5.3
E-Commarce

Author:
Anonymous

1 month ago

242

v.5.3
Basic Footer
Standard footer example with bootstrap 5

Author:
Mateo Rojas

1 year ago

12.5k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent