Overview

A restaurant discovery and food directory HTML template. Vitto provides rich restaurant and food story listings, multiple homepage styles, a donation feature for community-driven food initiatives, an online shop, and clean blog pages — all designed around the dining experience.

What’s included

  • 5 homepage layout variations
  • Restaurant and food story listings
  • Restaurant donation pages (grid and detail)
  • Blog (left and right sidebar)
  • Shop, product detail, cart, checkout, wishlist
  • Order detail page
  • Login and register pages
  • About, contact, and 404 pages
📄 25 HTML files

Getting Started

Thank you for choosing Vitto. Follow the steps below to get your site live.

1. Open locally

Unzip the downloaded package and open index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — all files are ready to use as-is.

2. Deploy to a server

Upload the entire template folder to your hosting provider using an FTP client (such as FileZilla) or your hosting control panel. Once uploaded, navigate to your domain and the template will load immediately.

3. Customise

All styling lives in assets/css/style.css. Edit colours, fonts, and spacing there. HTML pages are straightforward and well-structured — open any page in a code editor to modify content directly.

Tip: We recommend using VS Code with the Live Preview extension for the smoothest editing experience.

File Structure

Below is an overview of the key files and folders included in this template.

index.html / homepage-2 – 5.htmlHomepage variations
story-grid.html / story-details.htmlFood story pages
donation-grid.html / donation-details.htmlDonation pages
blog-left.html / blog-right.html / blog-details.htmlBlog pages
shop-left.html / shop-right.html / shop-details.htmlShop pages
cart.html / checkout.html / wishlist.htmlE-commerce flow
order-details.htmlOrder detail page
login.html / register.htmlAccount pages
about.html / contact.html / 404.htmlInfo and utility pages
assets/css/   assets/js/Stylesheets and scripts

Bootstrap 5 Guide

This template is built on Bootstrap 5.3.3. If you plan to add new components or customise existing ones, here is a quick reference for the most common Bootstrap 5 patterns.

Interactive attributes

Bootstrap 5 uses data-bs-* attributes. If you copy a component from an older Bootstrap 4 tutorial, update the attributes as shown:

Bootstrap 4
data-bs-toggle="modal"data-bs-target="#id"data-bs-dismiss="modal"data-bs-toggle="tooltip"
Bootstrap 5
data-bs-toggle="modal"data-bs-target="#id"data-bs-dismiss="modal"data-bs-toggle="tooltip"

Spacing & text utilities

Bootstrap 4
ml-* / mr-*pl-* / pr-*text-start / text-endfloat-start / float-end
Bootstrap 5
ms-* / me-*ps-* / pe-*text-start / text-endfloat-start / float-end

Common class changes

Bootstrap 4
..form-select.close.badge-primary.form-row
Bootstrap 5
.mb-3.form-select.btn-close.text-bg-primary.row.g-2
Need more? The full Bootstrap 5 migration guide is at getbootstrap.com/docs/5.3/migration/.

Credits

This template is built using the following open-source libraries and resources.

  • Bootstrap 5.3.3
  • jQuery
  • Popper.js
  • Slick Slider
  • Magnific Popup
  • Font Awesome
  • WOW.js
  • Animate.css
  • Nice Select

Fonts and icon packs are loaded locally — no external CDN calls are required once the template is deployed.

Support

If you have any questions or need help with the template, please reach out through our ThemeForest profile. We aim to respond within 24–48 hours.

For licensing information visit metropolitanhost.com/licenses.