This page includes all designed elements which you may use while creating sites based on this template.

Start Exploring Go to chooser

Getting Started

Soup is a HTML/CSS template based on Bootstrap 4 framework. It allows to built modern, fast and mobile friendly websites for restaurants. What's more it includes componentes for online ordering system.

HTML Structure

This is the base of each HTML file:

<!-- Header -->
<header id="header">
<!-- Header / End -->

<!-- Content -->
<div id="content">

	<!-- Section -->

    <!-- Footer -->

<!-- Content / End -->

Grid System

Soup Template supporst all features of Bootstrap Grid System - go to Bootrstrap's page and check how does it work.


It will be pleasure to build content with this stuff!. More at Bootstrap's 4 page.


Useful elements to create nice texts.



h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>



Maecenas a risus quis ipsum convallis fringilla in ut magna. Phasellus et sagittis odio. Sed in enim condimentum, lacinia metus id, sollicitudin libero. In ac ultricies justo.

Curabitur sit amet turpis eu diam luctus viverra. Sed viverra ornare ex, quis lobortis diam vehicula a. In imperdiet est tristique, malesuada odio quis, volutpat ante. Nulla ullamcorper, nisl sed faucibus posuere, dui turpis mattis turpis, in porttitor massa odio nec sapien.

<p class="lead">...</p>


Blocquote with alternative .light version.


Great food and great atmosphere!

Kate Hudson, LinkedIn
<!-- Blockquote -->
<blockquote class="blockquote">
    <div class="blockquote-content dark">
        <div class="rate rate-sm mb-3"><i class="fa fa-star active"></i><i class="fa fa-star active"></i><i class="fa fa-star active"></i><i class="fa fa-star active"></i><i class="fa fa-star"></i></div>
        <p>Great food and great atmosphere!</p>
        <img src="" alt="">
        <span class="name">Kate Hudson<span class="text-muted">, LinkedIn</span></span>


Easy & effectife way to resent code. More at Bootstrap's 4 page.

Inline code

For example, <section> should be wrapped as inline.
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Code block

<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;


... ...
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="img-thumbnail">


Soup template includes two fantastic sets of icons - Themify Icons and Line Icons

Basic Icons


Circle Icons



Each icon may be used in any color from Available Colors section. Please use .icon-[color-name] - for example:


Social Icons

This product supports lots of social icon types.




Thanks to the prepared components you will be able to create really cool and effective, easy to use websites. Let's start exploring them!


<div class="alert alert-success" role="alert">
<div class="alert alert-info" role="alert">
<div class="alert alert-warning" role="alert">
<div class="alert alert-danger" role="alert">


Button Types

Example - available colors

Outline Buttons

Example - available colors

Button Sizes

Want to create bigger or smaller buttons? Just use .btn-lg, .btn-sm, .btn-xs classes.


Button Groups

Arrange awesome button groups!

<div class="btn-group">
    <button type="button" class="btn btn-dark"><span>Button Dark</span></button>
    <button type="button" class="btn btn-primary"><span>Button Primary</span></button>


To validate the form please add data-validate attribute and required atribute to input / textarea.

<form action="#" class="validate-form">
    <div class="form-group">
        <label>Your e-mail</label>
        <input name="email" type="email" class="form-control" required>
    <div class="form-group">
        <label>Your message</label>
        <textarea name="message" id="message" cols="30" rows="5" class="form-control" required></textarea>
    <div class="form-group form-submit">
        <button type="submit" class="btn btn-primary btn-block"><span>Send message!</span></button>


<ul class="pagination">
    <li class="page-item">
        <a class="page-link" href="#" aria-label="Previous">
            <i class="ti ti-angle-left"></i>
            <span class="sr-only">Previous</span>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item">
        <a class="page-link" href="#" aria-label="Next">
            <i class="ti ti-angle-right"></i>
            <span class="sr-only">Next</span>


Feel free to use the tabs for dynamic content.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
<!-- Nav Pills -->
<ul class="nav nav-pills nav-fill mb-3" role="tablist">
    <li class="nav-item"><a class="nav-link active" href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li class="nav-item"><a class="nav-link" href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<!-- Tab Panes -->
<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
    <div role="tabpanel" class="tab-pane fade" id="profile">...</div>
    <div role="tabpanel" class="tab-pane fade" id="messages">...</div>


Modal window is perfect place for any kind of content.

<!-- Button trigger modal -->
<button type="button" class="btn btn-blue btn-lg" data-toggle="modal" data-target="#demoModal"><span>Launch demo modal</span></button>

<!-- Modal / Demo -->
<div class="modal fade" id="demoModal" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">Modal title</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="ti ti-close"></i></button>
			<div class="modal-body">
			<div class="modal-footer">
				<button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>


Modals have three optional sizes .modal-sm, .modal-lg available via modifier classes to be placed on a .modal-dialog.

Video Modal

Video Modal was created to place video in popup window. Use data-video attribute to place url to your video.

<!-- Button trigger modal -->
<a href="#" class="btn-play-2" data-toggle="video-modal" data-target="#modalVideo" data-video=""><span></span>Check it now!</a>

<!-- Video Modal / Demo -->
<div class="modal modal-video fade" id="modalVideo" role="dialog">
    <button class="close" data-dismiss="modal"><i class="ti ti-close"></i></button>
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <iframe height="500"></iframe>


Default Primary Success Info Warning Danger


Hover the buttons to see the tooltips.



Below are listed important configuration options for whole template.

Available Colors

Colour scheme:




Helper Classes

Text Colors

It is possible to add any color form Available Colors section by .text-[color-name] class

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.


Similar to text colors it is possible to add backgorund color from Available Colors section by .bg-[color-name] class.

For dark background colors it is necessary to add dark class to adjust font colors and other styles. Sometimes, if inside dark element is placed element with light background you should add light class to such element.


Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

<p class="bg-success dark p-2">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>


It is possible to add border to any of html elements by adding proper class:

  • .border - adds border to element
  • .border-top - adds top border to element
  • .border-bottom - adds bottom border to element
Element with border-bottom.
<div class="pb-10 border-bottom">Element with border-bottom.</div>

Heights & vertical center position

The template allows to set minimial height of block html element. It is possible by using .h-[value] class.
[value] is a number from 100 to 900 with 100 gap or sm (40% of viewport), md (60% of viewport) and lg (80% of viewport).

By .fullheight class you set elements height equal to the browser viewport height.

Using .v-center class makes element positioned vertically center in relation to the parent.


H2 inside 200px container.

<div class="bg-light h-200">
    <h2 class="text-center mb-0 v-center">H2 inside 200px container.</h2>

More useful helper classes are listed on Bootstrap's 4 website!


The template includes some configurable elements - here you will find informations how to use them!

Google Map

Google Maps require to set your own API key - click here for more informations how to generate it. To put it into the template please run development mode and paste it into js/modules/google-map.js file

To latitude and longitude parameters just please edit data-latitude and data-longitude attributes of #google-map element. To get it please visit site like this.

<div class="google-map h-500 shadow" data-lat="50.064651" data-lon="19.944981" data-style="dream"></div>

Booking Form

To configure booing form please open booking-form.php file from /assets/php directory and go the line with an e-mail address to change it to your own - like this.

$emailTo = '';

After that you will recieve the messages from your websites to this e-mail address.

SentMail function must be enabled on your hositng. Otherway I recommend use and configure plugin like "PHPMailer".

SignUp Form

SignUp form is made with Mailchimp API.

How to create the form?

To create Sign Up form you have to have an account on Mailchimp site.
  1. Log into the Mailchimp site.
  2. Create subscribers list.
  3. Get into the list and go to "Signup forms" tab.
  4. Pick "Embedded forms".
  5. Pick "Classic version" and copy / paste somewhere generated code (don't change anything).
  6. Find form selector and copy action atribute valuse into your form. Remember to add method="POST" attribute.
  7. Modify action URI by changing .../post?... to .../post-json?.... It should look like this action="//"
  8. Find email input and copy type, name and id to your input - it should look like this: <input type="email" value="" name="EMAIL" class="form-control input-lg" id="mce-EMAIL">
  9. Find input which prevents bot signups and paste it somewhere in the form - it should be hidden!
  10. Add submit button and enjoy your working Sign Up form!

Local Scroll

If you want to use local scroll somewhere in the content please add data-local-scroll attribute in the parent selector of a link to local selector.


The template allows to add really cool animations for each of html elements. Let's check how to use it!

Entrance animation

This animation fires when element appears in the browser viewport. To add such animation you need to place .animated class in the animted element and preciese which animation do you want to use by data-animationattribute. It is also possible to add some delay to the animation (in ms) by data-animation-delay attribute.



The template contains two shopping cart components located in ./src/js/modules directory.


The first one is based on JSON and localStore and it. It requires to receive JSON structure with menu categories and items.

const JSON_CATEGORIES = './data/categories.json'
const JSON_MENU = './data/menu.json'
const JSON_DELIVERY = './data/delivery.json'


    "id": 1,
    "name": "Burgers",
    "additions": [
        "id": 1,
        "name": "Chicken",
        "price": 2.0
        "id": 2,
        "name": "Angus Beef",
        "price": 5.0


    "id": 1,
    "categoryId": 1,
    "name": "Beef Burger",
    "price": 9.0,
    "ingredients": ["Beef", "Cheese", "Potato", "Onion", "Fries"],
    "sizes": [
        "id": 1,
        "active": true,
        "name": "Normal",
        "value": "200g",
        "price": 9.0
        "id": 2,
        "active": false,
        "name": "Double",
        "value": "400g",
        "price": 12.0


  "price": 4.0

It is fully working solution.


Basic version of the cart contains methods to show / hide modal and panel.

To set the aprriopriate module for you please update the import path e.g.
import Cart from './modules/cart'

Entrance animation

This animation fires when element appears in the browser viewport. To add such animation you need to place .animated class in the animted element and preciese which animation do you want to use by data-animationattribute. It is also possible to add some delay to the animation (in ms) by data-animation-delay attribute.


Files & Credits

CSS Files

The template uses two CSS files:

<!-- CSS Core -->
<link rel="stylesheet" href="dist/css/core.css" />

<!-- CSS Theme -->
<link id="theme" rel="stylesheet" href="dist/css/theme-[color].min.css" />

CSS Core is bundled stylesheet with all third-part styles.

CSS Theme is a main theme stylesheet and it is divided into following sections:

1. Setup
2. Basic
3. Header
-- 4.1 Header Mobile
-- 4.2 Navigation Desktop
4. Content
-- 4.1 Blog
-- 4.2 Features
-- 4.3 Menu
-- 4.4 Other
-- 4.5 Page Title
-- 4.6 Sections
5. Footer
6. Elements
-- 6.1 Alerts
-- 6.2 Backgrounds
-- 6.3 Badges
-- 6.4 Buttons
-- 6.5 Carousel
-- 6.6 Forms
-- 6.7 Icons
-- 6.8 Loader
-- 6.9 Modals
-- 6.10 Navigations
-- 6.11 Notification Bar
-- 6.12 Other
-- 6.13 Pagination
-- 6.14 Testimonials
-- 6.15 Typography
7. Widgets
8. Animations

CSS Theme is also available in couple of diffrent color versions:


SCSS Files

CSS files are generated thanks to well organized SCSS files.

├── _animations.scss
├── _base.scss
├── _basics.scss
├── _config.scss
├── _content
│   ├── _blog.scss
│   ├── _features.scss
│   ├── _menu.scss
│   ├── _other.scss
│   ├── _page-title.scss
│   └── _sections.scss
├── _content.scss
├── _elements
│   ├── _alerts.scss
│   ├── _backgrounds.scss
│   ├── _badges.scss
│   ├── _buttons.scss
│   ├── _carousel.scss
│   ├── _forms.scss
│   ├── _icons.scss
│   ├── _loader.scss
│   ├── _modals.scss
│   ├── _navs.scss
│   ├── _notification-bar.scss
│   ├── _other.scss
│   ├── _pagination.scss
│   ├── _panel-cart.scss
│   └── _typography.scss
├── _elements.scss
├── _footer.scss
├── _header
│   ├── _header-mobile.scss
│   └── _navigation-desktop.scss
├── _header.scss
├── _setup.scss
├── _widgets.scss
├── package.json
├── theme-beige.scss
├── theme-blue.scss
├── theme-green.scss
├── theme-mint.scss
├── theme-orange.scss
├── theme-red.scss
└── theme-teal.scss
  • theme-[color-scheme].scss is a main SCSS file where main colors have been set.
  • _base.css file is a base for each theme which imports other partials.
  • _config.css file with SASS variables which configure colors, fonts and more.
Go to Development to check how to compile SASS.

JavaScript Files

The core of this template is src/js/core.js file which imports all third-part plugins and custom modules. It is bundled by Webpack powered by various loaders so it contains either JS and CSS/SCSS files.

Custom Modules
import BackToTop from './modules/back-to-top'
import Background from './modules/background'
import Carousel from './modules/carousel'
import Cart from './modules/cart'
import Collapse from './modules/collapse'
import Cookies from './modules/cookies'
import Components from './modules/components'
import CustomControl from './modules/custom-control'
import Forms from './modules/forms'
import GoogleMap from './modules/google-map'
import Navigation from './modules/navigation'
import Modal from './modules/modal'
import PageTransition from './modules/page-transition'
import Parallax from './modules/parallax'
import Sticky from './modules/sticky'
import Twitter from './modules/twitter'
import Docs from './modules/docs'

The output of the core JS file is placed at the bottom of the body of each HTML file.

<script src="dist/js/core.js"></script>

PHP Files

The template includes few PHP scripts:

  • php/booking-form.php - configuration file for contact form



  1. Oswald -
  2. Raleway -


  1. Themify Icons -
  2. Font Awesome -


  1. jQuery -
  2. Bootstrap 4 -


  1. Appear -
  2. ScrollTo -
  3. Validate -
  4. Twitter Post Fetcher -
  5. Slick -
  6. Prettify -
  7. Skrollr -
  8. Animsition -


Some images used in the template was free and have been included in a package. Rest of them was blurred becouse of licensing reasons.



What has changed since first version?


v 2.00 - 22.05.2020

ADD    - Fresh Home Page
ADD    - Dark Home Page
ADD    - JSON / locaStorage based shopping cart
ADD    - Cookies Popup
ADD    - COVID-19 Modal
UPDATE - Developer Environment
UPDATE - Files structure
FIX    - Minor Fixes

### Files affected

ADDED -  index-fresh.html
ADDED -  index-dark.html
ADDED -  dist/theme-teal.css
ADDED -  dist/core.css
ADDED -  dist/theme-beige.css
ADDED -  dist/theme-blue.css
ADDED -  dist/theme-green.css
ADDED -  dist/theme-mint.css
ADDED -  dist/theme-orange.css
ADDED -  dist/theme-red.css
ADDED -  dist/js/core.js
ADDED -  src/js/modules/twitter.js
ADDED -  src/js/modules/styleswitcher.js
ADDED -  src/js/modules/sticky.js
ADDED -  src/js/modules/parallax.js
ADDED -  src/js/modules/scroll.js
ADDED -  src/js/modules/navigation.js
ADDED -  src/js/modules/page-transition.js
ADDED -  src/js/modules/google-map.js
ADDED -  src/js/modules/modal.js
ADDED -  src/js/modules/docs.js
ADDED -  src/js/modules/forms.js
ADDED -  src/js/modules/cookies.js
ADDED -  src/js/modules/custom-control.js
ADDED -  src/js/modules/collapse.js
ADDED -  src/js/modules/components.js
ADDED -  src/js/modules/cart.js
ADDED -  src/js/modules/cart-basic.js
ADDED -  src/js/modules/carousel.js
ADDED -  src/js/modules/background.js
ADDED -  src/js/modules/back-to-top.js
ADDED -  src/js/modules/animations.js
REMOVED - assets/scss/*
REMOVED - assets/css/*

v 1.01 - 15.09.2017

ADD    - Burger's Home Page
FIX    - Minor Fixes

### Files affected

ADDED -  index-burgers.html
UPDATE - css/themes/*.css


The source of the template is located in ./src/ directory. Whole template is based on Webpack which bundles the source files into ./dist/ folder.

The template is powered by NPM. The package.json contains three main scripts:

"scripts": {
    "dev": "webpack --config build/",
    "build": "webpack --config build/"
    "validate": "grunt validation"

You can invoke these scripts using e.g. npm run dev command.

  • npm run dev - starts development mode with BrowserSync server and JS/SCSS bundler.
  • npm run build - builds minified JS/CSS files.
  • npm run validate - runs HTML validation.
Plese note to install all dependencies by npm install command before staring development process.