Bootstrap Service Template with Image Background
<!-- Service 8 - Bootstrap Brain Component -->
<section class="py-4 py-md-5">
<div class="container">
<div class="row">
<div class="col-12">
<div class="container-fluid bsb-service-8 bsb-overlay border border-dark" style="--bsb-overlay-opacity: 0.8; --bsb-overlay-bg-color: var(--bs-light-rgb); background-image: url('./assets/img/service-bg-1.webp');">
<div class="row justify-content-lg-around align-items-md-center">
<div class="col-12 col-lg-4">
<div class="card border-0 bg-transparent text-center">
<div class="card-body text-center p-4 p-xxl-5">
<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" fill="currentColor" class="bi bi-gear-fill text-primary mb-4" viewBox="0 0 16 16">
<path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z" />
</svg>
<h4 class="text-shadow-head mb-4">Tune Packages</h4>
<p class="text-shadow-body mb-4">The Tune Packages offered by our bike repair shop provide maintenance for cyclists of all levels.</p>
<a href="#!" class="fw-bold text-decoration-none link-primary">
Learn More
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-short" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" />
</svg>
</a>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card border-0 bg-transparent text-center">
<div class="card-body text-center p-4 p-xxl-5">
<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" fill="currentColor" class="bi bi-box-fill text-primary mb-4" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M15.528 2.973a.75.75 0 0 1 .472.696v8.662a.75.75 0 0 1-.472.696l-7.25 2.9a.75.75 0 0 1-.557 0l-7.25-2.9A.75.75 0 0 1 0 12.331V3.669a.75.75 0 0 1 .471-.696L7.443.184l.004-.001.274-.11a.75.75 0 0 1 .558 0l.274.11.004.001zm-1.374.527L8 5.962 1.846 3.5 1 3.839v.4l6.5 2.6v7.922l.5.2.5-.2V6.84l6.5-2.6v-.4l-.846-.339Z" />
</svg>
<h4 class="text-shadow-head mb-4">Bike Boxing</h4>
<p class="text-shadow-body mb-4">The Bike Boxing service offered by our bike repair shop is a reliable solution for cyclists needing to safely.</p>
<a href="#!" class="fw-bold text-decoration-none link-primary">
Learn More
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-short" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" />
</svg>
</a>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card border-0 bg-transparent text-center">
<div class="card-body text-center p-4 p-xxl-5">
<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" fill="currentColor" class="bi bi-truck-front-fill text-primary mb-4" viewBox="0 0 16 16">
<path d="M3.5 0A2.5 2.5 0 0 0 1 2.5v9c0 .818.393 1.544 1 2v2a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5V14h6v1.5a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-2c.607-.456 1-1.182 1-2v-9A2.5 2.5 0 0 0 12.5 0zM3 3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v3.9c0 .625-.562 1.092-1.17.994C10.925 7.747 9.208 7.5 8 7.5s-2.925.247-3.83.394A1.008 1.008 0 0 1 3 6.9zm1 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2m8 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2m-5-2h2a1 1 0 1 1 0 2H7a1 1 0 1 1 0-2" />
</svg>
<h4 class="text-shadow-head mb-4">Corporate Services</h4>
<p class="text-shadow-body mb-4">Our Corporate Services encompass a range of offerings designed to support cycling among employees.</p>
<a href="#!" class="fw-bold text-decoration-none link-primary">
Learn More
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-short" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bs-brain@2.0.4/utilities/bsb-overlay/bsb-overlay.css">
<link rel="stylesheet" href="https://unpkg.com/bs-brain@2.0.4/components/services/service-8/assets/css/service-8.css">
The Free Bootstrap Service Template with Image Background is a visually stunning and versatile component designed to showcase services or features on websites built with the Bootstrap framework. This template features a captivating image background that sets the tone and enhances the visual appeal of the service section. Each service is presented with accompanying text and possibly icons, providing a clear overview of offerings. With its sleek design and customizable options, including background images, text styles, and layout, the template offers flexibility to create engaging and memorable service presentations. Responsive design ensures seamless viewing across all devices, from desktops to mobile devices. Whether for businesses, agencies, or portfolios, the Free Bootstrap Service Template with Image Background provides a practical and eye-catching solution for showcasing services and features.