Getting started

Important: This is not a Wordpress theme but an HTML template. Before you buy it, make sure you need the HTML version. We are not liable for wrong purchases and we will not issue any refunds for mistakes in buying.

1. Document

This document will help you get started with Lavita. All the information regarding file structure, build tools, components and credits can be found here. If you have any questions that are beyond the scope of this help documentation, please feel free to contact us with the Email Themenix.com@gmail.com.

Note: Requests sent during weekends or on holidays will be replied on business days. We only provide support for the issues related to the features that are included in the template. Debugging or providing guides on how to make custom modifications are not part of our support. Thank you for understanding.

2. Overview

Lavita - Luxury Hotel Bootstrap Template

Lavita is a modern and luxurious Hotel HTML Template. It has a valid HTML & CSS3 code with clear comments, which makes it easy to edit the code (you can use Node.js/Gulp/SASS). Lavita also uses the Bootstrap Framework, which makes it fully adaptable and compatible with all devices.

The Lavita Template has 33 well-designed HTML pages, with various options for customization. It does not use Jquery, but a Pure Javascript Plugin that makes the website load faster. Even without Jquery, Lavila has all the features you need in HTML pages to create a professional hotel website.

Lavita uses pure Javascript frameworks and plugins: Bootstrap, Dselect, Flatpickr, Glightbox, Plyr, TinySlider, Hotel-datePicker, Fecha, Scrollcue, and Hotelicon…

Lavita Features
  • 33 HTML pages for a luxury hotel website
  • 10 Color options (Brown, Blue, Indigo, Purple, Pink, Red, Orange, Yellow, Green, Teal, Cyan)
  • For hotel, resort, and homestay websites
  • Guest account (Register, Login, Dashboard, Booking/Details, Profile)
  • Modal style forms (Login/Register/Forgot password)
  • 3 styles of room pages (Classic, Modern, Luxury)
  • 2 options of room details (Luxury and Minimalist)
  • Check room/availability form (Checkin/Checkout and Guests)
  • Step-by-step booking form (4 steps)
  • Tour pages (Categories, List, Single)
  • Extra services pages (Meetings & events, Restaurant & bar, Spa & wellness, Airport pickup)
  • Service booking form (Tour, Spa, Table, Service)
  • Hero banner with 3 options (Carousel, Image, Video)
  • Carousel for rooms, posts, services, and testimonials (Tiny-slider)
  • Sticky header (Light/Dark)
  • Dropdown/Mega menu (Light/Dark options)
  • Language and Currency modal
  • Full blog/post pages
  • Modern photo gallery
  • Image/Video background options
  • Lightbox for images and videos (gLightbox)
  • Video player for HTML5, YouTube, and Vimeo (Plyr)
  • Node.js, Gulp, Bootstrap 5.3, and SASS
  • Package.json/Gulpfile.js/SCSS files included
  • Bootstrap Framework based code (Bootstrap 5.3)
  • Maximum Bootstrap features inherited
  • Valid HTML5 & CSS3
  • No Jquery/Zero Dependency (Pure Javascript Plugins)
  • Standard SEO optimization
  • Fully Responsive & Mobile Friendly
  • Offcanvas mobile menu and contact info
  • Scroll animations with Scrollcue
  • Font icons (Hotel font icons)
  • Google fonts (Jost, Raleway)
  • Clean and commented code structure
  • Easy to customize
  • Well documented
  • 24/7 free support
  • Free updates

3. Prerequisites

Make sure you are familiar with the following technologies below:

  • HTML/CSS/JS (required)
  • Bootstrap 5.3 (required)
  • Sass/Scss (recommended): Using SCSS will make it easier for you to edit Templates.
  • Gulp (optional): Gulp is a task runner and automation tool. It will help you to compile SCSS, bundle JS modules, minifies output files, etc.
  • Npm (optional): Npm is a package manager for Node.js. With Npm can manage (install, update, delete) your project dependencies much easier.

4. Installation

Note: This is an optional step for advanced users who want to develop faster using Gulp/node.js. If you want to customize this template more simply and don't need SCSS/Gulp/Node.js knowledge you can use the files in the dev folder

4.1. Install Node.js and Gulp

  1. Make sure you have Node.js installed. If you don't have it installed, visit nodejs.org to download and install.
  2. Run npm install gulp-cli -g to install Gulp CLI globally if you haven't already installed Gulp CLI before.
  3. Unzip the template package and cd to Lavita root folder. Run npm install to install the dependencies from package.json file.
  4. You are now ready to work with the project files and npm packages.

4.2. Gulp tasks

  • gulp This is the default task that does the following: creates dist folder, starts BrowserSync, merges vendor libraries, minifies JS, compiles SASS/HTML, and watches for changes.
  • gulp serve This task starts watch and BrowserSync. It watches your HTML/SCSS/CSS/JS files and compiles them automatically..
  • gulp build:dist This task creates dist folder with all template files and minified CSS/JS.
  • gulp build:dev This will create dev which includes all template files with unminified CSS/JS.

When you want to kill the server just hit Control + C

For more information about Node.js/Gulp tools, visit https://nodejs.org and https://gulpjs.com.

5. Email sending configuration

Note: The send email feature in Demo has been turned off to prevent misuse for harmful purposes!

To receive Email from contact page, you need to replace email example@yourdomain.com with your email in assets/php/mail.php file.

You can see the code of the mail.php file below:

    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        # FIX: Replace this email with recipient email
        $mail_to = "example@yourdomain.com";
        # Sender Data
        $subject = trim($_POST["subject"]);
        $firstname = str_replace(array("\r","\n"),array(" "," ") , strip_tags(trim($_POST["firstname"])));
        $lastname = str_replace(array("\r","\n"),array(" "," ") , strip_tags(trim($_POST["lastname"])));
        $email = trim($_POST["email"]);
        $phone = trim($_POST["phone"]);
        $message = trim($_POST["message"]);
        # Mail Content
        $content = "First Name: $firstname\n";
        $content .= "Last Name: $lastname\n";
        $content .= "Email: $email\n\n";
        $content .= "Phone: $phone\n";
        $content .= "Message:\n$message\n";
        # email headers.
        $headers = "From: $firstname $lastname <$email>";
        # Send the email.
        $success = mail($mail_to, $subject, $content, $headers);
        if ($success) {
            # Set a 200 (okay) response code.
            # echo "Thank You! Your message has been sent.";
            # Back to contact
            header("Location: ../contact.html?code=200");
        } else {
            # Set a 500 (internal server error) response code.
            # echo "Oops! Something went wrong, we couldn't send your message.";   
            # Back to contact
            header("Location: ../contact.html?code=500");
    } else {
        # Not a POST request, set a 403 (forbidden) response code.
        # echo "There was a problem with your submission, please try again.";   
        # Back to contact
        header("Location: ../contact.html?code=403");


To use the email feature from the form on the contact page, you need to use the sample HTML file named contact-sample.html (You remember! rename it to contact.html and overwrite the existing contact.html file.). This file contains some extra Javascript code that displays a message when users send emails successfully or unsuccessfully.

    //Getting page URL
    const get_url = window.location.search;
    const url_param = new URLSearchParams(get_url);

    //get code parameter value from URL
    const code = url_param.get('code');

    //If Code is not Null
    if (code.length) {

        //Show message

        //If the message is sent successfully
        if (code == '200') {
            document.getElementById('msg_alert').innerHTML = "<strong>Your message has been sent</strong>.<br/>We have received your message and will contact you as soon as possible!<br/>Thank you for contact!";
        //If sending message failed
        else if (code == '500') {
            document.getElementById('msg_alert').innerHTML = "Oops! Something went wrong, we couldn't send your message.";
        //If there is an error
        else {
            document.getElementById('msg_alert').innerHTML = "There was a problem with your submission, please try again.";

6. Changelog

VERSION 1 (Oct 05 2022):

  • Initial release