Risotto is a one-page restaurant website template built on Bootstrap 5, with a full-height photo banner, a floating two-row header and a tabbed food and drinks menu. The layout is responsive and mobile-ready and works in all popular web browsers. It comes with two pages: the home page and a blog post.
The home page has an about section with a photo gallery slider, a menu with separate Dinner, Drinks, Lunch and Dessert tabs, a table reservation form with the opening hours, upcoming events with dates and times, and a contact block with the address, phone, email, social links and a map that loads on click. The blog post page has tags, share buttons, links to the previous and next posts, comments and a reply form. Risotto gives you a ready-made site for a restaurant, bistro or café, and you can add more sections in the same style.
What’s new in 3.0
Bootstrap 5.3.8 (the earlier release used Bootstrap 3.3.7 and jQuery 2.2.4), compiled from Sass together with the theme and the Bootstrap 3 proportions the design was drawn with, and plain JavaScript with no jQuery and no Bootstrap JavaScript. Swiper 14 replaces Owl Carousel on the gallery slider, small built-in functions run the phone menu, the sticky menu bar and the menu tabs, and Lucide SVG icons replace Font Awesome 4.7. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
Lighter pages: the home page went from 3.1 MB and 54 requests to 810 KB and 24 requests, and the blog post page from 876 KB and 21 requests to 347 KB and 15. Every photo has an AVIF version with the original as the fallback, real dimensions and lazy loading, and Swiper loads only on the home page. The download is 2.66 MB (it was 2.31 MB) because it now includes the Sass sources with Bootstrap’s Sass, the AVIF copies, the self-hosted fonts and the build tools, and the files sit at the root of the zip instead of in a subfolder.
No third-party requests: Quicksand, Cabin and Dancing Script are self-hosted, the social logos are a small Font Awesome subset (the Twitter bird is now the X logo, with Instagram and Pinterest added), the contact map is an OpenStreetMap map that loads only when a visitor clicks “Show map”, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, both pages loaded their web fonts from Google Fonts, and the home page loaded a map script that showed an error panel instead of the map.
Working forms: the table reservation form and the blog reply form send through php/reservation.php and php/comment.php, with required fields, native date and time pickers on the reservation form, a spam trap and an in-page message. Before, the reservation form had no action and no field names and the reply form had no button, so nothing could be sent.
Accessibility: a skip link and a main landmark on both pages, headings in order with an h1 on the blog post page, a labelled menu button that closes with Esc, menu tabs you can switch from the keyboard, labelled reply fields, names on icon-only links, 44 px touch targets, visible focus rings (the earlier release removed the focus outlines, and its button labels turned orange on orange when focused) and WCAG AA text contrast, with darker body text, a deeper orange under the white button labels and for orange text on white, and a lighter orange on the dark photo sections (the lowest text contrast went from 2.9:1 to 4.98:1).
Fixed: the four menu tabs all showed the Dinner list, and Drinks, Lunch and Dessert now show their own dishes; the blog page was linked from nowhere and every link pointed to #, and a Blog item is now in the header and footer menus; the gallery arrows sat outside the container, cut off and making the page scroll sideways below about 1340 px, and they are now visible at every width; and the full-page preloader that hid the page until every image had loaded is gone.
Demo content: dates, times and titles for the events, an English banner line and post title, fictional commenters, a placeholder email address, prices written as £57 and corrected typos (“Galery”, “Launch”, “spon”).