Restaurant & Café Bootstrap 5.3.8 HTML Template
Bootstrap 5.3.8 HTML5 SCSSDineCraft is a modern, fully responsive Restaurant & Café HTML template built with Bootstrap 5.3.8, HTML5, CSS3, and SCSS. It is suitable for restaurants, cafés, bistros, food courts, and hospitality businesses.
dinecraft/ ├── assets/ │ ├── scss/ │ │ ├── abstract/ │ │ ├── base/ │ │ ├── components/ │ │ ├── layouts/ │ │ ├── pages/ │ │ └── style.scss │ ├── css/ │ ├── js/ │ ├── images/ │ └── vendors/ ├── *.html └── documentation/
index.html in your browser.
<header></header>
<main>
<section>...</section>
</main>
<footer></footer>
All HTML files in DineCraft follow a clean, modular, and well-commented structure built with Bootstrap 5.3.8, HTML5, and modern best practices. Below is an overview of the standard page structure used across the template.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Page Title -->
<title>DineCraft</title>
<!-- Favicon -->
<link rel="shortcut icon" href="assets/images/favicon.png">
<!-- Bootstrap CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<!-- Icons & Animation CSS -->
<link href="bootstrap-icons.css" rel="stylesheet">
<link href="aos.css" rel="stylesheet">
<!-- Main Stylesheet -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- Page Loader -->
<div class="loader-wrapper">
<div class="spinner"></div>
</div>
<!-- Navbar / Header -->
<nav class="navbar navbar-expand-lg fixed-top">
<!-- Logo -->
<!-- Navigation Menu with Dropdowns -->
</nav>
<!-- Hero Section -->
<!-- Home Carousel / Image Background / Video Background -->
<div class="carousel hero-section">
<!-- Slides -->
</div>
<!-- About Section -->
<section class="home-about">
<!-- Image Collage + Content -->
</section>
<!-- Chefs Section -->
<section>
<!-- Chef Carousel -->
</section>
<!-- Menu Section -->
<section class="our-menu">
<!-- Menu Items -->
</section>
<!-- Reservation / Booking Section -->
<section class="book-a-table-split">
<!-- Booking Form -->
</section>
<!-- Blog Section -->
<section>
<!-- Blog Cards -->
</section>
<!-- Footer -->
<footer>
<!-- Quick Links -->
<!-- Opening Hours -->
<!-- Contact Info -->
<!-- Copyright -->
</footer>
<!-- JavaScript Files -->
<script src="bootstrap.bundle.min.js"></script>
<script src="aos.js"></script>
<script src="assets/js/app.js"></script>
</body>
</html>
Each section is clearly separated using HTML comments, making it easy to customize,
remove, or extend individual sections. Animations are handled using the AOS library,
and all interactive behavior is managed inside assets/js/app.js.
DineCraft includes a basic SEO-ready setup in every HTML page. These settings help search engines understand your website content and improve visibility when your site is published online.
All SEO-related settings are located inside the <head> section
of each HTML file.
By default, the template includes the following SEO elements:
<title>)Below is an example of the SEO markup included in the template. Users should customize the values based on their own website and content.
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- SEO --> <title>Your Page Title Here</title> <meta name="description" content="Write a short description about this page"> <meta name="robots" content="index, follow"> <meta name="author" content="Your Brand Name"> <!-- Canonical URL --> <link rel="canonical" href="https://yourdomain.com/page-url"> <!-- Open Graph --> <meta property="og:title" content="Page title for social sharing"> <meta property="og:description" content="Description for social sharing"> <meta property="og:image" content="assets/images/preview.jpg"> <meta property="og:type" content="website"> </head>
<title> tag to match each page topicmeta description with relevant keywords
All images in the template support alt attributes and lazy loading.
Users should update image alt text to describe image content accurately.
<img src="assets/images/image.webp"
alt="Describe the image here"
loading="lazy">
DineCraft uses a modular SCSS architecture to keep styles clean, reusable, and easy to maintain. SCSS files are organized by abstracts, base styles, components, layouts, and page-specific styles.
assets/scss/ ├── abstract/ (variables, mixins, functions) ├── base/ (reset, typography, global styles) ├── components/ (buttons, cards, forms, sliders) ├── layouts/ (header, footer, navigation) ├── pages/ (page-specific styles) └── style.scss (main SCSS file)
To customize colors, fonts, or other global styles, edit the variables file:
assets/scss/abstract/_variables.scss
After making changes, you must recompile the SCSS files to generate the updated CSS.
You can compile SCSS using any SCSS compiler. Below are the most common methods:
npm install -g sass sass assets/scss/style.scss assets/css/style.css --watch
assets/scss/style.scssassets/css/style.cssYou can also use tools like:
If you do not want to work with SCSS, you can directly edit the compiled CSS file:
assets/css/style.css
All SCSS is already compiled and included in the template. No SCSS compilation is required if you only edit the CSS file.
Important: If you edit the CSS file directly, your changes may be overwritten if you recompile SCSS in the future.
style.css directlyDineCraft uses the AOS (Animate On Scroll) library to create smooth and modern scroll-based animations across the template. Animations are initialized globally and trigger automatically when elements enter the viewport.
AOS is initialized inside the main JavaScript file:
assets/js/app.js
Animations are loaded automatically on page load and apply to all pages. No additional setup is required.
To apply animation to any element, add the data-aos attribute:
<div data-aos="fade-up" ata-aos-delay="0">>
Animated content
</div>
| Attribute | Description | Example |
|---|---|---|
data-aos |
Animation type | fade-up, fade-left, zoom-in |
data-aos-delay |
Delay before animation (ms) | 200 |
data-aos-duration |
Animation duration (ms) | 800 |
data-aos-offset |
Offset from trigger point | 120 |
data-aos-easing |
Animation easing | ease-in-out |
You can modify global animation settings inside assets/js/app.js:
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true,
offset: 100
});
Changes here will affect all animations throughout the template.
To disable animations:
AOS.init() inside app.jsdata-aos attributes from HTML elements
JavaScript files are located in assets/js/ and are well commented.
Used for sliders, navigation, video background, and UI interactions.
The template is fully responsive and tested on mobile, tablet, desktop, and laptop devices.
Images are used for demo purposes only and are not included in the download.
For support, please contact:
Email: helloprettycodes@gmail.com
Response Time: 24–48 hours (Mon–Fri)
© DineCraft – Restaurant Bootstrap 5 HTML Template