Caviar

Author: Colorlib

Updated: October 2026 · v3.0.0

Credits: Images from Unsplash

Caviar is a website template for fine-dining restaurants, built on Bootstrap 5 with a black, white and red design. The layout is responsive and works in all modern browsers. There are four pages: home, menu, a regular content page and contact.

The home page opens with a full-screen photo slider, followed by about and chef sections, the specials, a row of award badges, a testimonials slider and a table reservation form. The menu page has breakfast, lunch and dinner filters over a paged dish slider, and the search in the header lists the matching dishes there. The regular page is an article with a pull quote, and the contact page has the restaurant’s details, a contact form and 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 design’s original proportions, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel for the hero, testimonial and menu sliders, small modules replace the old menu filter and scroll animation plugins, and Lucide SVG icons replace the Font Awesome 4.7 and Pe-icon-7-stroke icon fonts. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
• Lighter pages: the home page went from 3.01 MB and 40 requests to 1.30 MB and 31 requests, the menu page from 1.26 MB to 0.73 MB and the contact page from 1.92 MB to 0.62 MB. Every photo has an AVIF version with the JPEG or PNG as the fallback, and the largest JPEGs are recompressed. The download is 4.19 MB (it was 4.15 MB): it now includes the AVIF copies, the Sass sources and the build tools, while 1.5 MB of icon fonts are gone.
• No third-party requests: Open Sans and Work Sans are self-hosted (only the weights in use), the social logos are a small Font Awesome subset (the Twitter bird is now the X logo), and a Google Analytics 4 snippet stays commented out until you add your own ID. The contact map is an OpenStreetMap map that needs no setup and loads only when a visitor clicks “Show map”. Before, every page loaded its fonts from Google Fonts and the contact page loaded the Google Maps script.
• A menu that is easier to browse: choosing breakfast, lunch or dinner lists all of that category’s dishes at once, and “All” brings back the paged slider; dish names line up whatever their length; and the header search on any page opens the menu with the matching dishes. Before, a category’s dishes stayed split across the slider pages and the search went nowhere.
• Working forms: the reservation form (date, time, number of guests, name, email, phone and a message) and the contact form send through php/send-email.php, with a placeholder recipient you set, a spam trap and an in-page message. Before, both forms posted to # and the reservation form had no email or phone field, so there was no way to reach the guest.
• Accessibility: a skip link and landmarks on every page, one h1 per page, labelled form fields, search and social links, a search panel that takes focus and closes with Esc, visible keyboard focus and WCAG AA text contrast. A deeper red is used for small red text, a soft shade behind the header keeps its links readable on bright photos, and the footer text is readable (it was 1.9:1).
• Fixed: on phones the social icons no longer cover the hero text; the favicon works; the header links on the inner pages go to the home page sections, and the current page is marked correctly; the preloader that hid the page until everything had loaded is gone; and every page has its own title and description.