Waterboat

Author: Colorlib

Updated: November 2026 · v3.0.0

Credits: Images from Unsplash

Waterboat is a website template for yacht, sailing and boat-charter companies, built on Bootstrap 5. The layout is responsive and works in all popular web browsers. It comes with eight pages: home, about, services, testimonials, blog, a blog post, a charter route and contact.

The home page has a full-screen hero slider, a welcome section, service cards, a counter band, charter cards with prices, a booking form, a crew section, guest testimonials and a call-to-action band. The inner pages add a services overview, a testimonials page, a searchable blog with a result count and a reset link, an article page with comments and a comment form, a route page and a contact page with a working form. The footer and menu link to real pages.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used Bootstrap 4.1.3 and jQuery), compiled from Sass with the original Bootstrap 4 proportions, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the hero slider, a keyboard-operable dialog replaces the off-canvas mobile menu, and Lucide SVG icons replace the IcoMoon and Flaticon fonts. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: all pages together went from 16.3 MB and 292 requests to 5.5 MB and 151 requests, and the download from 2.8 MB to 2.6 MB. Every photo has an AVIF version with the JPEG as the fallback, real dimensions and lazy loading below the hero, and unused plugins such as jQuery UI, Slick, a countdown, a date picker, MediaElement and a video background are gone.
• No third-party requests: Oswald, Mulish and Dancing Script are self-hosted, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded its web fonts from Google Fonts.
• Working forms: the booking, contact and comment forms send through php/send-email.php, with visible labels, validation, a spam trap and an in-page message. Before, the booking and contact fields had no names and nothing could be sent.
• Blog search: the search box filters the posts as you type, shows how many match, says so when none do and has a Clear search link. The sidebar search on the post page opens the blog with the same query.
• Accessibility: a skip link and a main landmark on every page, one h1 per page, a real menu button, descriptive alt text, visible focus rings and WCAG AA text contrast, with a deeper blue for text and buttons, darker greys and a scrim behind the hero titles.
• Demo content: yacht-charter copy, fictional crew and guest names, new Unsplash photos and a text wordmark replace the placeholder text, the original photos and the logo image. The contact and post pages now use the same menu as the other pages.