Carepair

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Carepair is an auto repair and car service website template, built on Bootstrap 5. The layout is responsive and mobile-ready. There are seven pages: home, about, services, gallery, blog, blog post and contact.

The home page has a hero slider, the shop’s contact details next to an appointment form, why-choose-us features, twelve service tiles, a three-step booking guide, counters, a photo gallery with a lightbox, the mechanics, a review slider and the latest posts. The inner pages add the shop’s story, the twelve services with a short description each, eight workshop photos, a blog with a post page, comments and a comment form, and a contact page with a contact form and a map that loads on click. Carepair gives you a ready-made site for a garage, car service or auto repair shop.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used a Bootstrap 5.0 beta), compiled from Sass with only the parts the pages use, and plain JavaScript with no jQuery. Swiper 14 replaces tiny-slider on the hero and review sliders, PhotoSwipe replaces GLightbox in the gallery, small built-in modules replace AOS and the counter script, and an unused date picker and animate.css are gone. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the home page went from 12.3 MB and 45 requests to 1.5 MB and 36 requests, and the other pages from 5.4–10.1 MB to 0.96–1.3 MB. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the first screen, and the largest JPEGs are re-encoded. The download went from 13.0 MB to 6.3 MB.
• No third-party requests: Roboto is self-hosted, the icon fonts are replaced by Lucide SVG icons, with a distinct icon for every service, and a small social-logo subset (the Twitter bird is now the X logo), the logo mark is redrawn, and a Google Analytics 4 snippet stays commented out until you add your own ID. The contact page map is an OpenStreetMap map that loads only when a visitor clicks “Show map”. Before, the home page loaded files from five other hosts, and every page loaded a map script that threw errors, although only the contact page has a map.
• Working forms: the appointment form on the home page, the contact form and the blog comment form send through php/send-email.php (PHP on your host), with validation, a spam trap and an in-page message, and the blog search sends its query to the blog page. Before, the forms had no handler and no field names, so nothing could be sent.
• Accessibility: a skip link, landmarks and one h1 per page, names on icon links, labels on the form fields, keyboard access to the menu, sliders and lightbox, 44 px slider dots, visible focus rings, reduced-motion support and WCAG AA text contrast, with a deeper red under white text, a darker red for red text, darker greys, stronger photo overlays behind the hero and page titles, and a lighter blue for the logo on the dark header and footer.
• Fixed: the gallery page showed four of its photos twice (it now shows eight different photos), and the second gallery tile opened the first photo; on phones the blog cards squeezed the text into a narrow column beside the photo (they now stack, photo first); the footer address icon was blank; the labels in the home page contact box lost their width; and the review quote icons were broken.
• Demo content: a fictional shop address, phone and email, distinct customer reviews, six blog posts and a sample car-care article replace the placeholder text and an off-topic sample post; buttons, services, posts, tags and pagination link to real pages; and typos such as “Years of Experienced” and “Modern Equipments” are corrected.