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
Smtpjs
Built In Plugins
Google Map
Changelog

Quick Start

Looking to start your project quickly? Just unzip the boots5-v1.0.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.0.0-.zip to any folder and open a command line or terminal at that location. Boots5-v1.0.0's dev tools requireNode andGit . 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.0.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.0.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.0.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.0.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 typed.js plugin, we will download it from here, unzip it and place the typed folder in public/vendors folder. You can now simply link the plugin files to your HTML and use them.

Suppose we are installing the typed.js plugin. Here are the steps:

Step 1:

run npm command for install plugin. for typed.js we can run

 npm i typed.js

Step 2:

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

"typed.js": {
	"src": ["lib/typed.js"],
	"dest": "typed.js"
}

Here, dest refers to public/vendors/, where gulp will copy files from the typed.js 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

Smtpjs

Using Smtpjs you will be able to directly send email using client-side javascript without any server-level configurations.

Full Documentation

You can also specify where to send the data via an hidden input:

How to configure and use Gmail SMTP to send emails from Javascript?

In case you are planning to use Gmail's SMTP to send mails, then make sure you have properly configured the below settings:

Allowed access in Gmail for less secure apps:

To use Gmail SMTP you'll need to allow access for less secure apps from google account settings. Turning the below settings off will allow your Javascript to connect to Gmail.

Disabled 2-step factor authentication

As you're going to connect to Gmail remotely using a program, so 2-step factor authentication should be disabled. Click here to learn more on how to disable 2FA

Once, the above settings are done, your Google SMTP server configurations would look something like this

MTP Server/Hostname: smtp.gmail.com
MTP Username: [Your Gmail Address]
SMTP password: [Your Gmail Password]
SMTP Port: 587
TLS/SSL: Required

If you are using gulp based workflow, Open form-processor.js and update your smtp credential

 window.Email.send({
  Host: "smtp.mailtrap.io",
  Username: "Your User Name ",
  Password: "Your Password",
  To: formData.email,
  From: "you@isp.com",
  Subject: "This is the subject",
  Body: `And this is the body`
  })

If you are not using gulp based workflow, Open src\js\form-processor.js find formInit method then update your smtp credential

See the sample code under the form bellow for better understanding.

<form data-form="data-form" onsubmit="return false"><label class="form-label text-700 mt-4 mb-3" for="inputName1"><i class="fas fa-user me-2"></i>NAME</label><input class="form-control form-boots-control mt-0" id="inputName1" type="text" name="name" /><label class="form-label text-700 mt-4 mb-3" for="inputEmail"> <i class="fas fa-envelope me-2"></i>YOUR EMAIL</label><input class="form-control form-boots-control mt-0" id="inputEmail" type="email" name="email" /><label class="form-label text-700 mt-4 mb-3" for="validationTextarea"> <i class="fas fa-pen me-2"></i>MESSAGE</label><textarea class="form-control is-invalid border-400 form-boots-control mt-0" id="validationTextarea1" placeholder="Message" rows="6" cols="50" required="required" name="message"> </textarea><button class="btn btn-boots-warning w-100 mt-5" type="submit">Send</button>
  <div class="feedback"> </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

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

Changelog

Boots5 - 1.0.0

28 October, 2021

Google Map

Example

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-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>

JavaScript

<script src="https:maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async="async"></script>

Get your API key⟶

Map color schemes

Change the value of data-theme='' to any of the followings

Default
Gray
Midnight
Hopper
Beard
AssassianCreed
SubtleGray
Tripitty

Example

With AssassianCreed scheme

Eiffel Tower

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

<div class="googlemap min-vh-50 mt-3" data-gmap="data-gmap" data-latlng="48.8583701,2.2922873,17" data-scrollwheel="false" data-icon="assets/img/map-marker.png" data-zoom="17" data-theme="AssassianCreed">
  <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

<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>

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.