Clab Documentation

Welcome to the clab world! Thank you for purchasing!

Created: 16/03/2019.

By: vectorlab


Clab is a component and block based responsive multipurpose HTML5 template which is powered by the bootstrap 4 frameworks. The name Clab comes from Component Lab. Clab is basically a large laboratory of components collection. It was focused on modern design, ultra clean look and functional interface that delivers a bold visual experience. Clean code and easy development process is the key strength of clab. 180+ beautiful pre-made component and block will boost your workflow and help to build your product landing pages, detailed web-apps, stylish company websites and many more.

You don't need to write too much code to create your project with club. We already prepared all block and components for you. Just choose the perfect and best fit component and copy the code to your project. And your template is ready. Just super easy.

20+ stunning and unique demos are included with the template like products landing page, agency, insurance, portfolio, business, corporate, creative, charity, gym and fitness, job listing, startup, travel and many more.

Clab is a super fast loading template ever. The speed score is an average of 95% based on Google PageSpeed Insights. Make your website or your web application faster loading to satisfy your visitors.

Clab team loves to provide high standard support and prompt bug fixes as well as general troubleshooting. The team is standing by for any kind of customization support.

Core Features

  • - Bootstrap 4.3.x
  • - jQuery v3.3.1
  • - SASS integration
  • - Gulp task supported
  • - Retina Ready
  • - 180+ Unique components & Block
  • - 20+ Stunning Demos
  • - 110+ Page Templates
  • - 6 Different Footers
  • - Font Awesome Icon
  • - Clab Custom Icon
  • - Google Web Font
  • - Twitter feed integration
  • - Custom Mega Menu
  • - Isotope Filtering
  • - Various portfolio style (Grid, Masonry, Title, Gutter, Gutter less)
  • - Creative Blog and Articles
  • - E-commerce layouts with checkout and cart
  • - Owl Carousel v2.3.4
  • - Magnific Popup
  • - W3C Validation
  • - Parralax Background
  • - Clean Code
  • - Highly Customizable
  • - SEO Friendly
  • - Modern & Trendy Design
  • - Details Documentation
  • - Quick Support

Folder Structure

Following is the Clab folder/file structure. When you unzip the downloadable file you'll get the following files.

├── assets
│   ├── css/
│   │   ├── main.css
|   │   ├── main.min.css
│   ├── dev/
│   │   ├── js/
│   │   ├── sass/
│   ├── img/
│   ├── js/
│   │   ├── scripts.js
│   │   ├── scripts.min.js
│   ├── vendor/
│   │   ├── all third party plugins
├── gulpfile.js
├── package.json
├── index.html
└── others .html files
assets Folder

This folder contains css, dev, img, js and vendor files.

css Folder

This folder contains both minified and expanded versions of CSS. This file was compiled by dev/sass folder.

dev Folder

This folder contains js and sass files for development mode. This file will be working when you are using gulp task. After running gulp command on terminal, you can write your all js initialization into dev/js file and write sass code into dev/sass file. This js and sass code will be automatically compiled and set assets/js folder and assets/css folder accordingly with minified version. Which you have to include in your html file.

img Folder

This folder contains all demo images

vendor Folder

This folder contains all third party plugins such as Bootstrap, jQuery, owl carousel and so on.

Gulp Task

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

Installing gulp

In order to utilize Node.js on your computer. Also ensure that you have NPM (node packaged modules) installed.

Run the following commands

  • Install gulp globally by running the command npm install -g gulp
  • Navigate to the root directory of your project, then run npm install.

Once you have successfully setup now you can use npm install gulp-cli -g commands to automate your task.



For development we set a gulp command that will compile the assets/dev folder to assets/css and assets/js folder then start a local Browsersync instance on port 3000 to serve and auto-refresh your pages as you edit.


Sass is a CSS pre-processor, the most mature, stable, and powerful professional grade CSS extension language in the world; adding features that allow variables, mixins, functions. Clab supports Sass.

Sass Files are found under assets/dev/sass

├── assets
│   ├── dev/
│   │   ├── sass/
│   │   │   ├── components
│   │   │       ├── _accordion.scss
│   │   │       ├── _block-img.scss
│   │   │       ├── _blog.scss
│   │   │       ├── _blurb.scss
│   │   │       ├── _buttons.scss
│   │   │       ├── _card.scss
│   │   │       ├── _carousel.scss
│   │   │       ├── _countdown.scss
│   │   │       ├── _floating-kit.scss
│   │   │       ├── _form.scss
│   │   │       ├── _hero-banner.scss
│   │   │       ├── _list-group.scss
│   │   │       ├── _portfolio.scss
│   │   │       ├── _progress-bar.scss
│   │   │       ├── _shop.scss
│   │   │       ├── _steps.scss
│   │   │       ├── _table.scss
│   │   │       ├── _tabs.scss
│   │   │       ├── _team.scss
│   │   │       ├── _twitter.scss
│   │   │       ├── _typed.scss
│   │   │   ├── _bs-reset.scss
│   │   │   ├── _footer.scss
│   │   │   ├── _header.scss
│   │   │   ├── _overlay-nav.scss
│   │   │   ├── _type.scss
│   │   │   ├── _utilities.scss
│   │   │   ├── _variables.scss
│   │   │   ├── _main.scss

Utility Classes

Background Color
Class Name Size
.bg-gray #f0f1f4
.bg-white #ffffff
.bg-dark #242424
.bg-dark-alt #303030
.bg-green-light #d7f5e3
.gradient-primary #287dfe #7431ff
Floating Tags Position
Example Code

.ft-tag class will be set floating tag by default. Make sure parent div must be position: relative;. Now for the position of floating tag helper class will be set beside of ft-tag like the following code.

<div class="position-relative">
    <div class="ft-tag ft-inside-br" data-toggle="tooltip" data-placement="top" title="Employee of the month">EOM</div>
    <img class="card-img-top" src="assets/img/avatar1.jpg" alt="">
Class Name Opacity level
opacity-30 .3
opacity-40 .4
opacity-50 .5
opacity-60 .6
opacity-70 .7
opacity-80 .8
opacity-90 .9
opacity-100 1
Avatar Thumb Size
Class Name Size
.avatar-sm 35px X 35px
.avatar-md 70px X 70px
.avatar-lg 140px X 140px
Icon Size
Class Name Size
.icon-sm 28px
.icon-md 42px
.icon-lg 56px
Letter Spacing
Class Name Size
.ls-2 1rem
.ls-3 2rem
Line Height
Class Name Size
.lh-35 35px
.lh-45 45px
Font Size
Class Name Size
.font-size-12 12px
.font-size-14 14px
.font-size-16 16px
.font-size-20 20px
.font-size-60 60px
.font-size-72 72px
Font Weight
Class Name Size
.font-weight-300 300
.font-weight-400 400
.font-weight-600 600
.font-weight-700 700
.font-weight-800 800



A cross-browser library of CSS animations. As easy to use as an easy thing.


Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.


A modern approach to copy text to clipboard.

Font Awesome

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


jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Magnific Popup

Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device (for jQuery or Zepto.js).

Owl Carousel

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


Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.

Twitter Fetcher

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.

Image Loaded

Detect when images have been loaded.

jquery Animate Number

jQuery numbers animation plugin, adds 'number' property and step function to jQuery's animate function properties.

jQuery Countdown

A simple and html agnostic date countdown plugin for jQuery.


Filter & sort magical layouts.


Animated text typing.


Reveal Animations When You Scroll. Very Animate.css Friend :-) Easily customize animation settings: style, delay, length, offset, iterations



Our current version is v1.0 We will continuously updating the template and once you purchased this template you will get all updates full free for forever ...


If you encountered any problem during work please contact our support via email or Themeforest comments

Mail Address :

Change log

1.0 - initial release