What's this

Introduction

Read this section to know about TheShots and its features

TheShots is a powerful, responsive, and high-performance image listing template. It's based on Bootstrap and contains a lot of components to easily make an image listing website.

Features

Check out some of features that we have in this template. To know more about features of TheShots, continue reading our documentation and check our available components.

Responsive

Your website works on any device: desktop, tablet or mobile.
Customizable

You can easily read, edit, and write your own code, or change everything.
UI Elements

There is a bunch of useful and necessary elements for developing your website.
Clean code

You can find our code well organized, commented and readable.
Documented

As you can see in this online documentation, we provided a comprehensive documentation.
Free updates

When you purchase this template, you'll freely receive future updates.

Unboxing

What's included

Checkout the files that you'll see upon downloading

Once you download the template, you can see a folder with several files and sub folders. You can read description of some important files in continue.

assets
- css
  - app.min.cssMinified version of all required CSS files
  - custom.cssWrite your custom styles in this file
- fonts
- imgHere is a place to put your media files like logo, images, videos, etc.
- js
  - app.min.jsMinified version of all required Javascript files
  - custom.jsWrite your custom scripts in this file and also edit existence code to fits your need
- vendors
index.html
index-style2.html
...

Better understanding

HTML Structure

Check the structure of HTML files


<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Some meta tags -->

    <title>TheGuide - Starter page</title>

    <!-- Styles -->
    <link href="assets/css/app.min.css" rel="stylesheet">
    <link href="assets/css/custom.css" rel="stylesheet">

    <!-- Fonts and Favicon -->
  </head>

  <body>

    <!-- Navigation bar -->
    <nav class="navbar">
      ...
    </nav>
    <!-- END Navigation bar -->


    <!-- Main container -->
    <main>
      ...
    </main>
    <!-- END Main container -->


    <!-- Site footer -->
    <footer class="site-footer">
      ...
    </footer>
    <!-- END Site footer -->

    <!-- Back to top button -->
    <a id="scroll-up" href="#"><i class="ti-angle-up"></i></a>
    <!-- END Back to top button -->

    <!-- Scripts -->
    <script src="assets/js/app.min.js"></script>
    <script src="assets/js/custom.js"></script>

  </body>
</html>

Writing power

Typography

Use the following tags and classes to write a better description.

Headings

All HTML headings, <h1> through <h6>, are available.


<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Create lighter, secondary text in any heading with a generic <small> tag or the .small class.


<h1>Heading 1 <small>Small text</small></h1>
<h2>Heading 2 <small>Small text</small></h2>
<h3>Heading 3 <small>Small text</small></h3>
<h4>Heading 4 <small>Small text</small></h4>
<h5>Heading 5 <small>Small text</small></h5>
<h6>Heading 6 <small>Small text</small></h6>

Heading 1 Small text

Heading 2 Small text

Heading 3 Small text

Heading 4 Small text

Heading 5 Small text

Heading 6 Small text

Text colors

Use follwoing contextual classes to change color of your text.


<p>This is a normal paragraph without any contectual classes.</p>
<p class="txt-purple">A paragraph with .txt-purple class.</p>
<p class="txt-green">A paragraph with .txt-green class.</p>
<p class="txt-blue">A paragraph with .txt-blue class.</p>
<p class="txt-red">A paragraph with .txt-red class.</p>
<p class="txt-orange">A paragraph with .txt-orange class.</p>
<p class="txt-dark">A paragraph with .txt-dark class.</p>
<p class="txt-gray">A paragraph with .txt-gray class.</p>
<p class="txt-white bg-dark">A paragraph with .txt-white and .bg-dark class.</p>

This is a normal paragraph without any contectual classes.

A paragraph with .txt-purple class.

A paragraph with .txt-green class.

A paragraph with .txt-blue class.

A paragraph with .txt-red class.

A paragraph with .txt-orange class.

A paragraph with .txt-dark class.

A paragraph with .txt-gray class.

A paragraph with .txt-white and .bg-dark class.

Background colors

Use follwoing contextual classes to change background color of your text.


<p>This is a normal paragraph without any contectual classes.</p>
<p class="bg-purple">A paragraph with .bg-purple class.</p>
<p class="bg-green">A paragraph with .bg-green class.</p>
<p class="bg-blue">A paragraph with .bg-blue class.</p>
<p class="bg-orange">A paragraph with .bg-orange class.</p>
<p class="bg-red">A paragraph with .bg-red class.</p>
<p class="bg-dark">A paragraph with .bg-dark class.</p>
<p class="bg-dark-light">A paragraph with .bg-dark-light class.</p>
<p class="bg-dark-lighter">A paragraph with .bg-dark-lighter class.</p>
<p class="bg-dark-lightest">A paragraph with .bg-dark-lightest class.</p>
<p class="bg-gray">A paragraph with .bg-gray class.</p>
<p class="bg-gray-light">A paragraph with .bg-gray-light class.</p>
<p class="bg-gray-lighter">A paragraph with .bg-gray-lighter class.</p>
<p class="bg-gray-lightest">A paragraph with .bg-gray-lightest class.</p>
<p class="bg-white">A paragraph with .bg-white class.</p>

This is a normal paragraph without any contectual classes.

A paragraph with .bg-purple class.

A paragraph with .bg-green class.

A paragraph with .bg-blue class.

A paragraph with .bg-orange class.

A paragraph with .bg-red class.

A paragraph with .bg-dark class.

A paragraph with .bg-dark-light class.

A paragraph with .bg-dark-lighter class.

A paragraph with .bg-dark-lightest class.

A paragraph with .bg-gray class.

A paragraph with .bg-gray-light class.

A paragraph with .bg-gray-lighter class.

A paragraph with .bg-gray-lightest class.

A paragraph with .bg-white class.

Mark

Use <mark> tag or .highlight class to highlight a text.


<p>A sample of <mark>marked</mark> text.</p>
<p>A sample of <span class="highlight">highlighted</span> text.</p>

A sample of marked text.

A sample of highlighted text.

Small & lead

Use <small> tag or .small class to make a paragraph smaller, or make a paragraph stand out by adding .lead class.


<p class="lead">A sample lead paragraph.</p>
<p>A normal paragraph.</p>
<p class="small">A sample small paragraph.</p>

A sample lead paragraph.

A normal paragraph.

A sample small paragraph.

Blockquotes

Wrap <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.


<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Naming a source

Add a <footer> for identifying the source. Wrap the name of the source work in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title


<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Site navigation

Navbar

Main site navigation which is located at top of the page

Basic style

Following code snippet demonstrates a general .page-navigation. As you can see, it's easy to understand the code.


<!-- Navigation bar -->
<nav class="navbar">
  <div class="container">

    <!-- Logo and Search -->
    <div class="pull-left">
      <a class="navbar-toggle" href="#" data-toggle="offcanvas"><i class="ti-menu"></i></a>

      <div class="logo">
        <a class="logo-default" href="index.html"><img src="assets/img/logo.png" alt="logo"></a>
      </div>

      <span class="divider hidden-xs"></span>

      <form class="search-form" action="page-search.html">
        <input id="search-input" type="text" autocomplete="off" placeholder="Search...">
        <button class="btn btn-sm btn-primary" type="submit"><i class="ti-search"></i></button>
        <span class="ti-close search-closer"></span>
      </form>
    </div>
    <!-- END Logo and Search -->

    <!-- Navigation links and user account -->
    <div class="pull-right">
      <ul class="nav-menu">
        <li>
          <a class="active" href="index.html">Home</a>
          <ul>
            <li><a class="active" href="index.html">Style 1</a></li>
            <li><a href="index-style2.html">Style 2</a></li>
            <li><a href="index-style3-cols4.html">Style 3 - Cols 4</a></li>
            <li><a href="index-style3-cols3.html">Style 3 - Cols 3</a></li>
            <li><a href="index-style3-cols2.html">Style 3 - Cols 2</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Pages</a>
          <ul>
            <li><a href="shot-add.html">Add Shot</a></li>
            <li><a href="shot.html">Shot - Image</a></li>
            <li><a href="shot-gallery.html">Shot - Gallery</a></li>
            <li><a href="page-about.html">About</a></li>
            <li><a href="page-contact.html">Contact</a></li>
            <li><a href="page-faq.html">FAQ</a></li>
            <li><a href="page-search.html">Search</a></li>
            <li><a href="page-typography.html">Typography</a></li>
          </ul>
        </li>
        <li>
          <a href="#">User account</a>
          <ul>
            <li><a href="user-profile.html">Profile</a></li>
            <li><a href="user-followers.html">Followers</a></li>
            <li><a href="setting-profile.html">Settings</a></li>
            <li><a href="user-login.html">Login</a></li>
            <li><a href="user-register.html">Register</a></li>
            <li><a href="user-forget-pass.html">Forget pass</a></li>
          </ul>
        </li>
        <li>
          <a href="#">More</a>
          <ul>
            <li><a href="#">Buy now</a></li>
            <li><a href="http://shamsoft.net/theshots/docs">Documentation</a></li>
            <li><a href="#">Support</a></li>
          </ul>
      </li>
      </ul>

      <span class="divider hidden-xs"></span>

      <a class="btn-navbar btn-primary visible-xs-inline-block search-opener" href="#"><i class="ti-search"></i></a>
      <a class="btn-navbar btn-navbar-rotatory btn-success" href="shot-add.html"><i class="ti-plus"></i></a>

      <div class="dropdown user-account">
        <a class="dropdown-toggle" href="#" data-toggle="dropdown">
          <img src="assets/img/avatar-2.jpg" alt="avatar">
        </a>

        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="user-profile.html">Profile</a></li>
          <li><a href="setting-profile.html">Settings</a></li>
          <li><a href="#">Logout</a></li>
        </ul>
      </div>

    </div>
    <!-- END Navigation links and user account -->

  </div>
</nav>
<!-- END Navigation bar -->

Full width & boxed size

The .navbar > div tag is responsible for sizing. It would be boxed-size if it has .container class, and will become full size by having .container-fluid.

Sticky navbar

The body tag is responsible for changing this property. To have a sticky navigation bar in top of the page, add .sticky-nav to the body tag.

Perform action

Buttons

Use any of the available button classes to quickly create a styled button

Types

Use the button classes on an <a>, <button>, or <input> element. You need to start by adding .btn class.

Regular

Use one of the available color modifiers on your .btn.


<a class="btn btn-primary" href="#">sample button</a>
<a class="btn btn-success" href="#">sample button</a>
<a class="btn btn-info" href="#">sample button</a>
<a class="btn btn-warning" href="#">sample button</a>
<a class="btn btn-danger" href="#">sample button</a>
<a class="btn btn-black" href="#">sample button</a>
<a class="btn btn-white" href="#">sample button</a>

sample button sample button sample button sample button sample button sample button sample button

Outline

Simply add .btn-outline to the button markup.


<a class="btn btn-outline btn-primary" href="#">sample button</a>
<a class="btn btn-outline btn-success" href="#">sample button</a>
<a class="btn btn-outline btn-info" href="#">sample button</a>
<a class="btn btn-outline btn-warning" href="#">sample button</a>
<a class="btn btn-outline btn-danger" href="#">sample button</a>
<a class="btn btn-outline btn-black" href="#">sample button</a>
<a class="btn btn-outline btn-white" href="#">sample button</a>

sample button sample button sample button sample button sample button sample button sample button

Round

Add .btn-round to the button markup.


<a class="btn btn-round btn-primary" href="#">sample button</a>
<a class="btn btn-round btn-success" href="#">sample button</a>
<a class="btn btn-round btn-info" href="#">sample button</a>
<a class="btn btn-round btn-warning" href="#">sample button</a>
<a class="btn btn-round btn-danger" href="#">sample button</a>
<a class="btn btn-round btn-black" href="#">sample button</a>
<a class="btn btn-round btn-white" href="#">sample button</a>

sample button sample button sample button sample button sample button sample button sample button

Float

Add .btn-float to the button markup.


<a class="btn btn-float btn-primary" href="#"><i class="fa fa-pencil"></i></a>
<a class="btn btn-float btn-success" href="#"><i class="fa fa-pencil"></i></a>
<a class="btn btn-float btn-info" href="#"><i class="fa fa-pencil"></i></a>
<a class="btn btn-float btn-warning" href="#"><i class="fa fa-pencil"></i></a>
<a class="btn btn-float btn-danger" href="#"><i class="fa fa-pencil"></i></a>
<a class="btn btn-float btn-black" href="#"><i class="fa fa-pencil"></i></a>
<a class="btn btn-float btn-white" href="#"><i class="fa fa-pencil"></i></a>

Size

Add .btn-xs, .btn-sm, .btn-lg, or .btn-xl for additional sizes.


<a class="btn btn-primary btn-xs" href="#">sample button</a>
<a class="btn btn-primary btn-sm" href="#">sample button</a>
<a class="btn btn-primary" href="#">sample button</a>
<a class="btn btn-primary btn-lg" href="#">sample button</a>
<a class="btn btn-primary btn-xl" href="#">sample button</a>

<br><br>

<a class="btn btn-primary btn-outline btn-xs" href="#">sample button</a>
<a class="btn btn-primary btn-outline btn-sm" href="#">sample button</a>
<a class="btn btn-primary btn-outline" href="#">sample button</a>
<a class="btn btn-primary btn-outline btn-lg" href="#">sample button</a>
<a class="btn btn-primary btn-outline btn-xl" href="#">sample button</a>

<br><br>

<a class="btn btn-primary btn-round btn-xs" href="#">sample button</a>
<a class="btn btn-primary btn-round btn-sm" href="#">sample button</a>
<a class="btn btn-primary btn-round" href="#">sample button</a>
<a class="btn btn-primary btn-round btn-lg" href="#">sample button</a>
<a class="btn btn-primary btn-round btn-xl" href="#">sample button</a>

<br><br>

<a class="btn btn-primary btn-float btn-xs" href="#"><i class="fa fa-pencil"></i></a>
<a class="btn btn-primary btn-float btn-sm" href="#"><i class="fa fa-pencil"></i></a>
<a class="btn btn-primary btn-float" href="#"><i class="fa fa-pencil"></i></a>
<a class="btn btn-primary btn-float btn-lg" href="#"><i class="fa fa-pencil"></i></a>
<a class="btn btn-primary btn-float btn-xl" href="#"><i class="fa fa-pencil"></i></a>

Blocklevel

Create block level buttons—those that span the full width of a parent— by adding .btn-block.


<div class="row">
  <div class="col-md-4">
    <button type="button" class="btn btn-block btn-primary">sample button</button>
  </div>

  <div class="col-md-4">
    <button type="button" class="btn btn-block btn-success">sample button</button>
  </div>

  <div class="col-md-4">
    <button type="button" class="btn btn-block btn-black">sample button</button>
  </div>
</div>

Contextual message

Alerts

Give a contextual message to your visitor for an action

Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Warning! Better check yourself, you're not looking too good.

Oh snap! Change a few things up and try submitting again.


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

Dismissible alerts

Build on any alert by adding an optional .alert-dismissible and close button.

Warning! Better check yourself, you're not looking too good.


<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Font icons

Icons

Symbolizes a command, action, or information using UI icons

TheGuide has included FontAwesome and Themify Icons in its package and will update it regularly by new releases. So you're safe to use any icon from FontAwesome or Themify Icons websites.

Project-wide use

Helper Classes

Some other helper classes in addition to Bootstrap's helper classes

Class name	Description
`.no-padding`	Equals to `padding: 0;`
`.no-padding-x`	Equals to `padding-left: 0; padding-right: 0;`
`.no-padding-y`	Equals to `padding-top: 0; padding-bottom: 0;`
`.no-padding-top`	Equals to `padding-top: 0;`
`.no-padding-bottom`	Equals to `padding-bottom: 0;`
`.no-margin`	Equals to `margin: 0;`
`.no-margin-x`	Equals to `margin-left: 0; margin-right: 0;`
`.no-margin-y`	Equals to `margin-top: 0; margin-bottom: 0;`
`.no-margin-top`	Equals to `margin-top: 0;`
`.no-margin-bottom`	Equals to `margin-bottom: 0;`

Features

Responsive

Customizable

UI Elements

Clean code

Documented

Free updates

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading 1 Small text

Heading 2 Small text

Heading 3 Small text

Heading 4 Small text

Heading 5 Small text

Heading 6 Small text

Text colors

Background colors

Mark

Small & lead

Blockquotes

Naming a source

Basic style

Full width & boxed size

Sticky navbar

Types

Regular

Outline

Round

Float

Size

Blocklevel

Dismissible alerts