• Quick Start
• Setting Up Build System
• File Structure
• Gulp
• Add a New Page
• Add a New Plugin
• PHP-AJAX Form
• Built In Plugins
• Google Map
• Changelog

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

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:

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

js/bootstrap
scss/bootstrap
pages/assets/css
pages/assets/js
pages/assets/lib

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

Other available gulp tasks

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 BEL TREND GROUP&; 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,
		},
	},
	...
},

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

Example

<span data-countup="7499">0</span>

Isotope #

Filter & sort magical layouts.

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.

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>

Owl carousel 2 #

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

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.

Remodal #

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

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.

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.

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.

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.

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

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>

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 #

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>

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

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