Diner

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Diner is a website template for restaurants, diners, bistros and cafés, built on Bootstrap 5, with a dark, photo-led design, Playfair Display headings and warm amber accents. The layout is responsive and mobile-ready and works in all popular web browsers. It comes with seven pages: home, about, menu, blog, blog post, reservation and contact.

The home page opens with a full-screen photo hero and a full-screen overlay menu, then shows feature boxes, a grid of specialties with prices, a testimonial slider, feature-menu and chef panels, a breakfast, brunch and dinner menu in tabs, recent news and a “why choose us” accordion. The inner pages add the restaurant’s story and chef team, the full menu, a blog with comments and a sidebar, a table reservation form and a contact form, each with a map that loads on request.

What’s new in 3.0

• Bootstrap 5.3.8 (the earlier release used a Bootstrap 4 beta and jQuery), compiled from Sass with the theme variables and the original Bootstrap 4 proportions, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the testimonial slider, Jarallax replaces Stellar.js for the hero parallax, small built-in modules replace the scroll animations, and native date and time fields replace the jQuery pickers. npm run build (Dart Sass and esbuild) compiles the minified stylesheets and script.
• Lighter pages: all seven pages together went from 12.2 MB and 286 requests to 6.7 MB and 234 requests. Every photo has an AVIF version with the JPEG or PNG as the fallback, real dimensions and lazy loading, and the page preloader is gone.
• No third-party requests: Open Sans and Playfair Display are self-hosted, the three icon fonts are replaced by Lucide SVG icons and a small social-logo subset (the Twitter bird is now the X logo), the map loads only when a visitor clicks “Show map”, and a Google Analytics 4 snippet stays commented out until you add your own ID.
• Working forms: the reservation, contact, comment and newsletter forms post to an included PHP handler with validation, a spam trap and pending, error and success messages on the page; the blog search box searches by keyword.
• Accessibility: a skip link, page landmarks, one main heading per page, descriptive image text, a keyboard-operable overlay menu that closes with Escape, visible focus rings, and text and buttons that meet WCAG AA contrast (a deeper amber for text and buttons on white, a soft shade behind the hero headings).
• Fixes: the shipped Sass now compiles, every header and footer link leads to a real page, the menu marks the current page, typos in the menu and headings are corrected, and each page has its own title, description and social-sharing tags.