The Story of Boots5

To Infinity and Beyond!

At Boots5, we believe there is a way where customers are earned rather thanbought. We're obsessively passionate about it, and our mission is to help you achieve it.

Boots5 was founded by ThemeWagon Team in 1896. It was called the world's first bootstrap four
template, and started as a Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam illo, magni
aut recusandae perspiciatis quam sed eveniet, debitis tempore natus corrupti nostrum deserunt,
harum in dolor dolorem sit voluptatum iusto. recusandae perspiciatis quam sed eveniet, debitis
tempore natus corrupti nostrum recusandae perspiciatis quam sed eveniet, debitis tempore.

0

Lines Of Code

0

Cups of Coffee

0

Download

Meet Our Team

Alex Butler

Fraud Manager

Andreas Heim

Software Engineer

Amanda Alleson

UX Designer

Brandon Renfrow

Developer

Brian Childs

Training Manager

Britney Muller

SEO Scientist

Casey Coates

Software Engineer

Dana

Bug Hunter

Start your next project with us

Join the talented group of artists and imaginators

Join Boots5

Made with by ThemeWagon

About Us

starter services

What We Do Best

Development

Our award-winning team follow industry best practices to develop software.

Design

Our unique tools design grahphics & HTML5 templates 4X faster than our rivals.

Application

Having the shortest possible delay between idea and launch is crucial in business possible delay between ideapossible delay between idea

Choose Your Plan

Basic

$20/ monthly

Unlimited
Encrypted
No Traffic Logs
Works on All

Advanced

$50/ monthly

Unlimited
Encrypted
Yes Traffic Logs
Works on All

Business

$30/ monthly

Unlimited
Encrypted
Yes Traffic Logs
Works on All

Our Valuable Clients

Start your next project with us

Join the talented group of artists and imaginators

Join Boots5

Made with by ThemeWagon

Services

about contact

Doc

Quick Start
Setting Up Build System
File Structure
Gulp
RTL
Add a New Page
Add a New Plugin
Form Processor
Built In Plugins
Google Map
Changelog

Quick Start

Looking to start your project quickly? Just unzip the boots5-v1.1.0.zip. We have precompiled and packaged everything in the public directory for you. Start editing the pages/nav-four-item-two-column.html with a text or code editor, save it, and open the file in your favourite browser to see the changes.

Setting Build system

Unzip the boots5-v1.1.0.zip to any folder and open a command line or terminal at that location. Boots5-v1.1.0's dev tools require Node and Git . If you do not have them in your machine, please install their latest stable version from their corresponding website. As you have Node and Git installed and accessible from your terminal or command line, install Gulp CLI package globally with the following command:

npm i gulp-cli -g

When you’re done, install the rest of the Boots5-v1.1.0's dependencies with:

npm i

Now run:

gulp

Running gulp will compile the SCSS, transpile the javascript, copy all required libraries form node_modules to the corresponding public/assets/vendors directory and will open a browser window to public/index.html

All of the following folders are monitored for changes, which will tell the browser to reload automatically after any changes are made:

public/assets/video/
public/assets/img/
public/vendors
src/pug/
src/scss/
src/js

Now you can edit any pug file from src/pug, change SCSS variable with scss/_user-variables.scss, or write your own SCSS code in scss/_user.scss and add or update javascript from src/js directory

Running the gulp command will discard and regenerate all the files in following directories:

public/**/*.html
public/assets/css/
public/assets/js/
public/vendors

Hit Ctrl+C or just close the command line window to stop the server. Happy editing!

File Structure

Within your Boots5-v1.1.0 you’ll find the following directories and files, grouping common resources and providing both compiled, transpiled and minified distribution files, as well as raw source files.

boots5-v1.1.0/
  ├── Gulp/
  |   ├── build.gulp.js
  |   ├── clean.gulp.js
  |   ├── link.gulp.js
  |   ├── product.gulp.js
  |   ├── pug.gulp.js
  |   ├── script.gulp.js
  |   ├── vendor.gulp.js
  |   ├── w3c.gulp.js
  |   ├── watch.gulp.js     
  ├── public/
  |   ├── assets/
  |   ├── documentation/
  |   ├── pages/
  |   ├── vendors/
  |   ├── index.html
  ├── src/
  |   ├── js/
  |   ├── pug/
  |   ├── scss/
  gulpfile.js
  package-lock.json
  package.json
  vendors.json

Gulp

To start your project run:

gulp

The gulp command will build, serve and watch the project with the following gulp tasks:

Task	Action
`clean`	Delete the following directories: `public/assets/css public/assets/js public/vendors // packages which are included in vendors.json public/*/.html`
`style`	Compiles `scss/theme.scss` and generates `theme.css, theme.min.css, theme-rlt.css, theme-rtl.min.css` and `theme.css.map, theme.min.css.map, theme-rlt.css.map, theme-rtl.min.css.map` to the `public/assets/css/` directory.
`script`	Concat the `js` files from `src/js/` and transpiles with babel to `theme.js`, `theme.min.js` to the `public/assets/js/` directory.
`compile:all`	Compiles all the `js,` `scss,` `pug` files from the `src` directory.
`vendor`	Runs `vendor:clean` and `vendor:move` in series.
`vendor:clean`	Delete the vendors from `public/vendors` directory which are included in `vendors.json`.
`vendor:move`	Copies the vendors from `node_modules/` directory to `public/vendors` directory according to the `vendors.json`.
`watch`	All of the following folders are monitored for changes, which will tell the browser to reload automatically after any changes are made: `public/assets/img public/assets/video public/vendors/ src/pug src/scss src/js`
`build`	Will delete previous build directory and generate a new compressed version to deploy `build/assets/img build/assets/video build/assets/css build/assets/js build/vendors/ build/*/.html`
`build:test`	Will run the build version in port:3000

RTL

Your theme comes with a built-in automated rtl feature. Here is the example. To use rtl, set the dir='rtl' in your html like:

<html dir='rtl'>...</html>

And use the rtl stylesheet instead of theme.css

<link href="assets/css/theme-rtl.css" rel="stylesheet" />

Add a New Page

To add/replace a new page in Boots5-v1.1.0 you should set a unique id to .page element and also assign it to pages attribute of .sidebar-item-wrapper for navigating this page from sidebar nav. For example, if we want to add feature page in nav-four-item-two-column.html the following code need to set inside #gridNav

Add a New Plugin

Place your new plugin in public/vendors folder. Eg: to add the Swiperjs plugin, we will download it from here, unzip it and place the swiper folder in public/vendors folder. You can now simply link the plugin files to your HTML and use them.

Suppose we are installing the Swiperjs plugin. Here are the steps:

Step 1:

run npm command for install plugin. for Swiperjs we can run

 npm i swiper

Step 2:

Go to vendors.json file and give the path directory from node_modules as follow

"swiper": {
	"src": ["swiper-bundle.min.js","swiper-bundle.min.js.map","swiper-bundle.min.css"
	"dest": "swiper"
}

Here, dest refers to public/vendors/, where gulp will copy files from the Swiperjs plugin. We actually use the vendors folder to store neccassary plugins. And all the plugins folder name will be as we give the dest value

Step 3:

Run the following command:

gulp vendor:move

Form Processor

The form processor is used to send emails from a contact form directly to the owner's Gmail ( or any email) without requiring a backend server. The form is completely handled on the frontend, so you don't need to set up server-side logic. To achieve this, you can useFormspree. It submits the form data to their API endpoint. It allows you to configure the recipient email, handle success and error messages, and integrate email sending seamlessly into your frontend application, Here is the step-by-step way of using this approach.

How to integrate Formspree.

Create a Formspree Account
- Go To Formspree website.
- Sign up with your email.
- Create a new form in dashboard.
- Copy the generated Form Endpoint URL
- The endpoint will look like this:
```
 https://formspree.io/f/abcdwxyz
```

Example

To enable form submission using Formspree, you need to set the data-form attribute on the form tag. In src/js/form-processor.js, Formspree is initialized using the data-form attribute.

<form data-form onsubmit="return false">
  <div class="form-group">
    <label class="form-label" for="name">Name</label>
    <input id="name" class="form-control" type="text" name="name" placeholder="Name" />
  </div>
  <div class="form-group">
    <label class="form-label" for="email">Your Email</label>
    <input id="email" class="form-control" type="email" name="from" placeholder="Email" />
  </div>
  <div class="form-group">
    <label for="message">Message</label>
    <textarea id="message" class="form-control" rows="8" name="message" placeholder="Write your message..."></textarea>
  </div>
  <div class="form-group">
    <input class="btn btn-primary d-block w-100" type="submit" value="Send!" />
  </div>
  <div class="feedback mt-3"></div>
</form>

Built-in plugins

Anchor.js

A JavaScript utility for adding deep anchor links to existing page content. AnchorJS is lightweight, accessible, and has no dependencies.
Full Documentation

BigPicture

BigPicture is a pure javascript lightbox. It can display images, iframes, inline content and videos with optional autoplay for YouTube, Vimeo and even self hosted videos.
Implementation in theme - Full Documentation

CountUp

CountUp.js is a dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way.
Implementation in theme - Full Documentation

FontAwesome 5

Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.
Full Documentation

Google Maps JavaScript API

The Google Maps JavaScript API lets you customize maps with your own content and imagery for display on web pages and mobile devices.
Implementation in theme - Full Documentation

Imagesloaded

Detect when images have been loaded.
Full Documentation

Is.js

Micro check plugin. Check types, regexps, presence, time and more...
Full Documentation

Isotope

Filter & sort magical layouts.
Implementation in theme - Full Documentation

Lodash

A modern JavaScript utility library delivering modularity, performance, & extras.
Full Documentation

Rellax

Rellax is a buttery smooth, super lightweight (1021bytes gzipped), vanilla javascript parallax library.
Full Documentation

Swiper

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.
Implementation in theme - Full Documentation

Google Map

Example

To enable the map view in your component, add data-gmap="data-gmap" attribute in your HTML element. Next, generate your custom map styles in the Google Maps Platform by visiting the Map Styles section, then create a Map ID from the Map Management panel. Once, your Map ID is ready, include it in your HTML using the data-mapid="YOUR_MAP_ID" attribute. This Map ID is required to properly render Google Maps API v3 with the AdvancedMarkerElement.

Eiffel Tower

Gustave Eiffel's iconic, wrought-iron 1889 tower,
with steps and elevators to observation decks.

Html

<div class="googlemap min-vh-50" data-gmap="data-gmap" data-latlng="48.8583701,2.2922873,17" data-scrollwheel="false" data-mapid="a2a07f618947e1cca5b1a9b0" data-icon="assets/img/map-marker.png" data-zoom="17" data-theme="Default">
  <div class="marker-content">
    <h5>Eiffel Tower</h5>
    <p class="mb-0">Gustave Eiffel's iconic, wrought-iron 1889 tower,<br /> with steps and elevators to observation decks.</p>
  </div>
</div>

Example of street view

To enable Street View Panorama mode, simply add the data-theme="streetview" attribute to your HTML element, Additionally, to fully enable Street View functionality through the Google Maps API, make sure to include the required library streetView in the script tag when loading the Google Maps API. This ensures that the Street View components and features load correctly.

<div class="googlemap min-vh-50" data-gmap="data-gmap" data-latlng="48.8588723,2.2932638" data-pov='{"heading":120,"pitch":0}' data-scrollwheel="false" data-icon="assets/img/map-marker.png" data-zoom="1" data-theme="streetview"> </div>

Changelog

Boots5 - `v1.1.0`

24 December, 2025

Update

JS: src/js/form-processor.js
JS: Google map has been updated to V3 API in src/js/googleMap.js
Smtpjs has been replaced with Formspree
JS: Removed https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Array.prototype.includes,CustomEvent,Object.entries,Object.values,URL

Fix

Other minor issue.

Boots5 - `v1.0.1`

03 January, 2022

Fix

Fix Sticky area footer responsive issue
Fix About Us page responsive issue

Boots5 - `v1.0.0`

28 October, 2021

Start your next project with us

Join the talented group of artists and imaginators

Join Boots5

Made with by ThemeWagon

Doc

contact portfolio

Our Latest Works

Start your next project with us

Join the talented group of artists and imaginators

Join Boots5

Made with by ThemeWagon

Portfolio

doc faq

Frequently Asked Questions

Bootst5 is a first Bootstrap 4 premium template. It is published in 1896 by talented Boots4 Team. It is also called most popular Bootsrap template in the world. The unique layout and clean design are the main reason of its populairity. At first Boots4 was published and get the top popularity among the web designer all over the world. After this version 2 is published and keep its popularity. Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque eligendi, nostrum sint, quis inventore molestiae porro sit aut unde accusantium neque earum dolor exercitationem architecto repellendus nobis aspernatur sapiente dolores? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur ratione laudantium accusamus, quibusdam odio ipsam blanditiis doloribus eius in delectus, corrupti mollitia vel nam!!

There are many reason to use Boots4 Template. Unique layout design, smooth animation and clean ui design are the most important features of Boots4 Bootsrap Template.

You can get Boots5 template from ThemeWagon. Where you also get quality free and premium templates
A template site may be the most convenient way to buy a template. Buying a template from a private owner allows you to assess the pedigree and upbringing of your template before choosing to take it home. Lastly, finding your template from a shelter, helps give a good home to a template which may not find one so readily.

There are many features in Boots5 Template. Unique layout design, smooth animation and clean ui design are the most important features of Boots4 Bootsrap Template.

There are many features in Boots4 Template. Unique layout design, smooth animation and clean ui design are the most important features of Boots4 Bootsrap Template.

There are many features in Boots5 Template. Unique layout design, smooth animation and clean ui design are the most important features of Boots5 Bootsrap Template.

Start your next project with us

Join the talented group of artists and imaginators

Join Boots5

Made with by ThemeWagon

FAQ

portfolio gallery

Photos we took

Why do you use?

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.

What Does It Mean?

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain

How to Generate?

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.

Product Photography

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.

Software Controlled

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.

Product Photography

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.

Features

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.

Search

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.

Grepper Teams

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.

Why do you se?

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain .

What Does It Mean?

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.

How to Generate?

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.

Finibus Bonorum

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.

Finibus Bonorum

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.

Finibus Bonorum

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.

Finibus Bonorum

But I must explain to you how all this mistaken idea of reprobating pleasure and extolling pain arose. To do so, I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.

Finibus Bonorum

I must explain to you how all this mistaken idea of reprobating pleasure and extolling pain arose. To do so, I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.