We believe in simplicity and excellence

welcome to boots'4

The Story of Boots4


To Infinity and Beyond!

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

Boots4 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

Make Your Story With Us

Join the talented group of artists & imagineers.

Join Boots4

Copyright © 2018 Boots4™ inc.

Made withby Themewagon

About Us

What We Do best


Application

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

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.

Choose Your plan


Basic

$0 / month

  • 15 Projects
  • 30 GB Storage
  • Unlimited Data Transfer
  • 50 GB Bandwith
  • Enhanced Security
Purchase Now

Business

$59 / month

  • 50 Projects
  • 30 GB Storage
  • Unlimited Data Transfer
  • 50 GB Bandwith
  • Enhanced Security
Free Trial

Advanced

$99 / month

  • Unlimited
  • 30 GB Storage
  • Unlimited Data Transfer
  • 50 GB Bandwith
  • Enhanced Security
Purchase Now

Our Valuable Clients


Start your next project with us

Email us at info@boots4.com or call +44 867897354

Copyright © 2018 Boots4™ inc.

Made withby Themewagon

Our Service

Start a project with us

Our telented team always ready to help you

Get Started

Copyright © 2018 Boots4™ inc.

Made withby Themewagon

Portfolio

Frequently Asked Questions


What is Boots4?

Bootst4 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! Aperiam doloremque dolore dicta quod ipsam!

Why should I use Boots4?

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.

How to get Boots4?

You can get Boots4 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.

What are the features of Boots4?

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.

Write ten sentences about Boots4.

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.

What are the differences between Boots4 v2 and v3?

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.

Copyright © 2018 Boots4™ inc.

Made withby Themewagon

Faq

Get In Touch


Connect with us

We help global leaders with their organization's most critical issues and opportunities.


Boots4 Org

35 King Street
Bristol, BS1 4DZ


Drop us a line

Our team are eagerly waiting to help you growing your business. Please feel free to contact with us.

Eiffel Tower

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

Copyright © 2018 Boots4™ inc.

Made withby Themewagon

Contact Us

Simple Page


It is a sample page of Boots4 where you can place any text, image, components or any other content.

Documentation

Copyright © 2018 Boots4™ inc.

Made withby Themewagon

Starter

Getteing Started


Quick Start #

Looking to start your project quickly? Just unzip the boots4-v3.1.1.zip. We have precompiled and packaged everything in the pages 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 up Build system #

Unzip the boots4-v3.1.1.zip to any folder and open a command line or terminal at that location. Boots4'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 Boots4'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 pages/assets/ directory and will open a browser window to pages/index.html

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

pages/*.html
pages/assets/fonts/
pages/assets/img/
scss/ 
js/

Now you can edit any html file from pages, change SCSS variable with _user-variables.scss, or write your own SCSS code in scss/_user.scss

Running the gulp command will discard and regenerate all the files in following directories:
js/bootstrap/
scss/bootstrap/
pages/assets/css/
pages/assets/js/
pages/assets/lib/

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

File Structure #

Within your Boots4 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.

boots4-v3.1.1/
  ├── js/
  |   ├── bootstrap/
  |   ├── boots4/
  |   └── plugins/
  ├── pages/
  |   ├── assets/
  |   ├── index.html
  |   ├── nav-eight-item-four-column.html
  |   ├── nav-four-item-one-column.html
  |   ├── nav-four-item-two-column.html
  |   ├── nav-six-item-two-column.html
  |   ├── nav-six-item-three-column.html
  |   ├── nav-sixteen-item-four-column.html
  ├── scss/
  |   ├── boots4/
  |   ├── bootstrap/
  |   ├── _user.scss
  |   ├── _user-variables.scss
  |   └── theme.scss
  ├── .eslintrc.json
  ├── .gitignore
  ├── gulpfile.js
  └── package.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:
js/bootstrap
scss/bootstrap
pages/assets/css
pages/assets/js
pages/assets/lib
scss Compiles scss/theme.scss and generates theme.css and theme.map to the pages/assets/css/ directory.
js:bootstrap Concat the js files from js/bootstrap/ and transpiles with babel to bootstrap.js, bootstrap.min.js to the pages/assets/js/ directory.
js:boots4 Concat the js files from js/boots4/ and transpiles with babel to theme.js, theme.min.js to the pages/assets/js/ directory.
js:plugins Concat the js files according to the Paths.JS.PLUGINS array declared in gulpfile.js and transpiles with babel to plugins.js and plugins.min.js to the pages/assets/js/ directory.
js Run the following tasks parallelly:
  • js:bootstrap
  • js:boots4
  • js:plugins
copy:dependency Copies the dependencies from node_modules/ directory to pages/assets/ directory according to the Paths.DEPENDENCIES object declared in gulpfile.js.
watch All of the following folders are monitored for changes, which will tell the browser to reload automatically after any changes are made:
pages/*.html
pages/assets/fonts/
pages/assets/img/
scss/ 
js/
serve Starts a Browsersync instance on port 3000 served from pages, defaults to index.html.
Other available gulp tasks
Task Action
scss:min Compiles scss/theme.scss and generates theme.min.css, and theme.min.map to the pages/assets/css/ directory.
scss:rtl Compiles scss/theme.scss and generates theme-rtl.css, and theme-rtl.map to the pages/assets/css/ directory.
scss:rtl:min Compiles scss/theme.scss and generates theme-rtl.min.css, and theme-rtl.min.map to the pages/assets/css/ directory.

Adding a New Page #

To add/replace a new page in Boots4 v3.1.1 you should set a unique id to .page element and also assign it to data-content 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

<div class="position-relative w-lg-50 position-lg-fixed four-item-two-column" id="gridNav">
  <div class="row minh-lg-100">

    <!-- Other nav item-->

    <!-- Other nav item-->

    <!-- Other nav item-->

    <!-- Feature nav item-->
    <div class="col-6 minh-25vh h-lg-50vh sidebar-item-wrapper py-5" data-content="feature">
      <div class="bg-holder" style="background-image:url(assets/img/navigation/feature.jpg);"></div>

      <!-- Nav item content-->
      <div class="sidebar-item">
        <img class="mb-2 mb-lg-3 nav-icon" src="assets/img/lineicons/your-icon.svg" alt="" />
        <h2 class="font-weight-light text-white fs-1 fs-xl-3">Feature</h2>
      </div>
    </div>
  </div>
</div>

Now four-item-two-column.html page structure will look like this

<main>

  <!-- Other page-->

  <!-- Other page-->

  <!-- Other page-->

  <!-- Feature page content-->
  <div class="page position-absolute w-100" id="feature" style="display: none;">
    <div class="row no-gutters minh-100vh">
      <div class="col-lg-9 order-1 order-lg-0 page-content">

        <!-- Feature page content will go here-->

        <!-- Feature page footer will go here -->
        <footer class="page-footer">
          <div class="bg-holder" style="background-image:url(assets/img/sidebars/your-feature-image.jpg);background-position: center; transform: scale(1.1);"></div> <!--/.bg-holder-->
          <div class="row justify-content-center">
            <div class="col-lg-10">
              <div class="row align-items-center">
                <div class="col-lg-6 text-lg-left">
                  <p class="fs--1 text-uppercase ls font-weight-bold mb-0">Copyright &copy; 2018 Boots4&trade; inc.</p>
                </div>
                <div class="col-lg-6 text-lg-right mt-2 mt-lg-0">
                  <p class="fs--1 text-uppercase ls font-weight-bold mb-0">Made with<span class="fas fa-heart mx-1"></span>by
                    <a class="text-light" href="https://themewagon.com/">Themewagon</a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>
  </div>
</main>

Adding a New Plugin #

Adding a new plugin to your Boots4 is simple. You Here are two ways you can do that.

Simple approach

Place your new plugin in pages/assets/lib folder. Eg: to add the lightbox.js plugin, we will download it from here, unzip it and place the lightbox2 folder in pages/assets/lib folder.

Using NPM

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

Step 1:

npm install lightbox2 -S

Step 2:

In your gulpfile.js, add the plugin at the end of the Paths.DEPENDENCIES variable. eg:

Paths = {
	... 
	DEPENDENCIES: {
		...
		'lightbox': {
			FROM: 'node_modules/lightbox2/js/lightbox.js',
			TO: JS,
		},
	},
	...
},
or
Paths = {
	... 
	DEPENDENCIES: {
		...
		'lightbox': {
			FROM: 'node_modules/lightbox2/dist/*.*',
			TO: lib,
		},
	},
	...
},

Here, JS refers to pages/assets/js and lib refers to pages/assets/lib, where gulp will copy files from the lightbox.js plugin. We use the JS folder when we need only the js files from the plugin. Otherwise, we use the lib folder for plugins like owl.carousel

Step 3:

Run the following command:

gulp copy:dependency

Built-in plugins #

Count Up #

A simple and html agnostic countup plugin for jQuery

Implimentation in Boots4
Example
<span data-countup="7499">0</span>

Isotope #

Filter & sort magical layouts.

Masonry - Filter - Implimentation in Boots4

Lightbox 2 #

Lightbox is a JavaScript library that displays images and videos by filling the screen, and dimming out the rest of the web page.

Implimentation in Boots4 - Full Documentation
Example
<a href="assets/img/projects/your-preview-image.jpg" data-lightbox="image" data-title="my caption">
  <img src="assets/img/projects/your-image.jpg" alt="" />
</a>

Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

Implementation in Boots4 - Full Documentation
Example
<div class="owl-carousel owl-theme owl-dots-inner owl-theme-white" data-options='{"items":1,"autoplay":true,"loop":true,"animateOut":"fadeOut"}'>
  <img class="rounded fit-cover" src="assets/img/your-first-iamge.jpg" alt="" />
  <img class="rounded fit-cover" src="assets/img/your-second-iamge.jpg" alt="" />
</div>

Rellax #

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

Full Documentation

Remodal #

Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.

Implimentation in Boots4 - Full Documentation
Example
<a class="btn btn-primary" href="#" data-remodal-target="modal">Show Modal</a>

Semantic UI (Accordion) #

An accordion allows users to toggle the display of sections of content.

Implimentation in Boots4 - Full Documentation
Example
<div class="ui styled fluid accordion mt-4 border-0" data-options='{"exclusive":false}'>
  <h5 class="title active"><span class="fas fa-plus mr-1 text-800" data-fa-transform="shrink-6 down-1.5"></span> What is Boots4?</h5>
  <div class="content pl-5 active">
    <p>Bootst4 is a first Bootstrap 4 premium template. It is published in 1896 by talented Boots4 Team.</p>
  </div>
  <h5 class="title"><span class="fas fa-plus mr-1 text-800" data-fa-transform="shrink-6 down-1.5"></span>
    <div class="d-inline-block mb-0">Why should I use Boots4?</div>
  </h5>
  <div class="content pl-5">
    <p>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.</p>
  </div>
</div>

jQuery.mb.YTPlayer #

An HTML5 Background player for YouTube video.

Implimentation in Boots4 - Full Documentation
Example
<section class="text-center py-7">
  <div class="bg-holder overlay overlay-2" style="background-image:url(assets/img/headers/header-event.jpg);">
    <div class="youtube-background" data-property="{&quot;videoURL&quot;:&quot;https://www.youtube.com/watch?v=hLpy-DRuiz0&quot;,&quot;startAt&quot;:10,&quot;stopAt&quot;:584,&quot;mute&quot;:true,&quot;showYTLogo&quot;:false}"></div>
  </div>
  <div class="text-center">
    <h5 class="text-white">Video Background</h5>
  </div>
</section>

Loaders.css #

Delightful and performance-focused pure css loading animations.

Full Documentation

Sticky Kit #

Sticky-kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible.

Use class="sticky-kit" on any dom element to make it sticky relative to it's parent.

Full Documentation

PHP-AJAX Form #

Boots4 has a built-in universal php-ajax form that can grab dynamic amounts of inputs and send it to any given email address. To make the form work, simply add the class .zform like <form class="zform">.

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

<input type="hidden" name="to" value="username@domain.extension" />
                        Other reserved name fields are: subject, email, name
                        

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

HTML
<form class="zform" method="post">
  <div class="form-group">
    <input class="form-control" type="hidden" name="to" value="username@domain.extension" />
  </div>
  <div class="form-group row">
    <label class="col-2 col-form-label text-right">Name :</label>
    <div class="col-10">
      <input class="form-control" type="text" name="name" required="" />
    </div>
  </div>
  <div class="form-group row">
    <label class="col-2 col-form-label text-right">Subject :</label>
    <div class="col-10">
      <input class="form-control" type="text" name="subject" required="" />
    </div>
  </div>
  <div class="form-group row">
    <label class="col-2 col-form-label text-right">Email :</label>
    <div class="col-10">
      <input class="form-control" type="email" name="from" required="" />
    </div>
  </div>
  <div class="form-group row">
    <label class="col-2 col-form-label text-right">Field One :</label>
    <div class="col-10">
      <input class="form-control" type="text" name="field-1" placeholder="Optional" />
    </div>
  </div>
  <div class="form-group row">
    <label class="col-2 col-form-label text-right">Field Two :</label>
    <div class="col-10">
      <input class="form-control" type="text" name="field-2" placeholder="Optional" />
    </div>
  </div>
  <div class="form-group row">
    <label class="col-2 col-form-label text-right">Message :</label>
    <div class="col-10">
      <textarea class="form-control" rows="8" name="message" placeholder="Write your message here..."></textarea>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-10 offset-2">
      <input class="btn btn-primary" type="submit" name="submit" value="Send!" />
    </div>
  </div>
  <div class="zform-feedback"></div>
</form>
Integrating reCaptcha

Get your secret and site key here ⟶

HTML
<form class="zform" method="post">
  <div class="form-group">
    <input class="form-control" type="hidden" name="to" value="username@domain.extension" />
  </div>
  <div class="form-group row">
    <label class="col-2 col-form-label text-right">Name :</label>
    <div class="col-10">
      <input class="form-control" type="text" name="name" required="" />
    </div>
  </div>
  <div class="form-group row">
    <label class="col-2 col-form-label text-right">Email :</label>
    <div class="col-10">
      <input class="form-control" type="email" name="from" required="" />
    </div>
  </div>
  <div class="form-group row">
    <label class="col-2 col-form-label text-right">Message :</label>
    <div class="col-10">
      <textarea class="form-control" rows="8" name="message" placeholder="Write your message here..."></textarea>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-10 offset-2">
      <div class="g-recaptcha mb-3" data-sitekey="6Lcd9-0UAAAAAJtwpsZYIsZmqQn6x1itje328Q2g"></div>
      <input class="btn btn-primary" type="submit" name="submit" value="Send!" />
    </div>
  </div>
  <div class="zform-feedback"></div>
</form>
HTML
<form class="zform" method="post">... ...
  <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
  <input type="submit" value="Submit" />
</form>
JavaScript
<script src="https://www.google.com/recaptcha/api.js"></script>
PHP

Open assets/php/form-processor.php and change the secret key with yours at line: 13

$reCaptchaSecret = "YOUR_SECRET_KEY";

Google Map #

Eiffel Tower

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

HTML
<div class="googlemap minh-50vh" 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 py-3">
    <h5>Eiffel Tower</h5>
    <p>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></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.

HTML
<div class="googlemap minh-50vh" 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 py-3">
    <h5>Eiffel Tower</h5>
    <p>Gustave Eiffel's iconic, wrought-iron 1889 tower,
      <br/> with steps and elevators to observation decks.</p>
  </div>
</div>
Example of street view
HTML
<div class="googlemap minh-100vh" 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 #

Boots4 - 3.1.0

11 September, 2019

Add
  • Add .gitignore file
  • Add README.md file
  • Add jTap plugin to assets/lib folder
Update
  • Update theme.js
  • Remove jTap plugin from packages.json
  • Remove jTap plugin path from gulpfile.js

Copyright © 2018 Boots4™ inc.

Made withby Themewagon

Docs