TOPBuilder

Author: Colorlib

Updated: October 2026 · v3.0.0

TOPBuilder is a website template for construction companies, general contractors and renovation firms, built on Bootstrap 5. The layout is responsive and works in all popular web browsers. It comes with ten pages: two home pages, two about pages, two services pages, a blog list, a single post, contact and a 404 page.

The home pages have a photo slider, service highlights, an about section, offers and features, a filterable services gallery, team cards, counters, testimonials, featured works, the latest posts and partner logos; the second home page adds skill bars and services in category tabs. The inner pages add a project gallery that opens in a lightbox, a blog with comments and a sidebar, and a contact page with a contact form and a map.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 3.3.7 and jQuery), compiled from Sass together with the theme and the original Bootstrap 3 proportions, and plain JavaScript with no jQuery. Swiper 14 replaces the Camera slider and Owl Carousel, PhotoSwipe opens the project gallery, Jarallax replaces Stellar, and small built-in modules handle the category filters, counters, skill bars and scroll animations. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: all ten pages together went from 20.1 MB and 453 requests to 7.7 MB and 305 requests. Every photo has an AVIF version with the JPEG or PNG as the fallback, real dimensions and lazy loading below the first screen.
• No third-party requests: Oswald and Roboto are self-hosted, Font Awesome 4 is replaced by Lucide SVG icons and a 1.2 KB social-logo subset (the Twitter bird is now the X logo), the contact map is an OpenStreetMap that loads only after a click, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded its fonts from Google Fonts and the contact page a Google Maps embed.
• Working forms: the contact form and the blog comment form send through php/send-email.php, with visible labels, validation, a spam trap and an in-page message, and every search box takes you to the blog. Before, the forms had no action and no field names.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, a labelled menu button, dropdowns that open from the keyboard, named icon links, visible focus, and WCAG AA contrast with dark labels on the yellow buttons and a darker brand colour for text.
• Fixes: the menu bar sticks to the top without making the page jump, the project lightbox works (its files were missing before), every page has its own title and description, and the demo names, phone numbers, email and address are fictional placeholders.