0.0.30

version 0.0.30
#23
2025-12-21 17:34:25 +04:00 · 2018-04-06 16:27:45 +02:00 · 2018-04-06 16:27:45 +02:00 · 2018-04-06 16:26:13 +02:00 · 2018-04-06 16:23:33 +02:00 · 2018-04-06 16:21:03 +02:00
95 changed files with 22716 additions and 18855 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -8,11 +8,11 @@ _site/
 .DS_Store
 package-lock.json
 /_test/
-src/assets/css/dashboard.css
-src/assets/css/dashboard.min.css
+src/assets/css/*.css
 src/assets/plugins/**/plugin.css
 src/assets/plugins/**/plugin.min.css
 generated-site
 deploy-site
 /commits.sh
 /assets/css/
+/vendor/
--- a/PULL_REQUEST_TEMPLATE.md
+++ b/PULL_REQUEST_TEMPLATE.md
@@ -1,10 +0,0 @@
-## Description
-<!--- Describe your changes in detail -->
-
-## Screenshots (if appropriate):
-
-## Types of changes
-<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to change)
--- a/README.md
+++ b/README.md
@@ -1,42 +1,32 @@
-<p align="center">
-  <a href="https://tabler.github.io/">
-    <img src="https://tabler.github.io/assets/images/logo-default.svg" alt="Tabler" width="72" height="72">
-  </a>
-</p>
+# Tabler 

-<h3 align="center">Tabler - Admin panel made simple</h3>
+<a href="https://buddy.works"><img src="https://assets.buddy.works/automated-dark.svg" alt="Automated by Buddy" align="right"></a>

-<p align="center">
-Premium and Open Source dashboard template with responsive and high quality UI. For Free!
-</p>
-
-<p align="center">
-	<strong>
-	  <a href="https://tabler.github.io/demo/">View Demo</a> | <a href="https://github.com/tabler/tabler/archive/master.zip">Download ZIP</a>
-	</strong>
-</p>
-
-<p align="center">
-    <a href="https://www.npmjs.com/package/tabler-ui"><img src="https://img.shields.io/npm/dt/tabler-ui.svg" alt="Total Downloads"></a>
-    <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler-ui.svg" alt="Latest Release"></a>
-    <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler-ui.svg" alt="License"></a>
-    <a href="https://david-dm.org/tabler/tabler?type=dev"><img src="https://img.shields.io/david/dev/tabler/tabler.svg" alt="devDependency Status"></a>
-</p>
+Premium and Open Source dashboard template with responsive and high quality UI.

+<strong><a href="https://tabler.github.io/demo/">View Demo</a> | <a href="https://github.com/tabler/tabler/archive/master.zip">Download ZIP</a> | <a href="https://goo.gl/zJP2dT">Join us on Slack</a></strong>

+<br><br>

 ![Tabler preview](https://tabler.github.io/assets/images/dashboard.png)

----------
+## Features

-## About Tabler
+<img src="https://tabler.github.io/assets/images/features/features-2.png" width="400" align="right" style="max-width: 50%">

-We’ve created this admin panel for everyone who wants to create any templates based on our ready components. Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. The only requirement is a basic HTML and CSS knowledge—as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!

-After using many of different admin panels, no matter free or paid, we've noticed they all had a lot of defects—and the main one was resource intensity.
-They were loading loads of useless components that you wouldn't ever use, so we've decided to choose a different way. The whole system is plugin-based, what means that you have a control over what is needed and what not.
+We created this admin panel for everyone who wants to create any templates based on our pre-made components. Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. The only requirement is a basic HTML and CSS knowledge—as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!
+
+* **Responsive:** With support for mobile, tablet and desktop it doesn’t matter what device you’re using. Tabler is responsive in all major browsers.
+* **Cross Browser:** Our theme works perfectly with: Latest Chrome, Firefox+, Latest Safari, Opera, Internet Explorer 10+ and mobile browsers. We work hard to continuously support them.
+* **HTML5 & CSS3:** We only use modern web technologies like HTML5 and CSS3. Our theme includes some subtile CSS3 animations so you will get anyone’s attention.
+* **Clean Code:** We strictly followed Bootstrap’s guidelines to make your integration as easy as possible. All code is handwritten and W3c valid.
+* **Demo pages**: Tabler features over 20 individual pages featuring various components, giving you the freedom of choosing and combining. All components can take variation in color and styling, that can easily be modified using Sass. The sky is the limit!
+
+## Status
+
+<a href="https://www.npmjs.com/package/tabler-ui"><img src="https://img.shields.io/npm/dt/tabler-ui.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler-ui.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler-ui.svg" alt="Latest Release"></a> <a href="https://david-dm.org/tabler/tabler?type=dev"><img src="https://img.shields.io/david/dev/tabler/tabler.svg" alt="devDependency Status"></a> [![buddy pipeline](https://app.buddy.works/codecalm/tabler/pipelines/pipeline/131922/badge.svg?token=1ab151000ecf8700a90dd4d0d7184945d439d2642679b257092d16e76a45dce4 "buddy pipeline")](https://app.buddy.works/codecalm/tabler/pipelines/pipeline/131922)

-To make the system works fast and reliable, we've converted most of the components to CSS. Thanks to this, you don't have to load a lot of unnecessary libraries into your browser what really boosts the overall speed.

 ## Documentation

@@ -52,15 +42,15 @@ git clone https://github.com/tabler/tabler.git

 ### Setup environment

-To use our build system and run our documentation locally, you'll need a copy of Tabler's source files and Node. Follow these steps:
+To use our build system and run documentation locally, you will need a copy of Tabler's source files and Node. Follow the steps below:

-1. [Download and install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
-2. Navigate to the root `/tabler` directory and run `npm install` to install our local dependencies listed in `package.json`.
+1. [Download and install Node.js](https://nodejs.org/download/), which is used to manage our dependencies.
+2. Navigate to the root `/tabler` directory and run `npm install` to install local dependencies listed in `package.json`.
 3. [Install Ruby](https://www.ruby-lang.org/en/documentation/installation/), install [Bundler](https://bundler.io/) with `gem install bundler`, and finally run `bundle install`. This will install all Ruby dependencies, such as Jekyll and plugins.
   
   **Windows users:** Read [this guide](https://jekyllrb.com/docs/windows/) to get Jekyll up and running without problems.
  
-When completed, you'll be able to run the various commands provided from the command line.
+When completed, you will be able to run the various commands provided in the command line.

 ### Build Tabler

@@ -70,6 +60,10 @@ When completed, you'll be able to run the various commands provided from the com

 **Warning!** all changes made in `_site/` folder would be overwritten on application build.

+## Development preview
+
+All changes made on `dev` branch are avaliable on https://dev-tabler-tabler.buddy.show/. Every change in the code automatically compiles the source code.
+
 ## Bugs and feature requests

 Have a bug or a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).
@@ -77,8 +71,8 @@ Have a bug or a feature request? [Please open a new issue](https://github.com/ta
 ## Browser Support

 ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png)
--- | --- | --- | --- | --- | --- |
-Latest ✔ | Latest ✔ | Latest ✔ | 11+ ✔ | 9.1+ ✔ | Latest ✔ |
+--- | --- | --- | --- | --- | ---
+Latest ✔ | Latest ✔ | Latest ✔ | 11+ ✔ | 9.1+ ✔ | Latest ✔

 ## Creators

--- a/_config.yml
+++ b/_config.yml
@@ -2,6 +2,7 @@ title: Tabler
 description: tabler.github.io - a responsive, flat and full featured admin template

 source: src
+host: 0.0.0.0

 plugins:
  - jekyll-tidy
@@ -24,10 +25,10 @@ exclude:
  - .DS_Store
  - .sass-cache/
  - .asset-cache/
-  - assets/scss/*
-  - assets/plugins/**/*.scss
  - push-to-repo.sh
  - commits.sh
+  - assets/scss/*
+  - assets/plugins/**/*.scss

 collections:
  docs:
--- a/composer.json
+++ b/composer.json
@@ -0,0 +1,15 @@
+{
+    "name": "tabler/tabler",
+    "description": "Premium and Open Source dashboard template with responsive and high quality UI. For Free!",
+    "type": "library",
+    "license": "MIT",
+	"require": {},
+	"require-dev": {},
+	"autoload": {},
+	"authors": [
+		{
+			"name": "codecalm",
+			"email": "codecalm@gmail.com"
+		}
+	]
+}
--- a/dist-new-version.sh
+++ b/dist-new-version.sh
@@ -0,0 +1,15 @@
+#!/usr/bin/env bash
+
+version=0.0.30
+
+echo "Version $version"
+
+npm run dist
+git add .
+git commit -am "version $version"
+npm version $version
+git push origin master && git push origin master --tags
+
+npm run publish-dist
+
+npm publish
--- a/dist/400.html
+++ b/dist/400.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Page 400 - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
--- a/dist/401.html
+++ b/dist/401.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Page 401 - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
--- a/dist/403.html
+++ b/dist/403.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Page 403 - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
--- a/dist/404.html
+++ b/dist/404.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Page 404 - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
--- a/dist/500.html
+++ b/dist/500.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Page 500 - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
--- a/dist/503.html
+++ b/dist/503.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Page 503 - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
--- a/dist/assets/css/dashboard.css
+++ b/dist/assets/css/dashboard.css
--- a/dist/assets/css/dashboard.rtl.css
+++ b/dist/assets/css/dashboard.rtl.css
--- a/dist/assets/js/core.js
+++ b/dist/assets/js/core.js
@@ -1,97 +1,107 @@
-var hexToRgba = function(hex, opacity) {
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    var rgb = result ? {
-            r: parseInt(result[1], 16),
-            g: parseInt(result[2], 16),
-            b: parseInt(result[3], 16)
-        } : null;
+/**
+ *
+ */
+let hexToRgba = function(hex, opacity) {
+  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  let rgb = result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;

-    return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', '+ opacity + ')';
+  return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + opacity + ')';
 };

-$(document).ready(function () {
+/**
+ *
+ */
+$(document).ready(function() {
+  /** Constant div card */
+  const DIV_CARD = 'div.card';

-    // Initialize tooltips
-    $('[data-toggle="tooltip"]').tooltip();
+  /** Initialize tooltips */
+  $('[data-toggle="tooltip"]').tooltip();

-    // Initialize popovers
-	$('[data-toggle="popover"]').popover({
-		html: true
-    });
+  /** Initialize popovers */
+  $('[data-toggle="popover"]').popover({
+    html: true
+  });

-    // Function for remove card
-    $('[data-toggle="card-remove"]').on('click', function (e) {
-        var $card = $(this).closest('div.card');
-        $card.remove();
+  /** Function for remove card */
+  $('[data-toggle="card-remove"]').on('click', function(e) {
+    let $card = $(this).closest(DIV_CARD);

-        e.preventDefault();
-        return false;
-    });
+    $card.remove();

-    // Function for collapse card
-    $('[data-toggle="card-collapse"]').on('click', function (e) {
-        var $this = $(this),
-            $card = $this.closest('div.card');
+    e.preventDefault();
+    return false;
+  });

-        $card.toggleClass('card-collapsed');
+  /** Function for collapse card */
+  $('[data-toggle="card-collapse"]').on('click', function(e) {
+    let $card = $(this).closest(DIV_CARD);

-        e.preventDefault();
-        return false;
-    });
+    $card.toggleClass('card-collapsed');

-    // Function for fullscreen card
-    $('[data-toggle="card-fullscreen"]').on('click', function(e) {
-        var $card = $(this).closest('div.card');
+    e.preventDefault();
+    return false;
+  });

-        $card.toggleClass('card-fullscreen').removeClass('card-collapsed');
+  /** Function for fullscreen card */
+  $('[data-toggle="card-fullscreen"]').on('click', function(e) {
+    let $card = $(this).closest(DIV_CARD);

-        e.preventDefault();
-        return false;
-    });
+    $card.toggleClass('card-fullscreen').removeClass('card-collapsed');

-    if($('[data-sparkline]').length) {
-        var generateSparkline = function($elem, data, params) {
-            $elem.sparkline(data, {
-                type: $elem.attr('data-sparkline-type'),
-                height: '100%',
-                barColor: params.color,
-                lineColor: params.color,
-                fillColor: 'transparent',
-                spotColor: params.color,
-                spotRadius: 0,
-                lineWidth: 2,
-                highlightColor: hexToRgba(params.color, .6),
-                highlightLineColor: '#666',
-                defaultPixelsPerValue: 5
-            });
-        };
+    e.preventDefault();
+    return false;
+  });

-        require(['sparkline'], function(){
-            $('[data-sparkline]').each(function(){
-                var $chart = $(this);
+  /**  */
+  if ($('[data-sparkline]').length) {
+    let generateSparkline = function($elem, data, params) {
+      $elem.sparkline(data, {
+        type: $elem.attr('data-sparkline-type'),
+        height: '100%',
+        barColor: params.color,
+        lineColor: params.color,
+        fillColor: 'transparent',
+        spotColor: params.color,
+        spotRadius: 0,
+        lineWidth: 2,
+        highlightColor: hexToRgba(params.color, .6),
+        highlightLineColor: '#666',
+        defaultPixelsPerValue: 5
+      });
+    };

-                generateSparkline($chart, JSON.parse($chart.attr('data-sparkline')), {
-                    color: $chart.attr('data-sparkline-color')
-                });
-            });
+    require(['sparkline'], function() {
+      $('[data-sparkline]').each(function() {
+        let $chart = $(this);
+
+        generateSparkline($chart, JSON.parse($chart.attr('data-sparkline')), {
+          color: $chart.attr('data-sparkline-color')
        });
-    }
+      });
+    });
+  }

+  /**  */
+  if ($('.chart-circle').length) {
+    require(['circle-progress'], function() {
+      $('.chart-circle').each(function() {
+        let $this = $(this);

-    if($('.chart-circle').length) {
-        require(['circle-progress'], function () {
-            $('.chart-circle').each(function () {
-                var $this = $(this);
-                $this.circleProgress({
-                    fill: {
-                        color: tabler.colors[$this.attr('data-color')] || tabler.colors.blue
-                    },
-                    size: $this.height(),
-                    startAngle: -Math.PI / 4 * 2,
-                    emptyFill: '#F4F4F4',
-                    lineCap: 'round'
-                });
-            });
+        $this.circleProgress({
+          fill: {
+            color: tabler.colors[$this.attr('data-color')] || tabler.colors.blue
+          },
+          size: $this.height(),
+          startAngle: -Math.PI / 4 * 2,
+          emptyFill: '#F4F4F4',
+          lineCap: 'round'
        });
-    }
+      });
+    });
+  }
 });
--- a/dist/assets/plugins/charts-c3/plugin.min.css
+++ b/dist/assets/plugins/charts-c3/plugin.min.css
@@ -1,224 +0,0 @@
-/*-- Chart --*/
-.c3 svg {
-  font: 10px sans-serif;
-  -webkit-tap-highlight-color: transparent;
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-}
-
-.c3 path,
-.c3 line {
-  fill: none;
-  stroke: rgba(0, 40, 100, 0.12);
-}
-
-.c3 text {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  font-size: px2rem(12px);
-}
-
-.c3-legend-item-tile,
-.c3-xgrid-focus,
-.c3-ygrid,
-.c3-event-rect,
-.c3-bars path {
-  shape-rendering: crispEdges;
-}
-
-.c3-chart-arc path {
-  stroke: #fff;
-}
-
-.c3-chart-arc text {
-  fill: #fff;
-  font-size: 13px;
-}
-
-/*-- Axis --*/
-/*-- Grid --*/
-.c3-grid line {
-  stroke: #f0f0f0;
-}
-
-.c3-grid text {
-  fill: #aaa;
-}
-
-.c3-xgrid,
-.c3-ygrid {
-  stroke: #e6e6e6;
-  stroke-dasharray: 2 4;
-}
-
-/*-- Text on Chart --*/
-.c3-text {
-  font-size: 12px;
-}
-
-.c3-text.c3-empty {
-  fill: #808080;
-  font-size: 2em;
-}
-
-/*-- Line --*/
-.c3-line {
-  stroke-width: 2px;
-}
-
-/*-- Point --*/
-.c3-circle._expanded_ {
-  stroke-width: 2px;
-  stroke: white;
-}
-
-.c3-selected-circle {
-  fill: white;
-  stroke-width: 1.5px;
-}
-
-/*-- Bar --*/
-.c3-bar {
-  stroke-width: 0;
-}
-
-.c3-bar._expanded_ {
-  fill-opacity: 1;
-  fill-opacity: 0.75;
-}
-
-/*-- Focus --*/
-.c3-target.c3-focused {
-  opacity: 1;
-}
-
-.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
-  stroke-width: 2px;
-}
-
-.c3-target.c3-defocused {
-  opacity: 0.3 !important;
-}
-
-/*-- Region --*/
-.c3-region {
-  fill: steelblue;
-  fill-opacity: .1;
-}
-
-/*-- Brush --*/
-.c3-brush .extent {
-  fill-opacity: .1;
-}
-
-/*-- Select - Drag --*/
-/*-- Legend --*/
-.c3-legend-item text {
-  fill: #545454;
-  font-size: 14px;
-}
-
-.c3-legend-item-hidden {
-  opacity: 0.15;
-}
-
-.c3-legend-background {
-  opacity: 0.75;
-  fill: white;
-  stroke: lightgray;
-  stroke-width: 1;
-}
-
-/*-- Title --*/
-.c3-title {
-  font: 14px sans-serif;
-}
-
-/*-- Tooltip --*/
-.c3-tooltip-container {
-  z-index: 10;
-}
-
-.c3-tooltip {
-  border-collapse: collapse;
-  border-spacing: 0;
-  empty-cells: show;
-  font-size: 11px;
-  line-height: 1;
-  font-weight: 700;
-  color: #fff;
-  border-radius: 3px;
-  background: #212529;
-  white-space: nowrap;
-}
-
-.c3-tooltip th {
-  padding: 6px 6px;
-  text-align: left;
-}
-
-.c3-tooltip td {
-  padding: 4px 6px;
-  font-weight: 400;
-}
-
-.c3-tooltip td > span {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  margin-right: 8px;
-  border-radius: 50%;
-  vertical-align: baseline;
-}
-
-.c3-tooltip td.value {
-  text-align: right;
-}
-
-/*-- Area --*/
-.c3-area {
-  stroke-width: 0;
-  opacity: 0.1;
-}
-
-/*-- Arc --*/
-.c3-chart-arcs-title {
-  dominant-baseline: middle;
-  font-size: 1.3em;
-}
-
-.c3-chart-arcs .c3-chart-arcs-background {
-  fill: #e0e0e0;
-  stroke: none;
-}
-
-.c3-chart-arcs .c3-chart-arcs-gauge-unit {
-  fill: #000;
-  font-size: 16px;
-}
-
-.c3-chart-arcs .c3-chart-arcs-gauge-max {
-  fill: #777;
-}
-
-.c3-chart-arcs .c3-chart-arcs-gauge-min {
-  fill: #777;
-}
-
-.c3-chart-arc .c3-gauge-value {
-  fill: #000;
-  /*  font-size: 28px !important;*/
-}
-
-.c3-chart-arc.c3-target g path {
-  opacity: 1;
-}
-
-.c3-chart-arc.c3-target.c3-focused g path {
-  opacity: 1;
-}
-
-.c3-axis {
-  fill: #868e96;
-}
--- a/dist/assets/plugins/fullcalendar/plugin.min.css
+++ b/dist/assets/plugins/fullcalendar/plugin.min.css
--- a/dist/assets/plugins/iconfonts/plugin.min.css
+++ b/dist/assets/plugins/iconfonts/plugin.min.css
--- a/dist/assets/plugins/maps-google/plugin.min.css
+++ b/dist/assets/plugins/maps-google/plugin.min.css
--- a/dist/assets/plugins/prismjs/plugin.min.css
+++ b/dist/assets/plugins/prismjs/plugin.min.css
@@ -1,198 +0,0 @@
-@charset "UTF-8";
-/* PrismJS 1.9.0
-http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+ruby+json+less+php+python+jsx+sass+scss+sql&plugins=line-highlight+line-numbers */
-/**
- * prism.js default theme for JavaScript, CSS and HTML
- * Based on dabblet (http://dabblet.com)
- * @author Lea Verou
- */
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: slategray;
-}
-
-.token.punctuation {
-  color: #999;
-}
-
-.namespace {
-  opacity: .7;
-}
-
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: #905;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: #690;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-  color: #a67f59;
-  background: rgba(255, 255, 255, 0.5);
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-  color: #07a;
-}
-
-.token.function {
-  color: #dd4a68;
-}
-
-.token.regex,
-.token.important,
-.token.variable {
-  color: #e90;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-pre[data-line] {
-  position: relative;
-}
-
-.line-highlight {
-  position: absolute;
-  left: 0;
-  right: 0;
-  margin-top: 1em;
-  /* Same as .prism’s padding-top */
-  background: rgba(255, 255, 0, 0.1);
-  pointer-events: none;
-  line-height: inherit;
-  white-space: pre;
-}
-
-.line-highlight:before,
-.line-highlight[data-end]:after {
-  content: attr(data-start);
-  position: absolute;
-  top: .4em;
-  left: .6em;
-  min-width: 1em;
-  padding: 0 .5em;
-  background-color: rgba(153, 122, 102, 0.4);
-  color: #f5f2f0;
-  font: bold 65%/1.5 sans-serif;
-  text-align: center;
-  vertical-align: .3em;
-  border-radius: 999px;
-  text-shadow: none;
-  box-shadow: 0 1px white;
-}
-
-.line-highlight[data-end]:after {
-  content: attr(data-end);
-  top: auto;
-  bottom: .4em;
-}
-
-.line-numbers .line-highlight:before,
-.line-numbers .line-highlight:after {
-  content: none;
-}
-
-pre.line-numbers {
-  position: relative;
-  padding-left: 3.8em;
-  counter-reset: linenumber;
-}
-
-pre.line-numbers > code {
-  position: relative;
-  white-space: inherit;
-}
-
-.line-numbers .line-numbers-rows {
-  position: absolute;
-  pointer-events: none;
-  top: 0;
-  font-size: 100%;
-  left: -3.8em;
-  width: 3em;
-  /* works for line-numbers below 1000 lines */
-  letter-spacing: -1px;
-  border-right: 1px solid rgba(0, 40, 100, 0.12);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.line-numbers-rows > span {
-  pointer-events: none;
-  display: block;
-  counter-increment: linenumber;
-}
-
-.line-numbers-rows > span:before {
-  content: counter(linenumber);
-  color: rgba(134, 142, 150, 0.5);
-  display: block;
-  padding-right: 0.8em;
-  text-align: right;
-}
-
-pre.code-toolbar {
-  position: relative;
-}
-
-pre.code-toolbar > .toolbar {
-  position: absolute;
-  top: .3em;
-  right: .2em;
-  transition: opacity 0.3s ease-in-out;
-  opacity: 1;
-}
-
-pre.code-toolbar > .toolbar .toolbar-item {
-  display: inline-block;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-pre.code-toolbar > .toolbar a {
-  cursor: pointer;
-}
-
-pre.code-toolbar > .toolbar a,
-pre.code-toolbar > .toolbar button,
-pre.code-toolbar > .toolbar span {
-  color: #868e96;
-  padding: 0 .5em;
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-  font-size: px2rem(14px);
-}
--- a/dist/blog.html
+++ b/dist/blog.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="./index.html">
-                <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="./index.html">
+                <img src="./demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="./cards.html" class="nav-item ">Cards design</a>
-                      <a href="./charts.html" class="nav-item ">Charts</a>
-                      <a href="./pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="./charts.html" class="dropdown-item ">Charts</a>
+                      <a href="./pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link active"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="./maps.html" class="nav-item ">Maps</a>
-                      <a href="./icons.html" class="nav-item ">Icons</a>
-                      <a href="./store.html" class="nav-item ">Store</a>
-                      <a href="./blog.html" class="nav-item active">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link active" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./maps.html" class="dropdown-item ">Maps</a>
+                      <a href="./icons.html" class="dropdown-item ">Icons</a>
+                      <a href="./store.html" class="dropdown-item ">Store</a>
+                      <a href="./blog.html" class="dropdown-item active">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="./profile.html" class="nav-item ">Profile</a>
-                      <a href="./login.html" class="nav-item ">Login</a>
-                      <a href="./register.html" class="nav-item ">Register</a>
-                      <a href="./forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="./400.html" class="nav-item ">400 error</a>
-                      <a href="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="page-header">
              <h1 class="page-title">
@@ -436,7 +441,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/cards.html
+++ b/dist/cards.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Cards design - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="./index.html">
-                <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="./index.html">
+                <img src="./demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link active"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="./cards.html" class="nav-item active">Cards design</a>
-                      <a href="./charts.html" class="nav-item ">Charts</a>
-                      <a href="./pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link active" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./cards.html" class="dropdown-item active">Cards design</a>
+                      <a href="./charts.html" class="dropdown-item ">Charts</a>
+                      <a href="./pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="./maps.html" class="nav-item ">Maps</a>
-                      <a href="./icons.html" class="nav-item ">Icons</a>
-                      <a href="./store.html" class="nav-item ">Store</a>
-                      <a href="./blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./maps.html" class="dropdown-item ">Maps</a>
+                      <a href="./icons.html" class="dropdown-item ">Icons</a>
+                      <a href="./store.html" class="dropdown-item ">Store</a>
+                      <a href="./blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="./profile.html" class="nav-item ">Profile</a>
-                      <a href="./login.html" class="nav-item ">Login</a>
-                      <a href="./register.html" class="nav-item ">Register</a>
-                      <a href="./forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="./400.html" class="nav-item ">400 error</a>
-                      <a href="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="row">
              <div class="col-md-6 col-xl-4">
@@ -364,7 +369,7 @@
              <div class="col-lg-6">
                <div class="card">
                  <div class="card-header">
-                    <h3 class="card-title">Pannel with custom buttons</h3>
+                    <h3 class="card-title">Panel with custom buttons</h3>
                    <div class="card-options">
                      <a class="btn btn-secondary btn-sm">Action 1</a>
                      <a class="btn btn-secondary btn-sm ml-2">Action 2</a>
@@ -424,7 +429,7 @@
                    </div>
                  </div>
                  <div class="card-alert alert alert-danger mb-0">
-                    Adding action was failed
+                    Adding action failed
                  </div>
                  <div class="card-body">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
@@ -510,7 +515,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/charts.html
+++ b/dist/charts.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Charts - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="./index.html">
-                <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="./index.html">
+                <img src="./demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link active"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="./cards.html" class="nav-item ">Cards design</a>
-                      <a href="./charts.html" class="nav-item active">Charts</a>
-                      <a href="./pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link active" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="./charts.html" class="dropdown-item active">Charts</a>
+                      <a href="./pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="./maps.html" class="nav-item ">Maps</a>
-                      <a href="./icons.html" class="nav-item ">Icons</a>
-                      <a href="./store.html" class="nav-item ">Store</a>
-                      <a href="./blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./maps.html" class="dropdown-item ">Maps</a>
+                      <a href="./icons.html" class="dropdown-item ">Icons</a>
+                      <a href="./store.html" class="dropdown-item ">Store</a>
+                      <a href="./blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="./profile.html" class="nav-item ">Profile</a>
-                      <a href="./login.html" class="nav-item ">Login</a>
-                      <a href="./register.html" class="nav-item ">Register</a>
-                      <a href="./forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="./400.html" class="nav-item ">400 error</a>
-                      <a href="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="page-header">
              <h1 class="page-title">
@@ -1064,7 +1069,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/crypto-currencies.html
+++ b/dist/crypto-currencies.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Crypto currencies - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="./index.html">
-                <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="./index.html">
+                <img src="./demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="./cards.html" class="nav-item ">Cards design</a>
-                      <a href="./charts.html" class="nav-item ">Charts</a>
-                      <a href="./pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="./charts.html" class="dropdown-item ">Charts</a>
+                      <a href="./pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="./maps.html" class="nav-item ">Maps</a>
-                      <a href="./icons.html" class="nav-item ">Icons</a>
-                      <a href="./store.html" class="nav-item ">Store</a>
-                      <a href="./blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./maps.html" class="dropdown-item ">Maps</a>
+                      <a href="./icons.html" class="dropdown-item ">Icons</a>
+                      <a href="./store.html" class="dropdown-item ">Store</a>
+                      <a href="./blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="./profile.html" class="nav-item ">Profile</a>
-                      <a href="./login.html" class="nav-item ">Login</a>
-                      <a href="./register.html" class="nav-item ">Register</a>
-                      <a href="./forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="./400.html" class="nav-item ">400 error</a>
-                      <a href="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="page-header">
              <h1 class="page-title">
@@ -1444,7 +1449,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/docs/alerts.html
+++ b/dist/docs/alerts.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Alerts - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '..'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="../assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="../index.html">
-                <img src="../demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="../index.html">
+                <img src="../demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(../demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="../cards.html" class="nav-item ">Cards design</a>
-                      <a href="../charts.html" class="nav-item ">Charts</a>
-                      <a href="../pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="../charts.html" class="dropdown-item ">Charts</a>
+                      <a href="../pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="../maps.html" class="nav-item ">Maps</a>
-                      <a href="../icons.html" class="nav-item ">Icons</a>
-                      <a href="../store.html" class="nav-item ">Store</a>
-                      <a href="../blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../maps.html" class="dropdown-item ">Maps</a>
+                      <a href="../icons.html" class="dropdown-item ">Icons</a>
+                      <a href="../store.html" class="dropdown-item ">Store</a>
+                      <a href="../blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="../profile.html" class="nav-item ">Profile</a>
-                      <a href="../login.html" class="nav-item ">Login</a>
-                      <a href="../register.html" class="nav-item ">Register</a>
-                      <a href="../forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="../400.html" class="nav-item ">400 error</a>
-                      <a href="../104.html" class="nav-item ">401 error</a>
-                      <a href="../403.html" class="nav-item ">403 error</a>
-                      <a href="../404.html" class="nav-item ">404 error</a>
-                      <a href="../500.html" class="nav-item ">500 error</a>
-                      <a href="../503.html" class="nav-item ">503 error</a>
-                      <a href="../email.html" class="nav-item ">Email</a>
-                      <a href="../empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../profile.html" class="dropdown-item ">Profile</a>
+                      <a href="../login.html" class="dropdown-item ">Login</a>
+                      <a href="../register.html" class="dropdown-item ">Register</a>
+                      <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="../400.html" class="dropdown-item ">400 error</a>
+                      <a href="../401.html" class="dropdown-item ">401 error</a>
+                      <a href="../403.html" class="dropdown-item ">403 error</a>
+                      <a href="../404.html" class="dropdown-item ">404 error</a>
+                      <a href="../500.html" class="dropdown-item ">500 error</a>
+                      <a href="../503.html" class="dropdown-item ">503 error</a>
+                      <a href="../email.html" class="dropdown-item ">Email</a>
+                      <a href="../empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="../rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="page-header">
              <h1 class="page-title">
@@ -397,7 +402,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/docs/avatars.html
+++ b/dist/docs/avatars.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Avatars - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '..'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="../assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="../index.html">
-                <img src="../demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="../index.html">
+                <img src="../demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(../demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="../cards.html" class="nav-item ">Cards design</a>
-                      <a href="../charts.html" class="nav-item ">Charts</a>
-                      <a href="../pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="../charts.html" class="dropdown-item ">Charts</a>
+                      <a href="../pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="../maps.html" class="nav-item ">Maps</a>
-                      <a href="../icons.html" class="nav-item ">Icons</a>
-                      <a href="../store.html" class="nav-item ">Store</a>
-                      <a href="../blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../maps.html" class="dropdown-item ">Maps</a>
+                      <a href="../icons.html" class="dropdown-item ">Icons</a>
+                      <a href="../store.html" class="dropdown-item ">Store</a>
+                      <a href="../blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="../profile.html" class="nav-item ">Profile</a>
-                      <a href="../login.html" class="nav-item ">Login</a>
-                      <a href="../register.html" class="nav-item ">Register</a>
-                      <a href="../forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="../400.html" class="nav-item ">400 error</a>
-                      <a href="../104.html" class="nav-item ">401 error</a>
-                      <a href="../403.html" class="nav-item ">403 error</a>
-                      <a href="../404.html" class="nav-item ">404 error</a>
-                      <a href="../500.html" class="nav-item ">500 error</a>
-                      <a href="../503.html" class="nav-item ">503 error</a>
-                      <a href="../email.html" class="nav-item ">Email</a>
-                      <a href="../empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../profile.html" class="dropdown-item ">Profile</a>
+                      <a href="../login.html" class="dropdown-item ">Login</a>
+                      <a href="../register.html" class="dropdown-item ">Register</a>
+                      <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="../400.html" class="dropdown-item ">400 error</a>
+                      <a href="../401.html" class="dropdown-item ">401 error</a>
+                      <a href="../403.html" class="dropdown-item ">403 error</a>
+                      <a href="../404.html" class="dropdown-item ">404 error</a>
+                      <a href="../500.html" class="dropdown-item ">500 error</a>
+                      <a href="../503.html" class="dropdown-item ">503 error</a>
+                      <a href="../email.html" class="dropdown-item ">Email</a>
+                      <a href="../empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="../rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="page-header">
              <h1 class="page-title">
@@ -422,7 +427,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/docs/buttons.html
+++ b/dist/docs/buttons.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Buttons - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '..'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="../assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="../index.html">
-                <img src="../demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="../index.html">
+                <img src="../demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(../demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="../cards.html" class="nav-item ">Cards design</a>
-                      <a href="../charts.html" class="nav-item ">Charts</a>
-                      <a href="../pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="../charts.html" class="dropdown-item ">Charts</a>
+                      <a href="../pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="../maps.html" class="nav-item ">Maps</a>
-                      <a href="../icons.html" class="nav-item ">Icons</a>
-                      <a href="../store.html" class="nav-item ">Store</a>
-                      <a href="../blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../maps.html" class="dropdown-item ">Maps</a>
+                      <a href="../icons.html" class="dropdown-item ">Icons</a>
+                      <a href="../store.html" class="dropdown-item ">Store</a>
+                      <a href="../blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="../profile.html" class="nav-item ">Profile</a>
-                      <a href="../login.html" class="nav-item ">Login</a>
-                      <a href="../register.html" class="nav-item ">Register</a>
-                      <a href="../forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="../400.html" class="nav-item ">400 error</a>
-                      <a href="../104.html" class="nav-item ">401 error</a>
-                      <a href="../403.html" class="nav-item ">403 error</a>
-                      <a href="../404.html" class="nav-item ">404 error</a>
-                      <a href="../500.html" class="nav-item ">500 error</a>
-                      <a href="../503.html" class="nav-item ">503 error</a>
-                      <a href="../email.html" class="nav-item ">Email</a>
-                      <a href="../empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../profile.html" class="dropdown-item ">Profile</a>
+                      <a href="../login.html" class="dropdown-item ">Login</a>
+                      <a href="../register.html" class="dropdown-item ">Register</a>
+                      <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="../400.html" class="dropdown-item ">400 error</a>
+                      <a href="../401.html" class="dropdown-item ">401 error</a>
+                      <a href="../403.html" class="dropdown-item ">403 error</a>
+                      <a href="../404.html" class="dropdown-item ">404 error</a>
+                      <a href="../500.html" class="dropdown-item ">500 error</a>
+                      <a href="../503.html" class="dropdown-item ">503 error</a>
+                      <a href="../email.html" class="dropdown-item ">Email</a>
+                      <a href="../empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="../rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="page-header">
              <h1 class="page-title">
@@ -728,7 +733,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/docs/cards.html
+++ b/dist/docs/cards.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Cards - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '..'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="../assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="../index.html">
-                <img src="../demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="../index.html">
+                <img src="../demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(../demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="../cards.html" class="nav-item ">Cards design</a>
-                      <a href="../charts.html" class="nav-item ">Charts</a>
-                      <a href="../pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="../charts.html" class="dropdown-item ">Charts</a>
+                      <a href="../pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="../maps.html" class="nav-item ">Maps</a>
-                      <a href="../icons.html" class="nav-item ">Icons</a>
-                      <a href="../store.html" class="nav-item ">Store</a>
-                      <a href="../blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../maps.html" class="dropdown-item ">Maps</a>
+                      <a href="../icons.html" class="dropdown-item ">Icons</a>
+                      <a href="../store.html" class="dropdown-item ">Store</a>
+                      <a href="../blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="../profile.html" class="nav-item ">Profile</a>
-                      <a href="../login.html" class="nav-item ">Login</a>
-                      <a href="../register.html" class="nav-item ">Register</a>
-                      <a href="../forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="../400.html" class="nav-item ">400 error</a>
-                      <a href="../104.html" class="nav-item ">401 error</a>
-                      <a href="../403.html" class="nav-item ">403 error</a>
-                      <a href="../404.html" class="nav-item ">404 error</a>
-                      <a href="../500.html" class="nav-item ">500 error</a>
-                      <a href="../503.html" class="nav-item ">503 error</a>
-                      <a href="../email.html" class="nav-item ">Email</a>
-                      <a href="../empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../profile.html" class="dropdown-item ">Profile</a>
+                      <a href="../login.html" class="dropdown-item ">Login</a>
+                      <a href="../register.html" class="dropdown-item ">Register</a>
+                      <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="../400.html" class="dropdown-item ">400 error</a>
+                      <a href="../401.html" class="dropdown-item ">401 error</a>
+                      <a href="../403.html" class="dropdown-item ">403 error</a>
+                      <a href="../404.html" class="dropdown-item ">404 error</a>
+                      <a href="../500.html" class="dropdown-item ">500 error</a>
+                      <a href="../503.html" class="dropdown-item ">503 error</a>
+                      <a href="../email.html" class="dropdown-item ">Email</a>
+                      <a href="../empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="../rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="page-header">
              <h1 class="page-title">
@@ -574,7 +579,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/docs/charts.html
+++ b/dist/docs/charts.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Charts - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '..'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="../assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="../index.html">
-                <img src="../demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="../index.html">
+                <img src="../demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(../demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="../cards.html" class="nav-item ">Cards design</a>
-                      <a href="../charts.html" class="nav-item ">Charts</a>
-                      <a href="../pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="../charts.html" class="dropdown-item ">Charts</a>
+                      <a href="../pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="../maps.html" class="nav-item ">Maps</a>
-                      <a href="../icons.html" class="nav-item ">Icons</a>
-                      <a href="../store.html" class="nav-item ">Store</a>
-                      <a href="../blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../maps.html" class="dropdown-item ">Maps</a>
+                      <a href="../icons.html" class="dropdown-item ">Icons</a>
+                      <a href="../store.html" class="dropdown-item ">Store</a>
+                      <a href="../blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="../profile.html" class="nav-item ">Profile</a>
-                      <a href="../login.html" class="nav-item ">Login</a>
-                      <a href="../register.html" class="nav-item ">Register</a>
-                      <a href="../forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="../400.html" class="nav-item ">400 error</a>
-                      <a href="../104.html" class="nav-item ">401 error</a>
-                      <a href="../403.html" class="nav-item ">403 error</a>
-                      <a href="../404.html" class="nav-item ">404 error</a>
-                      <a href="../500.html" class="nav-item ">500 error</a>
-                      <a href="../503.html" class="nav-item ">503 error</a>
-                      <a href="../email.html" class="nav-item ">Email</a>
-                      <a href="../empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../profile.html" class="dropdown-item ">Profile</a>
+                      <a href="../login.html" class="dropdown-item ">Login</a>
+                      <a href="../register.html" class="dropdown-item ">Register</a>
+                      <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="../400.html" class="dropdown-item ">400 error</a>
+                      <a href="../401.html" class="dropdown-item ">401 error</a>
+                      <a href="../403.html" class="dropdown-item ">403 error</a>
+                      <a href="../404.html" class="dropdown-item ">404 error</a>
+                      <a href="../500.html" class="dropdown-item ">500 error</a>
+                      <a href="../503.html" class="dropdown-item ">503 error</a>
+                      <a href="../email.html" class="dropdown-item ">Email</a>
+                      <a href="../empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="../rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="page-header">
              <h1 class="page-title">
@@ -368,7 +373,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/docs/colors.html
+++ b/dist/docs/colors.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Colors - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '..'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="../assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="../index.html">
-                <img src="../demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="../index.html">
+                <img src="../demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(../demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="../cards.html" class="nav-item ">Cards design</a>
-                      <a href="../charts.html" class="nav-item ">Charts</a>
-                      <a href="../pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="../charts.html" class="dropdown-item ">Charts</a>
+                      <a href="../pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="../maps.html" class="nav-item ">Maps</a>
-                      <a href="../icons.html" class="nav-item ">Icons</a>
-                      <a href="../store.html" class="nav-item ">Store</a>
-                      <a href="../blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../maps.html" class="dropdown-item ">Maps</a>
+                      <a href="../icons.html" class="dropdown-item ">Icons</a>
+                      <a href="../store.html" class="dropdown-item ">Store</a>
+                      <a href="../blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="../profile.html" class="nav-item ">Profile</a>
-                      <a href="../login.html" class="nav-item ">Login</a>
-                      <a href="../register.html" class="nav-item ">Register</a>
-                      <a href="../forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="../400.html" class="nav-item ">400 error</a>
-                      <a href="../104.html" class="nav-item ">401 error</a>
-                      <a href="../403.html" class="nav-item ">403 error</a>
-                      <a href="../404.html" class="nav-item ">404 error</a>
-                      <a href="../500.html" class="nav-item ">500 error</a>
-                      <a href="../503.html" class="nav-item ">503 error</a>
-                      <a href="../email.html" class="nav-item ">Email</a>
-                      <a href="../empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../profile.html" class="dropdown-item ">Profile</a>
+                      <a href="../login.html" class="dropdown-item ">Login</a>
+                      <a href="../register.html" class="dropdown-item ">Register</a>
+                      <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="../400.html" class="dropdown-item ">400 error</a>
+                      <a href="../401.html" class="dropdown-item ">401 error</a>
+                      <a href="../403.html" class="dropdown-item ">403 error</a>
+                      <a href="../404.html" class="dropdown-item ">404 error</a>
+                      <a href="../500.html" class="dropdown-item ">500 error</a>
+                      <a href="../503.html" class="dropdown-item ">503 error</a>
+                      <a href="../email.html" class="dropdown-item ">Email</a>
+                      <a href="../empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="../rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="page-header">
              <h1 class="page-title">
@@ -677,7 +682,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/docs/form-components.html
+++ b/dist/docs/form-components.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Form components - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '..'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="../assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="../index.html">
-                <img src="../demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="../index.html">
+                <img src="../demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(../demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="../cards.html" class="nav-item ">Cards design</a>
-                      <a href="../charts.html" class="nav-item ">Charts</a>
-                      <a href="../pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="../charts.html" class="dropdown-item ">Charts</a>
+                      <a href="../pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="../maps.html" class="nav-item ">Maps</a>
-                      <a href="../icons.html" class="nav-item ">Icons</a>
-                      <a href="../store.html" class="nav-item ">Store</a>
-                      <a href="../blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../maps.html" class="dropdown-item ">Maps</a>
+                      <a href="../icons.html" class="dropdown-item ">Icons</a>
+                      <a href="../store.html" class="dropdown-item ">Store</a>
+                      <a href="../blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="../profile.html" class="nav-item ">Profile</a>
-                      <a href="../login.html" class="nav-item ">Login</a>
-                      <a href="../register.html" class="nav-item ">Register</a>
-                      <a href="../forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="../400.html" class="nav-item ">400 error</a>
-                      <a href="../104.html" class="nav-item ">401 error</a>
-                      <a href="../403.html" class="nav-item ">403 error</a>
-                      <a href="../404.html" class="nav-item ">404 error</a>
-                      <a href="../500.html" class="nav-item ">500 error</a>
-                      <a href="../503.html" class="nav-item ">503 error</a>
-                      <a href="../email.html" class="nav-item ">Email</a>
-                      <a href="../empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../profile.html" class="dropdown-item ">Profile</a>
+                      <a href="../login.html" class="dropdown-item ">Login</a>
+                      <a href="../register.html" class="dropdown-item ">Register</a>
+                      <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="../400.html" class="dropdown-item ">400 error</a>
+                      <a href="../401.html" class="dropdown-item ">401 error</a>
+                      <a href="../403.html" class="dropdown-item ">403 error</a>
+                      <a href="../404.html" class="dropdown-item ">404 error</a>
+                      <a href="../500.html" class="dropdown-item ">500 error</a>
+                      <a href="../503.html" class="dropdown-item ">503 error</a>
+                      <a href="../email.html" class="dropdown-item ">Email</a>
+                      <a href="../empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="../rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="page-header">
              <h1 class="page-title">
@@ -219,94 +224,134 @@
                      <div class="example">
                        <div class="form-group">
                          <label class="form-label">Color Input</label>
-                          <div class="d-flex">
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="azure" class="colorinput-input" />
-                              <span class="colorinput-color bg-azure"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="indigo" class="colorinput-input" checked="" />
-                              <span class="colorinput-color bg-indigo"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="purple" class="colorinput-input" />
-                              <span class="colorinput-color bg-purple"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="pink" class="colorinput-input" />
-                              <span class="colorinput-color bg-pink"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="red" class="colorinput-input" />
-                              <span class="colorinput-color bg-red"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="orange" class="colorinput-input" />
-                              <span class="colorinput-color bg-orange"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="yellow" class="colorinput-input" />
-                              <span class="colorinput-color bg-yellow"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="lime" class="colorinput-input" />
-                              <span class="colorinput-color bg-lime"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="green" class="colorinput-input" />
-                              <span class="colorinput-color bg-green"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="teal" class="colorinput-input" />
-                              <span class="colorinput-color bg-teal"></span>
-                            </label>
+                          <div class="row gutters-xs">
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="azure" class="colorinput-input" />
+                                <span class="colorinput-color bg-azure"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="indigo" class="colorinput-input" checked="" />
+                                <span class="colorinput-color bg-indigo"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="purple" class="colorinput-input" />
+                                <span class="colorinput-color bg-purple"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="pink" class="colorinput-input" />
+                                <span class="colorinput-color bg-pink"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="red" class="colorinput-input" />
+                                <span class="colorinput-color bg-red"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="orange" class="colorinput-input" />
+                                <span class="colorinput-color bg-orange"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="yellow" class="colorinput-input" />
+                                <span class="colorinput-color bg-yellow"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="lime" class="colorinput-input" />
+                                <span class="colorinput-color bg-lime"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="green" class="colorinput-input" />
+                                <span class="colorinput-color bg-green"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="teal" class="colorinput-input" />
+                                <span class="colorinput-color bg-teal"></span>
+                              </label>
+                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="highlight">
                        <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Color Input<span class="nt">&lt;/label&gt;</span>
-  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"azure"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-azure"</span><span class="nt">&gt;&lt;/span&gt;</span>
-    <span class="nt">&lt;/label&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"indigo"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-indigo"</span><span class="nt">&gt;&lt;/span&gt;</span>
-    <span class="nt">&lt;/label&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"purple"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-purple"</span><span class="nt">&gt;&lt;/span&gt;</span>
-    <span class="nt">&lt;/label&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"pink"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-pink"</span><span class="nt">&gt;&lt;/span&gt;</span>
-    <span class="nt">&lt;/label&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"red"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-red"</span><span class="nt">&gt;&lt;/span&gt;</span>
-    <span class="nt">&lt;/label&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"orange"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-orange"</span><span class="nt">&gt;&lt;/span&gt;</span>
-    <span class="nt">&lt;/label&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"yellow"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-yellow"</span><span class="nt">&gt;&lt;/span&gt;</span>
-    <span class="nt">&lt;/label&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"lime"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-lime"</span><span class="nt">&gt;&lt;/span&gt;</span>
-    <span class="nt">&lt;/label&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"green"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
-    <span class="nt">&lt;/label&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"teal"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-teal"</span><span class="nt">&gt;&lt;/span&gt;</span>
-    <span class="nt">&lt;/label&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row gutters-xs"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"azure"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-azure"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"indigo"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-indigo"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"purple"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-purple"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"pink"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-pink"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"red"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-red"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"orange"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-orange"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"yellow"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-yellow"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"lime"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-lime"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"green"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"teal"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-teal"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
                      </div>
@@ -590,7 +635,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/docs/grid.html
+++ b/dist/docs/grid.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Grid utilities - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '..'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="../assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="../index.html">
-                <img src="../demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="../index.html">
+                <img src="../demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(../demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="../cards.html" class="nav-item ">Cards design</a>
-                      <a href="../charts.html" class="nav-item ">Charts</a>
-                      <a href="../pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="../charts.html" class="dropdown-item ">Charts</a>
+                      <a href="../pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="../maps.html" class="nav-item ">Maps</a>
-                      <a href="../icons.html" class="nav-item ">Icons</a>
-                      <a href="../store.html" class="nav-item ">Store</a>
-                      <a href="../blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../maps.html" class="dropdown-item ">Maps</a>
+                      <a href="../icons.html" class="dropdown-item ">Icons</a>
+                      <a href="../store.html" class="dropdown-item ">Store</a>
+                      <a href="../blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="../profile.html" class="nav-item ">Profile</a>
-                      <a href="../login.html" class="nav-item ">Login</a>
-                      <a href="../register.html" class="nav-item ">Register</a>
-                      <a href="../forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="../400.html" class="nav-item ">400 error</a>
-                      <a href="../104.html" class="nav-item ">401 error</a>
-                      <a href="../403.html" class="nav-item ">403 error</a>
-                      <a href="../404.html" class="nav-item ">404 error</a>
-                      <a href="../500.html" class="nav-item ">500 error</a>
-                      <a href="../503.html" class="nav-item ">503 error</a>
-                      <a href="../email.html" class="nav-item ">Email</a>
-                      <a href="../empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../profile.html" class="dropdown-item ">Profile</a>
+                      <a href="../login.html" class="dropdown-item ">Login</a>
+                      <a href="../register.html" class="dropdown-item ">Register</a>
+                      <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="../400.html" class="dropdown-item ">400 error</a>
+                      <a href="../401.html" class="dropdown-item ">401 error</a>
+                      <a href="../403.html" class="dropdown-item ">403 error</a>
+                      <a href="../404.html" class="dropdown-item ">404 error</a>
+                      <a href="../500.html" class="dropdown-item ">500 error</a>
+                      <a href="../503.html" class="dropdown-item ">503 error</a>
+                      <a href="../email.html" class="dropdown-item ">Email</a>
+                      <a href="../empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="../rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="page-header">
              <h1 class="page-title">
@@ -463,7 +468,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/docs/index.html
+++ b/dist/docs/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Introduction - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '..'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="../assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="../index.html">
-                <img src="../demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="../index.html">
+                <img src="../demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(../demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="../cards.html" class="nav-item ">Cards design</a>
-                      <a href="../charts.html" class="nav-item ">Charts</a>
-                      <a href="../pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="../charts.html" class="dropdown-item ">Charts</a>
+                      <a href="../pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="../maps.html" class="nav-item ">Maps</a>
-                      <a href="../icons.html" class="nav-item ">Icons</a>
-                      <a href="../store.html" class="nav-item ">Store</a>
-                      <a href="../blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../maps.html" class="dropdown-item ">Maps</a>
+                      <a href="../icons.html" class="dropdown-item ">Icons</a>
+                      <a href="../store.html" class="dropdown-item ">Store</a>
+                      <a href="../blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="../profile.html" class="nav-item ">Profile</a>
-                      <a href="../login.html" class="nav-item ">Login</a>
-                      <a href="../register.html" class="nav-item ">Register</a>
-                      <a href="../forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="../400.html" class="nav-item ">400 error</a>
-                      <a href="../104.html" class="nav-item ">401 error</a>
-                      <a href="../403.html" class="nav-item ">403 error</a>
-                      <a href="../404.html" class="nav-item ">404 error</a>
-                      <a href="../500.html" class="nav-item ">500 error</a>
-                      <a href="../503.html" class="nav-item ">503 error</a>
-                      <a href="../email.html" class="nav-item ">Email</a>
-                      <a href="../empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../profile.html" class="dropdown-item ">Profile</a>
+                      <a href="../login.html" class="dropdown-item ">Login</a>
+                      <a href="../register.html" class="dropdown-item ">Register</a>
+                      <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="../400.html" class="dropdown-item ">400 error</a>
+                      <a href="../401.html" class="dropdown-item ">401 error</a>
+                      <a href="../403.html" class="dropdown-item ">403 error</a>
+                      <a href="../404.html" class="dropdown-item ">404 error</a>
+                      <a href="../500.html" class="dropdown-item ">500 error</a>
+                      <a href="../503.html" class="dropdown-item ">503 error</a>
+                      <a href="../email.html" class="dropdown-item ">Email</a>
+                      <a href="../empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="../rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="page-header">
              <h1 class="page-title">
@@ -286,7 +291,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/docs/tags.html
+++ b/dist/docs/tags.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Tags - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '..'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="../assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="../index.html">
-                <img src="../demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="../index.html">
+                <img src="../demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(../demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="../cards.html" class="nav-item ">Cards design</a>
-                      <a href="../charts.html" class="nav-item ">Charts</a>
-                      <a href="../pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="../charts.html" class="dropdown-item ">Charts</a>
+                      <a href="../pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="../maps.html" class="nav-item ">Maps</a>
-                      <a href="../icons.html" class="nav-item ">Icons</a>
-                      <a href="../store.html" class="nav-item ">Store</a>
-                      <a href="../blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../maps.html" class="dropdown-item ">Maps</a>
+                      <a href="../icons.html" class="dropdown-item ">Icons</a>
+                      <a href="../store.html" class="dropdown-item ">Store</a>
+                      <a href="../blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="../profile.html" class="nav-item ">Profile</a>
-                      <a href="../login.html" class="nav-item ">Login</a>
-                      <a href="../register.html" class="nav-item ">Register</a>
-                      <a href="../forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="../400.html" class="nav-item ">400 error</a>
-                      <a href="../104.html" class="nav-item ">401 error</a>
-                      <a href="../403.html" class="nav-item ">403 error</a>
-                      <a href="../404.html" class="nav-item ">404 error</a>
-                      <a href="../500.html" class="nav-item ">500 error</a>
-                      <a href="../503.html" class="nav-item ">503 error</a>
-                      <a href="../email.html" class="nav-item ">Email</a>
-                      <a href="../empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../profile.html" class="dropdown-item ">Profile</a>
+                      <a href="../login.html" class="dropdown-item ">Login</a>
+                      <a href="../register.html" class="dropdown-item ">Register</a>
+                      <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="../400.html" class="dropdown-item ">400 error</a>
+                      <a href="../401.html" class="dropdown-item ">401 error</a>
+                      <a href="../403.html" class="dropdown-item ">403 error</a>
+                      <a href="../404.html" class="dropdown-item ">404 error</a>
+                      <a href="../500.html" class="dropdown-item ">500 error</a>
+                      <a href="../503.html" class="dropdown-item ">503 error</a>
+                      <a href="../email.html" class="dropdown-item ">Email</a>
+                      <a href="../empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="../rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="page-header">
              <h1 class="page-title">
@@ -554,7 +559,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/docs/typography.html
+++ b/dist/docs/typography.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Typography - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '..'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="../assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="../index.html">
-                <img src="../demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="../index.html">
+                <img src="../demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(../demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="../cards.html" class="nav-item ">Cards design</a>
-                      <a href="../charts.html" class="nav-item ">Charts</a>
-                      <a href="../pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="../charts.html" class="dropdown-item ">Charts</a>
+                      <a href="../pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="../maps.html" class="nav-item ">Maps</a>
-                      <a href="../icons.html" class="nav-item ">Icons</a>
-                      <a href="../store.html" class="nav-item ">Store</a>
-                      <a href="../blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../maps.html" class="dropdown-item ">Maps</a>
+                      <a href="../icons.html" class="dropdown-item ">Icons</a>
+                      <a href="../store.html" class="dropdown-item ">Store</a>
+                      <a href="../blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="../profile.html" class="nav-item ">Profile</a>
-                      <a href="../login.html" class="nav-item ">Login</a>
-                      <a href="../register.html" class="nav-item ">Register</a>
-                      <a href="../forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="../400.html" class="nav-item ">400 error</a>
-                      <a href="../104.html" class="nav-item ">401 error</a>
-                      <a href="../403.html" class="nav-item ">403 error</a>
-                      <a href="../404.html" class="nav-item ">404 error</a>
-                      <a href="../500.html" class="nav-item ">500 error</a>
-                      <a href="../503.html" class="nav-item ">503 error</a>
-                      <a href="../email.html" class="nav-item ">Email</a>
-                      <a href="../empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../profile.html" class="dropdown-item ">Profile</a>
+                      <a href="../login.html" class="dropdown-item ">Login</a>
+                      <a href="../register.html" class="dropdown-item ">Register</a>
+                      <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="../400.html" class="dropdown-item ">400 error</a>
+                      <a href="../401.html" class="dropdown-item ">401 error</a>
+                      <a href="../403.html" class="dropdown-item ">403 error</a>
+                      <a href="../404.html" class="dropdown-item ">404 error</a>
+                      <a href="../500.html" class="dropdown-item ">500 error</a>
+                      <a href="../503.html" class="dropdown-item ">503 error</a>
+                      <a href="../email.html" class="dropdown-item ">Email</a>
+                      <a href="../empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="../rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="page-header">
              <h1 class="page-title">
@@ -350,7 +355,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/email.html
+++ b/dist/email.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Email - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="./index.html">
-                <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="./index.html">
+                <img src="./demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="./cards.html" class="nav-item ">Cards design</a>
-                      <a href="./charts.html" class="nav-item ">Charts</a>
-                      <a href="./pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="./charts.html" class="dropdown-item ">Charts</a>
+                      <a href="./pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="./maps.html" class="nav-item ">Maps</a>
-                      <a href="./icons.html" class="nav-item ">Icons</a>
-                      <a href="./store.html" class="nav-item ">Store</a>
-                      <a href="./blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./maps.html" class="dropdown-item ">Maps</a>
+                      <a href="./icons.html" class="dropdown-item ">Icons</a>
+                      <a href="./store.html" class="dropdown-item ">Store</a>
+                      <a href="./blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="./profile.html" class="nav-item ">Profile</a>
-                      <a href="./login.html" class="nav-item ">Login</a>
-                      <a href="./register.html" class="nav-item ">Register</a>
-                      <a href="./forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="./400.html" class="nav-item ">400 error</a>
-                      <a href="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="row">
              <div class="col-md-3">
@@ -288,7 +293,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/empty.html
+++ b/dist/empty.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Empty page - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="./index.html">
-                <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="./index.html">
+                <img src="./demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="./cards.html" class="nav-item ">Cards design</a>
-                      <a href="./charts.html" class="nav-item ">Charts</a>
-                      <a href="./pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="./charts.html" class="dropdown-item ">Charts</a>
+                      <a href="./pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="./maps.html" class="nav-item ">Maps</a>
-                      <a href="./icons.html" class="nav-item ">Icons</a>
-                      <a href="./store.html" class="nav-item ">Store</a>
-                      <a href="./blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./maps.html" class="dropdown-item ">Maps</a>
+                      <a href="./icons.html" class="dropdown-item ">Icons</a>
+                      <a href="./store.html" class="dropdown-item ">Store</a>
+                      <a href="./blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="./profile.html" class="nav-item ">Profile</a>
-                      <a href="./login.html" class="nav-item ">Login</a>
-                      <a href="./register.html" class="nav-item ">Register</a>
-                      <a href="./forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="./400.html" class="nav-item ">400 error</a>
-                      <a href="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link active" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item active">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
        </div>
      </div>
      <div class="footer">
@@ -221,7 +226,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/forgot-password.html
+++ b/dist/forgot-password.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Forgot password - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
--- a/dist/form-elements.html
+++ b/dist/form-elements.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="./index.html">
-                <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="./index.html">
+                <img src="./demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="./cards.html" class="nav-item ">Cards design</a>
-                      <a href="./charts.html" class="nav-item ">Charts</a>
-                      <a href="./pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="./charts.html" class="dropdown-item ">Charts</a>
+                      <a href="./pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="./maps.html" class="nav-item ">Maps</a>
-                      <a href="./icons.html" class="nav-item ">Icons</a>
-                      <a href="./store.html" class="nav-item ">Store</a>
-                      <a href="./blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./maps.html" class="dropdown-item ">Maps</a>
+                      <a href="./icons.html" class="dropdown-item ">Icons</a>
+                      <a href="./store.html" class="dropdown-item ">Store</a>
+                      <a href="./blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="./profile.html" class="nav-item ">Profile</a>
-                      <a href="./login.html" class="nav-item ">Login</a>
-                      <a href="./register.html" class="nav-item ">Register</a>
-                      <a href="./forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="./400.html" class="nav-item ">400 error</a>
-                      <a href="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="./form-elements.html" class="nav-link active"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="row">
              <div class="col-12">
@@ -288,47 +293,67 @@
                        </div>
                        <div class="form-group">
                          <label class="form-label">Color Input</label>
-                          <div class="d-flex">
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="azure" class="colorinput-input" />
-                              <span class="colorinput-color bg-azure"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="indigo" class="colorinput-input"  checked/>
-                              <span class="colorinput-color bg-indigo"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="purple" class="colorinput-input" />
-                              <span class="colorinput-color bg-purple"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="pink" class="colorinput-input" />
-                              <span class="colorinput-color bg-pink"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="red" class="colorinput-input" />
-                              <span class="colorinput-color bg-red"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="orange" class="colorinput-input" />
-                              <span class="colorinput-color bg-orange"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="yellow" class="colorinput-input" />
-                              <span class="colorinput-color bg-yellow"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="lime" class="colorinput-input" />
-                              <span class="colorinput-color bg-lime"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="green" class="colorinput-input" />
-                              <span class="colorinput-color bg-green"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="teal" class="colorinput-input" />
-                              <span class="colorinput-color bg-teal"></span>
-                            </label>
+                          <div class="row gutters-xs">
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="azure" class="colorinput-input" />
+                                <span class="colorinput-color bg-azure"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="indigo" class="colorinput-input"  checked/>
+                                <span class="colorinput-color bg-indigo"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="purple" class="colorinput-input" />
+                                <span class="colorinput-color bg-purple"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="pink" class="colorinput-input" />
+                                <span class="colorinput-color bg-pink"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="red" class="colorinput-input" />
+                                <span class="colorinput-color bg-red"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="orange" class="colorinput-input" />
+                                <span class="colorinput-color bg-orange"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="yellow" class="colorinput-input" />
+                                <span class="colorinput-color bg-yellow"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="lime" class="colorinput-input" />
+                                <span class="colorinput-color bg-lime"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="green" class="colorinput-input" />
+                                <span class="colorinput-color bg-green"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="teal" class="colorinput-input" />
+                                <span class="colorinput-color bg-teal"></span>
+                              </label>
+                            </div>
                          </div>
                        </div>
                        <div class="form-group">
@@ -574,10 +599,10 @@
                    </div>
                    <div class="col-md-6 col-lg-4">
                      <div class="form-group">
-                        <label class="form-label">Radios</label>
+                        <div class="form-label">Radios</div>
                        <div class="custom-controls-stacked">
                          <label class="custom-control custom-radio">
-                            <input type="radio" class="custom-control-input" name="example-radios" value="option1" checked="">
+                            <input type="radio" class="custom-control-input" name="example-radios" value="option1" checked>
                            <div class="custom-control-label">Option 1</div>
                          </label>
                          <label class="custom-control custom-radio">
@@ -597,57 +622,56 @@
                      <div class="form-group">
                        <div class="form-label">Inline Radios</div>
                        <div class="custom-controls-stacked">
-                          <div class="custom-control custom-radio">
-                            <input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked="">
+                          <label class="custom-control custom-radio custom-control-inline">
+                            <input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked>
                            <span class="custom-control-label">Option 1</span>
-                          </div>
-                          <div class="custom-control custom-radio">
+                          </label>
+                          <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" name="example-inline-radios" value="option2">
                            <span class="custom-control-label">Option 2</span>
-                          </div>
-                          <div class="custom-control custom-radio">
+                          </label>
+                          <label class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" name="example-inline-radios" value="option3">
                            <span class="custom-control-label">Option 3</span>
-                          </div>
+                          </label>
                        </div>
                      </div>
                      <div class="form-group">
-                        <label class="form-label">Checkboxes</label>
+                        <div class="form-label">Checkboxes</div>
                        <div class="custom-controls-stacked">
-                          <div class="custom-control custom-checkbox">
-                            <input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked="">
-                            <label class="custom-control-label">Option 1</label>
-                          </div>
-                          <div class="custom-control custom-checkbox">
+                          <label class="custom-control custom-checkbox">
+                            <input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked>
+                            <span class="custom-control-label">Option 1</span>
+                          </label>
+                          <label class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" name="example-checkbox2" value="option2">
-                            <label class="custom-control-label">Option 2</label>
-                          </div>
-                          <div class="custom-control custom-checkbox">
+                            <span class="custom-control-label">Option 2</span>
+                          </label>
+                          <label class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" name="example-checkbox3" value="option3" disabled>
-                            <label class="custom-control-label">Option Disabled</label>
-                          </div>
-                          <div class="custom-control custom-checkbox">
+                            <span class="custom-control-label">Option Disabled</span>
+                          </label>
+                          <label class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" name="example-checkbox4" value="option4" checked disabled>
-                            <label class="custom-control-label">Option Disabled Checked</label>
-                          </div>
+                            <span class="custom-control-label">Option Disabled Checked</span>
+                          </label>
                        </div>
                      </div>
                      <div class="form-group">
                        <div class="form-label">Inline Checkboxes</div>
-                        <div class="custom-controls-stacked">
-                          <div class="custom-control custom-checkbox">
-                            <input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1"
-								   checked="">
-                            <label class="custom-control-label">Option 1</label>
-                          </div>
-                          <div class="custom-control custom-checkbox">
+                        <div>
+                          <label class="custom-control custom-checkbox custom-control-inline">
+                            <input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1" checked>
+                            <span class="custom-control-label">Option 1</span>
+                          </label>
+                          <label class="custom-control custom-checkbox custom-control-inline">
                            <input type="checkbox" class="custom-control-input" name="example-inline-checkbox2" value="option2">
-                            <label class="custom-control-label">Option 2</label>
-                          </div>
-                          <div class="custom-control custom-checkbox">
+                            <span class="custom-control-label">Option 2</span>
+                          </label>
+                          <label class="custom-control custom-checkbox custom-control-inline">
                            <input type="checkbox" class="custom-control-input" name="example-inline-checkbox3" value="option3">
-                            <label class="custom-control-label">Option 3</label>
-                          </div>
+                            <span class="custom-control-label">Option 3</span>
+                          </label>
                        </div>
                      </div>
                      <div class="form-group">
@@ -1450,7 +1474,7 @@ But that's the difference in our opinions.</textarea>
    <footer class="footer">
      <div class="container">
        <div class="row align-items-center flex-row-reverse">
-          <div class="col-auto ml-auto">
+          <div class="col-auto ml-lg-auto">
            <div class="row align-items-center">
              <div class="col-auto">
                <ul class="list-inline list-inline-dots mb-0">
--- a/dist/gallery.html
+++ b/dist/gallery.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="./index.html">
-                <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="./index.html">
+                <img src="./demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="./cards.html" class="nav-item ">Cards design</a>
-                      <a href="./charts.html" class="nav-item ">Charts</a>
-                      <a href="./pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="./charts.html" class="dropdown-item ">Charts</a>
+                      <a href="./pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="./maps.html" class="nav-item ">Maps</a>
-                      <a href="./icons.html" class="nav-item ">Icons</a>
-                      <a href="./store.html" class="nav-item ">Store</a>
-                      <a href="./blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./maps.html" class="dropdown-item ">Maps</a>
+                      <a href="./icons.html" class="dropdown-item ">Icons</a>
+                      <a href="./store.html" class="dropdown-item ">Store</a>
+                      <a href="./blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="./profile.html" class="nav-item ">Profile</a>
-                      <a href="./login.html" class="nav-item ">Login</a>
-                      <a href="./register.html" class="nav-item ">Register</a>
-                      <a href="./forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="./400.html" class="nav-item ">400 error</a>
-                      <a href="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="page-header">
              <h1 class="page-title">
@@ -459,7 +464,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/icons.html
+++ b/dist/icons.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Icons - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="./index.html">
-                <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="./index.html">
+                <img src="./demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="./cards.html" class="nav-item ">Cards design</a>
-                      <a href="./charts.html" class="nav-item ">Charts</a>
-                      <a href="./pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="./charts.html" class="dropdown-item ">Charts</a>
+                      <a href="./pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link active"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="./maps.html" class="nav-item ">Maps</a>
-                      <a href="./icons.html" class="nav-item active">Icons</a>
-                      <a href="./store.html" class="nav-item ">Store</a>
-                      <a href="./blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link active" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./maps.html" class="dropdown-item ">Maps</a>
+                      <a href="./icons.html" class="dropdown-item active">Icons</a>
+                      <a href="./store.html" class="dropdown-item ">Store</a>
+                      <a href="./blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="./profile.html" class="nav-item ">Profile</a>
-                      <a href="./login.html" class="nav-item ">Login</a>
-                      <a href="./register.html" class="nav-item ">Register</a>
-                      <a href="./forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="./400.html" class="nav-item ">400 error</a>
-                      <a href="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="page-header">
              <h1 class="page-title">
@@ -1804,7 +1809,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/index.html
+++ b/dist/index.html
--- a/dist/invoice.html
+++ b/dist/invoice.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Invoice - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="./index.html">
-                <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="./index.html">
+                <img src="./demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="./cards.html" class="nav-item ">Cards design</a>
-                      <a href="./charts.html" class="nav-item ">Charts</a>
-                      <a href="./pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="./charts.html" class="dropdown-item ">Charts</a>
+                      <a href="./pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="./maps.html" class="nav-item ">Maps</a>
-                      <a href="./icons.html" class="nav-item ">Icons</a>
-                      <a href="./store.html" class="nav-item ">Store</a>
-                      <a href="./blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./maps.html" class="dropdown-item ">Maps</a>
+                      <a href="./icons.html" class="dropdown-item ">Icons</a>
+                      <a href="./store.html" class="dropdown-item ">Store</a>
+                      <a href="./blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="./profile.html" class="nav-item ">Profile</a>
-                      <a href="./login.html" class="nav-item ">Login</a>
-                      <a href="./register.html" class="nav-item ">Register</a>
-                      <a href="./forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="./400.html" class="nav-item ">400 error</a>
-                      <a href="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="card">
              <div class="card-header">
@@ -317,7 +322,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/login.html
+++ b/dist/login.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Login - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
@@ -55,7 +55,7 @@
                  <div class="form-group">
                    <label class="form-label">
                      Password
-                      <a href="./forgot-password.html" class="pull-right small">I forgot password</a>
+                      <a href="./forgot-password.html" class="float-right small">I forgot password</a>
                    </label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                  </div>
--- a/dist/lookup.html
+++ b/dist/lookup.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Lookup company - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="./index.html">
-                <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="./index.html">
+                <img src="./demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="./cards.html" class="nav-item ">Cards design</a>
-                      <a href="./charts.html" class="nav-item ">Charts</a>
-                      <a href="./pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="./charts.html" class="dropdown-item ">Charts</a>
+                      <a href="./pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="./maps.html" class="nav-item ">Maps</a>
-                      <a href="./icons.html" class="nav-item ">Icons</a>
-                      <a href="./store.html" class="nav-item ">Store</a>
-                      <a href="./blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./maps.html" class="dropdown-item ">Maps</a>
+                      <a href="./icons.html" class="dropdown-item ">Icons</a>
+                      <a href="./store.html" class="dropdown-item ">Store</a>
+                      <a href="./blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="./profile.html" class="nav-item ">Profile</a>
-                      <a href="./login.html" class="nav-item ">Login</a>
-                      <a href="./register.html" class="nav-item ">Register</a>
-                      <a href="./forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="./400.html" class="nav-item ">400 error</a>
-                      <a href="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="page-header">
              <h1 class="page-title">
@@ -426,7 +431,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/maps.html
+++ b/dist/maps.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Maps - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="./index.html">
-                <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="./index.html">
+                <img src="./demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="./cards.html" class="nav-item ">Cards design</a>
-                      <a href="./charts.html" class="nav-item ">Charts</a>
-                      <a href="./pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="./charts.html" class="dropdown-item ">Charts</a>
+                      <a href="./pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="./maps.html" class="nav-item ">Maps</a>
-                      <a href="./icons.html" class="nav-item ">Icons</a>
-                      <a href="./store.html" class="nav-item ">Store</a>
-                      <a href="./blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./maps.html" class="dropdown-item ">Maps</a>
+                      <a href="./icons.html" class="dropdown-item ">Icons</a>
+                      <a href="./store.html" class="dropdown-item ">Store</a>
+                      <a href="./blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="./profile.html" class="nav-item ">Profile</a>
-                      <a href="./login.html" class="nav-item ">Login</a>
-                      <a href="./register.html" class="nav-item ">Register</a>
-                      <a href="./forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="./400.html" class="nav-item ">400 error</a>
-                      <a href="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="map-header">
            <div class="map-header-layer" id="map-background"></div>
          </div>
@@ -537,7 +542,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/pagination.html
+++ b/dist/pagination.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Pagination - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="./index.html">
-                <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="./index.html">
+                <img src="./demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="./cards.html" class="nav-item ">Cards design</a>
-                      <a href="./charts.html" class="nav-item ">Charts</a>
-                      <a href="./pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="./charts.html" class="dropdown-item ">Charts</a>
+                      <a href="./pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="./maps.html" class="nav-item ">Maps</a>
-                      <a href="./icons.html" class="nav-item ">Icons</a>
-                      <a href="./store.html" class="nav-item ">Store</a>
-                      <a href="./blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./maps.html" class="dropdown-item ">Maps</a>
+                      <a href="./icons.html" class="dropdown-item ">Icons</a>
+                      <a href="./store.html" class="dropdown-item ">Store</a>
+                      <a href="./blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="./profile.html" class="nav-item ">Profile</a>
-                      <a href="./login.html" class="nav-item ">Login</a>
-                      <a href="./register.html" class="nav-item ">Register</a>
-                      <a href="./forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="./400.html" class="nav-item ">400 error</a>
-                      <a href="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div>
              <ul class="pagination ">
@@ -393,7 +398,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/pricing-cards.html
+++ b/dist/pricing-cards.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Pricing cards - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="./index.html">
-                <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="./index.html">
+                <img src="./demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link active"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="./cards.html" class="nav-item ">Cards design</a>
-                      <a href="./charts.html" class="nav-item ">Charts</a>
-                      <a href="./pricing-cards.html" class="nav-item active">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link active" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="./charts.html" class="dropdown-item ">Charts</a>
+                      <a href="./pricing-cards.html" class="dropdown-item active">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="./maps.html" class="nav-item ">Maps</a>
-                      <a href="./icons.html" class="nav-item ">Icons</a>
-                      <a href="./store.html" class="nav-item ">Store</a>
-                      <a href="./blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./maps.html" class="dropdown-item ">Maps</a>
+                      <a href="./icons.html" class="dropdown-item ">Icons</a>
+                      <a href="./store.html" class="dropdown-item ">Store</a>
+                      <a href="./blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="./profile.html" class="nav-item ">Profile</a>
-                      <a href="./login.html" class="nav-item ">Login</a>
-                      <a href="./register.html" class="nav-item ">Register</a>
-                      <a href="./forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="./400.html" class="nav-item ">400 error</a>
-                      <a href="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="page-header">
              <h1 class="page-title">
@@ -303,7 +308,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/profile.html
+++ b/dist/profile.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Profile - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="./index.html">
-                <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="./index.html">
+                <img src="./demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="./cards.html" class="nav-item ">Cards design</a>
-                      <a href="./charts.html" class="nav-item ">Charts</a>
-                      <a href="./pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="./charts.html" class="dropdown-item ">Charts</a>
+                      <a href="./pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="./maps.html" class="nav-item ">Maps</a>
-                      <a href="./icons.html" class="nav-item ">Icons</a>
-                      <a href="./store.html" class="nav-item ">Store</a>
-                      <a href="./blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./maps.html" class="dropdown-item ">Maps</a>
+                      <a href="./icons.html" class="dropdown-item ">Icons</a>
+                      <a href="./store.html" class="dropdown-item ">Store</a>
+                      <a href="./blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link active"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="./profile.html" class="nav-item active">Profile</a>
-                      <a href="./login.html" class="nav-item ">Login</a>
-                      <a href="./register.html" class="nav-item ">Register</a>
-                      <a href="./forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="./400.html" class="nav-item ">400 error</a>
-                      <a href="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link active" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item active">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="row">
              <div class="col-lg-4">
@@ -465,7 +470,7 @@ But that's the difference in our opinions.</textarea>
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/register.html
+++ b/dist/register.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Register - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
--- a/dist/rtl.html
+++ b/dist/rtl.html
@@ -0,0 +1,350 @@
+<!doctype html>
+<html lang="en" dir="rtl">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta http-equiv="Content-Language" content="en" />
+    <meta name="msapplication-TileColor" content="#2d89ef">
+    <meta name="theme-color" content="#4188c9">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="HandheldFriendly" content="True">
+    <meta name="MobileOptimized" content="320">
+    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
+    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
+    <title>RTL mode - tabler.github.io - a responsive, flat and full featured admin template</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
+    <script src="./assets/js/require.min.js"></script>
+    <script>
+      requirejs.config({
+          baseUrl: '.'
+      });
+    </script>
+    <!-- Dashboard Core -->
+    <link href="./assets/css/dashboard.rtl.css" rel="stylesheet" />
+    <script src="./assets/js/dashboard.js"></script>
+    <!-- c3.js Charts Plugin -->
+    <link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
+    <script src="./assets/plugins/charts-c3/plugin.js"></script>
+    <!-- Google Maps Plugin -->
+    <link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
+    <script src="./assets/plugins/maps-google/plugin.js"></script>
+    <!-- Input Mask Plugin -->
+    <script src="./assets/plugins/input-mask/plugin.js"></script>
+  </head>
+  <body class="">
+    <div class="page">
+      <div class="page-main">
+        <div class="header py-4">
+          <div class="container">
+            <div class="d-flex">
+              <a class="header-brand" href="./index.html">
+                <img src="./demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
+              </a>
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
+                </div>
+                <div class="dropdown d-none d-md-flex">
+                  <a class="nav-link icon" data-toggle="dropdown">
+                    <i class="fe fe-bell"></i>
+                    <span class="nav-unread"></span>
+                  </a>
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
+                  </div>
+                </div>
+                <div class="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
+                    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
+                    <span class="ml-2 d-none d-lg-block">
+                      <span class="text-default">Jane Pearson</span>
+                      <small class="text-muted d-block mt-1">Administrator</small>
+                    </span>
+                  </a>
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-user"></i> Profile
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <span class="float-right"><span class="badge badge-primary">6</span></span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-send"></i> Message
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
+                  </div>
+                </div>
+              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
+            </div>
+          </div>
+        </div>
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
+          <div class="container">
+            <div class="row align-items-center">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
+                  <li class="nav-item">
+                    <a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="./charts.html" class="dropdown-item ">Charts</a>
+                      <a href="./pricing-cards.html" class="dropdown-item ">Pricing cards</a>
+                    </div>
+                  </li>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./maps.html" class="dropdown-item ">Maps</a>
+                      <a href="./icons.html" class="dropdown-item ">Icons</a>
+                      <a href="./store.html" class="dropdown-item ">Store</a>
+                      <a href="./blog.html" class="dropdown-item ">Blog</a>
+                    </div>
+                  </li>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link active" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item active">RTL mode</a>
+                    </div>
+                  </li>
+                  <li class="nav-item dropdown">
+                    <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="./gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="./docs/index.html" class="nav-link"><i class="fe fe-file-text"></i> Documentation</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="my-3 my-md-5">
+          <div class="container">
+            <div class="page-header">
+              <h1 class="page-title">
+                RTL mode
+              </h1>
+            </div>
+            <div class="row">
+              <div class="col-6">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">عنوان البطاقة</h3>
+                    <div class="card-options">
+                      <a href="#" class="card-options-collapse" data-toggle="card-collapse"><i class="fe fe-chevron-up"></i></a>
+                      <a href="#" class="card-options-remove" data-toggle="card-remove"><i class="fe fe-x"></i></a>
+                    </div>
+                  </div>
+                  <div class="card-body">
+                    لكن لا بد أن أوضح لك أن كل هذه الأفكار المغلوطة حول استنكار  النشوة وتمجيد الألم نشأت بالفعل، وسأعرض لك التفاصيل لتكتشف حقيقة وأساس تلك السعادة البشرية، فلا أحد يرفض أو يكره أو يتجنب الشعور بالسعادة، ولكن بفضل هؤلاء الأشخاص الذين لا يدركون بأن السعادة لا بد أن نستشعرها بصورة أكثر عقلانية ومنطقية فيعرضهم هذا لمواجهة الظروف الأليمة، وأكرر بأنه لا يوجد من يرغب في الحب ونيل المنال ويتلذذ بالآلام، الألم هو الألم ولكن نتيجة لظروف ما قد تكمن السعاده فيما نتحمله من كد وأسي.
+                    و سأعرض مثال حي لهذا، من منا لم يتحمل جهد بدني شاق إلا من أجل الحصول على ميزة أو فائدة؟ ولكن من لديه الحق أن ينتقد شخص ما أراد أن يشعر بالسعادة التي لا تشوبها عواقب أليمة أو آخر أراد أن يتجنب الألم الذي ربما تنجم عنه بعض المتعة ؟
+                    علي الجانب الآخر نشجب ونستنكر هؤلاء الرجال المفتونون بنشوة اللحظة الهائمون في رغباتهم فلا يدركون ما يعقبها من الألم والأسي المحتم، واللوم كذلك يشمل هؤلاء الذين أخفقوا في واجباتهم نتيجة لضعف إرادتهم فيتساوي مع هؤلاء الذين يتجنبون وينأون عن تحمل الكدح والألم .
+                  </div>
+                </div>
+              </div>
+              <div class="col-6">
+                <div class="row">
+                  <div class="col-4">
+                    <div class="card">
+                      <div class="card-body p-3 text-center">
+                        <div class="text-right text-green">
+                          6%
+                          <i class="fe fe-chevron-up"></i>
+                        </div>
+                        <div class="h1 m-0">43</div>
+                        <div class="text-muted mb-4">تذاكر جديدة</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-4">
+                    <div class="card">
+                      <div class="card-body p-3 text-center">
+                        <div class="text-right text-red">
+                          -3%
+                          <i class="fe fe-chevron-down"></i>
+                        </div>
+                        <div class="h1 m-0">17</div>
+                        <div class="text-muted mb-4">مغلق اليوم</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-4">
+                    <div class="card">
+                      <div class="card-body p-3 text-center">
+                        <div class="text-right text-green">
+                          2%
+                          <i class="fe fe-chevron-up"></i>
+                        </div>
+                        <div class="h1 m-0">27.3K</div>
+                        <div class="text-muted mb-4">متابعون</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="col-12">
+                    <div class="card">
+                      <div class="card-body">
+                        <article class="media">
+                          <div class="mr-3">
+                            <div class="avatar avatar-xl" style="background-image: url(demo/faces/female/17.jpg)"></div>
+                          </div>
+                          <div class="media-body">
+                            <div class="content">
+                              <p class="h5">
+                                John Smith <small>@johnsmith</small> <small class="float-right text-muted">31 minutes ago</small>
+                              </p>
+                              <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
+                              </p>
+                            </div>
+                            <nav class="d-flex text-muted">
+                              <a href="#" class="icon mr-3">
+                                <i class="fe fe-repeat"></i>
+                              </a>
+                              <a href="#" class="icon mr-3">
+                                <i class="fe fe-twitter"></i> 24
+                              </a>
+                              <a href="#" class="icon mr-3">
+                                <i class="fe fe-heart"></i> 43
+                              </a>
+                              <a href="" class="text-muted ml-auto">
+                                5 notes
+                              </a>
+                            </nav>
+                          </div>
+                        </article>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <div class="container">
+          <div class="row">
+            <div class="col-lg-8">
+              <div class="row">
+                <div class="col-6 col-md-3">
+                  <ul class="list-unstyled mb-0">
+                    <li><a href="#">First link</a></li>
+                    <li><a href="#">Second link</a></li>
+                  </ul>
+                </div>
+                <div class="col-6 col-md-3">
+                  <ul class="list-unstyled mb-0">
+                    <li><a href="#">Third link</a></li>
+                    <li><a href="#">Fourth link</a></li>
+                  </ul>
+                </div>
+                <div class="col-6 col-md-3">
+                  <ul class="list-unstyled mb-0">
+                    <li><a href="#">Fifth link</a></li>
+                    <li><a href="#">Sixth link</a></li>
+                  </ul>
+                </div>
+                <div class="col-6 col-md-3">
+                  <ul class="list-unstyled mb-0">
+                    <li><a href="#">Other link</a></li>
+                    <li><a href="#">Last link</a></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div class="col-lg-4 mt-4 mt-lg-0">
+              Premium and Open Source dashboard template with responsive and high quality UI. For Free!
+            </div>
+          </div>
+        </div>
+      </div>
+      <footer class="footer">
+        <div class="container">
+          <div class="row align-items-center flex-row-reverse">
+            <div class="col-auto ml-lg-auto">
+              <div class="row align-items-center">
+                <div class="col-auto">
+                  <ul class="list-inline list-inline-dots mb-0">
+                    <li class="list-inline-item"><a href="./docs/index.html">Documentation</a></li>
+                    <li class="list-inline-item"><a href="./faq.html">FAQ</a></li>
+                  </ul>
+                </div>
+                <div class="col-auto">
+                  <a href="https://github.com/tabler/tabler" class="btn btn-outline-primary btn-sm">Source code</a>
+                </div>
+              </div>
+            </div>
+            <div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
+              Copyright © 2018 <a href=".">Tabler</a>. Theme by <a href="https://codecalm.net" target="_blank">codecalm.net</a> All rights reserved.
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
--- a/dist/sample-cards.html
+++ b/dist/sample-cards.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Homepage - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="./index.html">
-                <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="./index.html">
+                <img src="./demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="./cards.html" class="nav-item ">Cards design</a>
-                      <a href="./charts.html" class="nav-item ">Charts</a>
-                      <a href="./pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="./charts.html" class="dropdown-item ">Charts</a>
+                      <a href="./pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="./maps.html" class="nav-item ">Maps</a>
-                      <a href="./icons.html" class="nav-item ">Icons</a>
-                      <a href="./store.html" class="nav-item ">Store</a>
-                      <a href="./blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./maps.html" class="dropdown-item ">Maps</a>
+                      <a href="./icons.html" class="dropdown-item ">Icons</a>
+                      <a href="./store.html" class="dropdown-item ">Store</a>
+                      <a href="./blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="./profile.html" class="nav-item ">Profile</a>
-                      <a href="./login.html" class="nav-item ">Login</a>
-                      <a href="./register.html" class="nav-item ">Register</a>
-                      <a href="./forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="./400.html" class="nav-item ">400 error</a>
-                      <a href="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <!--<div class="container">-->
          <!--<nav class="breadcrumb breadcrumb-content">-->
          <!--<a class="breadcrumb-item" href="javascript:void(0)">Library</a>-->
@@ -212,7 +217,7 @@
                      <div class="media-body">
                        <div class="content">
                          <p class="h5">
-                            John Smith <small>@johnsmith</small> <small class="pull-right text-muted">31 minutes ago</small>
+                            John Smith <small>@johnsmith</small> <small class="float-right text-muted">31 minutes ago</small>
                          </p>
                          <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
@@ -245,7 +250,7 @@
                      <div class="media-body">
                        <div class="content">
                          <p class="h5">
-                            John Smith <small>@johnsmith</small> <small class="pull-right text-muted">31 minutes ago</small>
+                            John Smith <small>@johnsmith</small> <small class="float-right text-muted">31 minutes ago</small>
                          </p>
                          <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
@@ -280,7 +285,7 @@
                      <div class="media-body">
                        <div class="content">
                          <p class="h5">
-                            John Smith <small>@johnsmith</small> <small class="pull-right text-muted">31 minutes ago</small>
+                            John Smith <small>@johnsmith</small> <small class="float-right text-muted">31 minutes ago</small>
                          </p>
                          <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
@@ -899,15 +904,15 @@
                  <ul class="list-group card-list-group">
                    <li class="list-group-item list-group-item-red">
                      <a href="javascript:void(0)" class="text-inherit">Cras justo odio</a>
-                      <span class="pull-right text-muted">16 Dec</span>
+                      <span class="float-right text-muted">16 Dec</span>
                    </li>
                    <li class="list-group-item list-group-item-blue">
                      <a href="javascript:void(0)" class="text-inherit">Dapibus ac facilisis in</a>
-                      <span class="pull-right text-muted">22 Dec</span>
+                      <span class="float-right text-muted">22 Dec</span>
                    </li>
                    <li class="list-group-item list-group-item-red">
                      <a href="javascript:void(0)" class="text-inherit">Vestibulum at eros</a>
-                      <span class="pull-right text-muted">29 Dec</span>
+                      <span class="float-right text-muted">29 Dec</span>
                    </li>
                  </ul>
                </div>
@@ -1044,12 +1049,8 @@
                          <th>Created</th>
                          <th>Status</th>
                          <th>Price</th>
-                          <th>
-                            <span class="sr-only">Actions</span>
-                          </th>
-                          <th>
-                            <span class="sr-only">Download</span>
-                          </th>
+                          <th></th>
+                          <th></th>
                        </tr>
                      </thead>
                      <tbody>
@@ -1754,7 +1755,7 @@
                </div>
                <div class="card">
                  <div class="card-body">
-                    <div class="card-value pull-right text-warning">
+                    <div class="card-value float-right text-warning">
                      <div class="sparkline" data-sparkline="[10.5, 5.1, 14.7, 18.5, 2.5, 59.5, 79.6, 35.3, 70.1, 1.4, 8.1, 30.9, 31.8, 36.4, 28.8, 91.3]" data-sparkline-color="{"hex"=>"#467fcf", "name"=>"Blue"}" data-sparkline-type="bar"></div>
                    </div>
                    <h3 class="mb-1">$10M <i class="mdi mdi-trending-up text-success"></i></h3>
@@ -1763,7 +1764,7 @@
                </div>
                <div class="card">
                  <div class="card-body">
-                    <div class="card-value pull-right text-warning">
+                    <div class="card-value float-right text-warning">
                      <div class="sparkline" data-sparkline="[67.8, 57.4, 38.2, 77.9, 36.4, 39.0, 85.9, 24.9, 4.7, 40.6, 8.7, 36.9, 14.2, 53.0, 64.7, 28.2]" data-sparkline-color="{"hex"=>"#e74c3c", "name"=>"Red"}" data-sparkline-type="line"></div>
                    </div>
                    <h3 class="mb-1">$10M <i class="mdi mdi-trending-up text-success"></i></h3>
@@ -1800,7 +1801,7 @@
                </div>
                <div class="card">
                  <div class="card-body">
-                    <div class="card-value pull-right text-blue">+5%</div>
+                    <div class="card-value float-right text-blue">+5%</div>
                    <h3 class="mb-1">423</h3>
                    <div class="text-muted">Users online</div>
                  </div>
@@ -1945,7 +1946,7 @@
                </div>
                <div class="card">
                  <div class="card-body">
-                    <div class="card-value pull-right text-primary">20%</div>
+                    <div class="card-value float-right text-primary">20%</div>
                    <h3 class="mb-1">1530</h3>
                    <div>Total Leads</div>
                    <div class="mt-4">
@@ -1957,7 +1958,7 @@
                </div>
                <div class="card">
                  <div class="card-body">
-                    <div class="card-value pull-right text-warning">0%</div>
+                    <div class="card-value float-right text-warning">0%</div>
                    <h3 class="mb-1">$8,530</h3>
                    <div>Total Payment</div>
                  </div>
@@ -2007,7 +2008,7 @@
                </div>
                <div class="card">
                  <div class="card-body">
-                    <div class="card-value pull-right text-warning"><i class="wi wi-day-cloudy"></i></div>
+                    <div class="card-value float-right text-warning"><i class="wi wi-day-cloudy"></i></div>
                    <h3 class="mb-1">16°C</h3>
                    <div>Warsaw, Poland</div>
                  </div>
@@ -2438,7 +2439,7 @@
                      <div class="col-6">
                        <div class="card">
                          <div class="card-body text-center">
-                            <div class="h5">New fedbacks</div>
+                            <div class="h5">New feedback</div>
                            <div class="display-4 font-weight-bold mb-4">62</div>
                            <div class="progress progress-sm">
                              <div class="progress-bar bg-red" style="width: 34%"></div>
@@ -2469,7 +2470,7 @@
                    </div>
                    <div class="card">
                      <div class="card-body">
-                        <div class="card-value pull-right text-yellow">-3%</div>
+                        <div class="card-value float-right text-yellow">-3%</div>
                        <h3 class="mb-1">$5255</h3>
                        <div class="text-muted">Revenue</div>
                      </div>
@@ -2566,28 +2567,28 @@
                      <div class="card-body">
                        <div class="card-text">
                          <div class="mt-0">
-                            <small class="pull-right text-muted">10/200 GB</small>
+                            <small class="float-right text-muted">10/200 GB</small>
                            <h5>Memory</h5>
                            <div class="progress progress-sm">
                              <div style="width: 60%;" class="progress-bar"></div>
                            </div>
                          </div>
                          <div class="mt-5">
-                            <small class="pull-right text-muted">20 GB</small>
+                            <small class="float-right text-muted">20 GB</small>
                            <h5>Bandwidth</h5>
                            <div class="progress progress-sm">
                              <div style="width: 50%;" class="progress-bar"></div>
                            </div>
                          </div>
                          <div class="mt-5">
-                            <small class="pull-right text-muted">73%</small>
+                            <small class="float-right text-muted">73%</small>
                            <h5>Activity</h5>
                            <div class="progress progress-sm">
                              <div style="width: 40%;" class="progress-bar"></div>
                            </div>
                          </div>
                          <div class="mt-5">
-                            <small class="pull-right text-muted">400 GB</small>
+                            <small class="float-right text-muted">400 GB</small>
                            <h5>FTP</h5>
                            <div class="progress progress-sm">
                              <div style="width: 80%;" class="progress-bar bg-danger"></div>
@@ -2598,7 +2599,7 @@
                    </div>
                    <div class="card">
                      <div class="card-body">
-                        <div class="card-value pull-right text-danger">-1%</div>
+                        <div class="card-value float-right text-danger">-1%</div>
                        <h3 class="mb-1">935</h3>
                        <div>Total Sales</div>
                        <div class="mt-4">
@@ -2610,7 +2611,7 @@
                    </div>
                    <div class="card bg-success">
                      <div class="card-body text-white">
-                        <div class="card-value pull-right">60%</div>
+                        <div class="card-value float-right">60%</div>
                        <h3 class="mb-1">5324</h3>
                        <div>New Orders</div>
                      </div>
@@ -3219,7 +3220,7 @@
                        <div class="form-group">
                          <label class="form-label">
                            Password
-                            <a href="./forgot-password.html" class="pull-right small">I forgot password</a>
+                            <a href="./forgot-password.html" class="float-right small">I forgot password</a>
                          </label>
                          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                        </div>
@@ -3300,7 +3301,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/store.html
+++ b/dist/store.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>Store components - tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="./index.html">
-                <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="./index.html">
+                <img src="./demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="./cards.html" class="nav-item ">Cards design</a>
-                      <a href="./charts.html" class="nav-item ">Charts</a>
-                      <a href="./pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="./charts.html" class="dropdown-item ">Charts</a>
+                      <a href="./pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link active"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="./maps.html" class="nav-item ">Maps</a>
-                      <a href="./icons.html" class="nav-item ">Icons</a>
-                      <a href="./store.html" class="nav-item active">Store</a>
-                      <a href="./blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link active" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./maps.html" class="dropdown-item ">Maps</a>
+                      <a href="./icons.html" class="dropdown-item ">Icons</a>
+                      <a href="./store.html" class="dropdown-item active">Store</a>
+                      <a href="./blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="./profile.html" class="nav-item ">Profile</a>
-                      <a href="./login.html" class="nav-item ">Login</a>
-                      <a href="./register.html" class="nav-item ">Register</a>
-                      <a href="./forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="./400.html" class="nav-item ">400 error</a>
-                      <a href="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="page-header">
              <h1 class="page-title">
@@ -192,7 +197,7 @@
                    <div class="card">
                      <div class="card-body">
                        <div class="mb-4 text-center">
-                          <img src="assets/images/products/apple-iphone7-special.jpg" alt="Apple iPhone 7 128GB" class="img-fluid">
+                          <img src="demo/products/apple-iphone7-special.jpg" alt="Apple iPhone 7 128GB" class="img-fluid">
                        </div>
                        <h4 class="card-title"><a href="javascript:void(0)">Apple iPhone 7 Plus 256GB Red Special Edition</a></h4>
                        <div class="card-subtitle">
@@ -213,7 +218,7 @@
                    <div class="card">
                      <div class="card-body">
                        <div class="mb-4 text-center">
-                          <img src="assets/images/products/gopro-hero.jpg" alt="Apple iPhone 7 128GB" class="img-fluid">
+                          <img src="demo/products/gopro-hero.jpg" alt="Apple iPhone 7 128GB" class="img-fluid">
                        </div>
                        <h4 class="card-title"><a href="javascript:void(0)">GoPro HERO6 Black</a></h4>
                        <div class="card-subtitle">
@@ -236,7 +241,7 @@
                <div class="card">
                  <table class="table card-table table-vcenter">
                    <tr>
-                      <td><img src="assets/images/products/apple-iphone7-special.jpg" alt="" class="h-8"></td>
+                      <td><img src="demo/products/apple-iphone7-special.jpg" alt="" class="h-8"></td>
                      <td>
                        Apple iPhone 7 Plus 256GB Red Special Edition
                      </td>
@@ -247,7 +252,7 @@
                      </td>
                    </tr>
                    <tr>
-                      <td><img src="assets/images/products/apple-macbook-pro.jpg" alt="" class="h-8"></td>
+                      <td><img src="demo/products/apple-macbook-pro.jpg" alt="" class="h-8"></td>
                      <td>
                        Apple MacBook Pro i7 3,1GHz/16/512/Radeon 560 Space Gray
                        <div class="badge badge-default badge-md">New</div>
@@ -259,7 +264,7 @@
                      </td>
                    </tr>
                    <tr>
-                      <td><img src="assets/images/products/apple-iphone7.jpg" alt="" class="h-8"></td>
+                      <td><img src="demo/products/apple-iphone7.jpg" alt="" class="h-8"></td>
                      <td>
                        Apple iPhone 7 32GB Jet Black
                      </td>
@@ -270,7 +275,7 @@
                      </td>
                    </tr>
                    <tr>
-                      <td><img src="assets/images/products/gopro-hero.jpg" alt="" class="h-8"></td>
+                      <td><img src="demo/products/gopro-hero.jpg" alt="" class="h-8"></td>
                      <td>
                        GoPro HERO6 Black
                        <div class="badge badge-default badge-md">New</div>
@@ -282,7 +287,7 @@
                      </td>
                    </tr>
                    <tr>
-                      <td><img src="assets/images/products/msi.jpg" alt="" class="h-8"></td>
+                      <td><img src="demo/products/msi.jpg" alt="" class="h-8"></td>
                      <td>
                        MSI GV62 i5-7300HQ/8GB/1TB/Win10X GTX1050
                      </td>
@@ -293,7 +298,7 @@
                      </td>
                    </tr>
                    <tr>
-                      <td><img src="assets/images/products/xiaomi-mi.jpg" alt="" class="h-8"></td>
+                      <td><img src="demo/products/xiaomi-mi.jpg" alt="" class="h-8"></td>
                      <td>
                        Xiaomi Mi A1 64GB Black
                        <div class="badge badge-default badge-md">New</div>
@@ -305,7 +310,7 @@
                      </td>
                    </tr>
                    <tr>
-                      <td><img src="assets/images/products/huawei-mate.jpg" alt="" class="h-8"></td>
+                      <td><img src="demo/products/huawei-mate.jpg" alt="" class="h-8"></td>
                      <td>
                        Huawei Mate 10 Pro Dual SIM Gray
                      </td>
@@ -316,7 +321,7 @@
                      </td>
                    </tr>
                    <tr>
-                      <td><img src="assets/images/products/sony-kd.jpg" alt="" class="h-8"></td>
+                      <td><img src="demo/products/sony-kd.jpg" alt="" class="h-8"></td>
                      <td>
                        Sony KD-49XE7005
                        <div class="badge badge-default badge-md">New</div>
@@ -328,7 +333,7 @@
                      </td>
                    </tr>
                    <tr>
-                      <td><img src="assets/images/products/samsung-galaxy.jpg" alt="" class="h-8"></td>
+                      <td><img src="demo/products/samsung-galaxy.jpg" alt="" class="h-8"></td>
                      <td>
                        Samsung Galaxy A5 A520F 2017 LTE Black Sky
                      </td>
@@ -385,7 +390,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/dist/sw.js
+++ b/dist/sw.js
--- a/dist/users-list.html
+++ b/dist/users-list.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>tabler.github.io - a responsive, flat and full featured admin template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -22,7 +22,7 @@
    <script>
      requirejs.config({
          baseUrl: '.'
-      		});
+      });
    </script>
    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet" />
@@ -39,37 +39,49 @@
  <body class="">
    <div class="page">
      <div class="page-main">
-        <div class="header">
+        <div class="header py-4">
          <div class="container">
            <div class="d-flex">
-              <a class="navbar-brand" href="./index.html">
-                <img src="./demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+              <a class="header-brand" href="./index.html">
+                <img src="./demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
              </a>
-              <div class="ml-auto d-flex order-lg-2">
-                <div class="nav-item">
+              <div class="d-flex order-lg-2 ml-auto">
+                <div class="nav-item d-none d-md-flex">
                  <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
                </div>
-                <div class="dropdown d-none d-md-flex">
-                  <a class="nav-link icon" data-toggle="dropdown">
-                    <i class="fe fe-message-square"></i>
-                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
-                  </div>
-                </div>
                <div class="dropdown d-none d-md-flex">
                  <a class="nav-link icon" data-toggle="dropdown">
                    <i class="fe fe-bell"></i>
                    <span class="nav-unread"></span>
                  </a>
-                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-                    delectus dolore dolores maxime nesciunt qui quia totam.
+                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
+                      <div>
+                        <strong>Nathan</strong> pushed new commit: Fix page load performance issue.
+                        <div class="small text-muted">10 minutes ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
+                      <div>
+                        <strong>Alice</strong> started new task: Tabler UI design.
+                        <div class="small text-muted">1 hour ago</div>
+                      </div>
+                    </a>
+                    <a href="#" class="dropdown-item d-flex">
+                      <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
+                      <div>
+                        <strong>Rose</strong> deployed new version of NodeJS REST Api V3
+                        <div class="small text-muted">2 hours ago</div>
+                      </div>
+                    </a>
+                    <div class="dropdown-divider"></div>
+                    <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
                  </div>
                </div>
                <div class="dropdown">
-                  <a href="#" class="nav-link pr-0" data-toggle="dropdown">
+                  <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
                    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
                    <span class="ml-2 d-none d-lg-block">
                      <span class="text-default">Jane Pearson</span>
@@ -78,85 +90,86 @@
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                    <a class="dropdown-item" href="#">
-                      <span>Profile</span>
+                      <i class="dropdown-icon fe fe-user"></i> Profile
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Settings</span>
+                      <i class="dropdown-icon fe fe-settings"></i> Settings
                    </a>
                    <a class="dropdown-item" href="#">
                      <span class="float-right"><span class="badge badge-primary">6</span></span>
-                      <span>Inbox</span>
+                      <i class="dropdown-icon fe fe-mail"></i> Inbox
                    </a>
                    <a class="dropdown-item" href="#">
-                      <span>Message</span>
+                      <i class="dropdown-icon fe fe-send"></i> Message
                    </a>
                    <div class="dropdown-divider"></div>
-                    <a class="dropdown-item" href="#">Need help? </a>
-                    <a class="dropdown-item" href="#">Sign out</a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-help-circle"></i> Need help?
+                    </a>
+                    <a class="dropdown-item" href="#">
+                      <i class="dropdown-icon fe fe-log-out"></i> Sign out
+                    </a>
                  </div>
                </div>
              </div>
-              <div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-                <ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-                  <li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-                  <li class="nav-item dropdown">
-                    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-                    <div class="dropdown-menu mt-2 text-color" role="menu">
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-                      <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-                    </div>
-                  </li>
-                </ul>
-              </div>
+              <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+                <span class="header-toggler-icon"></span>
+              </a>
            </div>
          </div>
        </div>
-        <div class="header-nav d-none d-lg-flex">
+        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
          <div class="container">
            <div class="row align-items-center">
-              <div class="col">
-                <ul class="nav nav-tabs">
+              <div class="col-lg-3 ml-auto">
+                <form class="input-icon my-3 my-lg-0">
+                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
+                  <div class="input-icon-addon">
+                    <i class="fe fe-search"></i>
+                  </div>
+                </form>
+              </div>
+              <div class="col-lg order-lg-first">
+                <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                  <li class="nav-item">
                    <a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
                  </li>
                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
-                    <div class="nav-submenu nav">
-                      <a href="./cards.html" class="nav-item ">Cards design</a>
-                      <a href="./charts.html" class="nav-item ">Charts</a>
-                      <a href="./pricing-cards.html" class="nav-item ">Pricing cards</a>
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./cards.html" class="dropdown-item ">Cards design</a>
+                      <a href="./charts.html" class="dropdown-item ">Charts</a>
+                      <a href="./pricing-cards.html" class="dropdown-item ">Pricing cards</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
-                    <div class="nav-submenu nav">
-                      <a href="./maps.html" class="nav-item ">Maps</a>
-                      <a href="./icons.html" class="nav-item ">Icons</a>
-                      <a href="./store.html" class="nav-item ">Store</a>
-                      <a href="./blog.html" class="nav-item ">Blog</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./maps.html" class="dropdown-item ">Maps</a>
+                      <a href="./icons.html" class="dropdown-item ">Icons</a>
+                      <a href="./store.html" class="dropdown-item ">Store</a>
+                      <a href="./blog.html" class="dropdown-item ">Blog</a>
                    </div>
                  </li>
-                  <li class="nav-item">
-                    <a href="javascript:void(0)" class="nav-link"><i class="fe fe-file"></i> Pages</a>
-                    <div class="nav-submenu nav">
-                      <a href="./profile.html" class="nav-item ">Profile</a>
-                      <a href="./login.html" class="nav-item ">Login</a>
-                      <a href="./register.html" class="nav-item ">Register</a>
-                      <a href="./forgot-password.html" class="nav-item ">Forgot password</a>
-                      <a href="./400.html" class="nav-item ">400 error</a>
-                      <a href="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                    </div>
                  </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                    <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                  </li>
                  <li class="nav-item">
@@ -167,18 +180,10 @@
                  </li>
                </ul>
              </div>
-              <div class="col-3 ml-auto">
-                <form class="input-icon">
-                  <input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
-                  <div class="input-icon-addon">
-                    <i class="fe fe-search"></i>
-                  </div>
-                </form>
-              </div>
            </div>
          </div>
        </div>
-        <div class="page-content">
+        <div class="my-3 my-md-5">
          <div class="container">
            <div class="page-header">
              <h1 class="page-title">
@@ -551,7 +556,7 @@
      <footer class="footer">
        <div class="container">
          <div class="row align-items-center flex-row-reverse">
-            <div class="col-auto ml-auto">
+            <div class="col-auto ml-lg-auto">
              <div class="row align-items-center">
                <div class="col-auto">
                  <ul class="list-inline list-inline-dots mb-0">
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -2,6 +2,7 @@ var gulp = require('gulp'),
    sass = require('gulp-sass'),
    rename = require('gulp-rename'),
    autoprefixer = require('gulp-autoprefixer'),
+    rtlcss = require('gulp-rtlcss'),
    pckg = require('./package.json');

 gulp.task('styles', function () {
@@ -15,6 +16,10 @@ gulp.task('styles', function () {
            cascade: false
        }))
        .pipe(rename('dashboard.css'))
+        .pipe(gulp.dest('src/assets/css/'))
+
+        .pipe(rtlcss())
+        .pipe(rename('dashboard.rtl.css'))
        .pipe(gulp.dest('src/assets/css/'));
 });

--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "tabler-ui",
  "description": "Premium and Open Source dashboard template with responsive and high quality UI. For Free!",
-  "version": "0.0.9",
+  "version": "0.0.30",
  "keywords": [
    "css",
    "sass",
@@ -38,12 +38,16 @@
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^5.0.0",
    "gulp-rename": "^1.2.2",
+    "gulp-rtlcss": "^1.2.0",
    "gulp-sass": "^3.1.0",
    "npm-run-all": "^4.1.2"
  },
-  "dependencies": {},
+  "dependencies": {
+    "bootstrap": "^4.0.0"
+  },
  "files": [
-    "dist/"
+    "dist/",
+    "src/"
  ],
  "browserslist": [
    "last 1 major version",
--- a/src/_data/menu.yml
+++ b/src/_data/menu.yml
@@ -72,7 +72,7 @@ pages:

    401:
      name: 401 error
-      url: 104.html
+      url: 401.html

    403:
      name: 403 error
@@ -98,6 +98,10 @@ pages:
      name: Empty page
      url: empty.html

+    rtl:
+      name: RTL mode
+      url: rtl.html
+
 forms:
  name: Forms
  icon: fe fe-check-square
@@ -112,4 +116,4 @@ gallery:
 docs:
  name: Documentation
  icon: fe fe-file-text
-  url: docs/index.html
+  url: docs/index.html
--- a/src/_includes/cards/calendar.html
+++ b/src/_includes/cards/calendar.html
@@ -66,15 +66,15 @@
 	<ul class="list-group card-list-group">
 		<li class="list-group-item list-group-item-red">
 			<a href="javascript:void(0)" class="text-inherit">Cras justo odio</a>
-			<span class="pull-right text-muted">16 Dec</span>
+			<span class="float-right text-muted">16 Dec</span>
 		</li>
 		<li class="list-group-item list-group-item-blue">
 			<a href="javascript:void(0)" class="text-inherit">Dapibus ac facilisis in</a>
-			<span class="pull-right text-muted">22 Dec</span>
+			<span class="float-right text-muted">22 Dec</span>
 		</li>
 		<li class="list-group-item list-group-item-red">
 			<a href="javascript:void(0)" class="text-inherit">Vestibulum at eros</a>
-			<span class="pull-right text-muted">29 Dec</span>
+			<span class="float-right text-muted">29 Dec</span>
 		</li>
 	</ul>
 </div>
--- a/src/_includes/cards/chart-bg.html
+++ b/src/_includes/cards/chart-bg.html
@@ -5,7 +5,7 @@

 <div class="card">
 	<div class="card-body">
-		<div class="card-value pull-right text-{{ color }}">{{ include.rate | default: '+5%' }}</div>
+		<div class="card-value float-right text-{{ color }}">{{ include.rate | default: '+5%' }}</div>
 		<h3 class="mb-1">{{ include.title | default: '423' }}</h3>
 		<div class="text-muted">{{ include.description | default: 'Users online' }}</div>
 	</div>
--- a/src/_includes/cards/development-activity.html
+++ b/src/_includes/cards/development-activity.html
@@ -31,7 +31,7 @@
 			<tr>
 				<td><span class="avatar" style="background-image: url({{ site.base }}/{{ site.data.users[16].photo }})"></span></td>
 				<td>{{ site.data.users[16].name }} {{ site.data.users[16].surname }}</td>
-				<td>Left sidebar adjusments</td>
+				<td>Left sidebar adjustments</td>
 				<td class="text-nowrap">April 15, 2018</td>
 				<td><a href="#" class="icon"><i class="fe fe-trash"></i></a></td>
 			</tr>
@@ -54,4 +54,4 @@
 	</div>
 </div>

-{% include js-charts.html id="chart-development-activity" data="development-activity" %}
+{% include js-charts.html id="chart-development-activity" data="development-activity" %}
--- a/src/_includes/cards/form-all-elements.html
+++ b/src/_includes/cards/form-all-elements.html
@@ -232,10 +232,10 @@
 			</div>
 			<div class="col-md-6 col-lg-4">
 				<div class="form-group">
-					<label class="form-label">Radios</label>
+					<div class="form-label">Radios</div>
 					<div class="custom-controls-stacked">
 						<label class="custom-control custom-radio">
-							<input type="radio" class="custom-control-input" name="example-radios" value="option1" checked="">
+							<input type="radio" class="custom-control-input" name="example-radios" value="option1" checked>
 							<div class="custom-control-label">Option 1</div>
 						</label>
 						<label class="custom-control custom-radio">
@@ -255,57 +255,56 @@
 				<div class="form-group">
 					<div class="form-label">Inline Radios</div>
 					<div class="custom-controls-stacked">
-						<div class="custom-control custom-radio">
-							<input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked="">
+						<label class="custom-control custom-radio custom-control-inline">
+							<input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked>
 							<span class="custom-control-label">Option 1</span>
-						</div>
-						<div class="custom-control custom-radio">
+						</label>
+						<label class="custom-control custom-radio custom-control-inline">
 							<input type="radio" class="custom-control-input" name="example-inline-radios" value="option2">
 							<span class="custom-control-label">Option 2</span>
-						</div>
-						<div class="custom-control custom-radio">
+						</label>
+						<label class="custom-control custom-radio custom-control-inline">
 							<input type="radio" class="custom-control-input" name="example-inline-radios" value="option3">
 							<span class="custom-control-label">Option 3</span>
-						</div>
+						</label>
 					</div>
 				</div>
 				<div class="form-group">
-					<label class="form-label">Checkboxes</label>
+					<div class="form-label">Checkboxes</div>
 					<div class="custom-controls-stacked">
-						<div class="custom-control custom-checkbox">
-							<input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked="">
-							<label class="custom-control-label">Option 1</label>
-						</div>
-						<div class="custom-control custom-checkbox">
+						<label class="custom-control custom-checkbox">
+							<input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked>
+							<span class="custom-control-label">Option 1</span>
+						</label>
+						<label class="custom-control custom-checkbox">
 							<input type="checkbox" class="custom-control-input" name="example-checkbox2" value="option2">
-							<label class="custom-control-label">Option 2</label>
-						</div>
-						<div class="custom-control custom-checkbox">
+							<span class="custom-control-label">Option 2</span>
+						</label>
+						<label class="custom-control custom-checkbox">
 							<input type="checkbox" class="custom-control-input" name="example-checkbox3" value="option3" disabled>
-							<label class="custom-control-label">Option Disabled</label>
-						</div>
-						<div class="custom-control custom-checkbox">
+							<span class="custom-control-label">Option Disabled</span>
+						</label>
+						<label class="custom-control custom-checkbox">
 							<input type="checkbox" class="custom-control-input" name="example-checkbox4" value="option4" checked disabled>
-							<label class="custom-control-label">Option Disabled Checked</label>
-						</div>
+							<span class="custom-control-label">Option Disabled Checked</span>
+						</label>
 					</div>
 				</div>
 				<div class="form-group">
 					<div class="form-label">Inline Checkboxes</div>
-					<div class="custom-controls-stacked">
-						<div class="custom-control custom-checkbox">
-							<input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1"
-								   checked="">
-							<label class="custom-control-label">Option 1</label>
-						</div>
-						<div class="custom-control custom-checkbox">
+					<div>
+						<label class="custom-control custom-checkbox custom-control-inline">
+							<input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1" checked>
+							<span class="custom-control-label">Option 1</span>
+						</label>
+						<label class="custom-control custom-checkbox custom-control-inline">
 							<input type="checkbox" class="custom-control-input" name="example-inline-checkbox2" value="option2">
-							<label class="custom-control-label">Option 2</label>
-						</div>
-						<div class="custom-control custom-checkbox">
+							<span class="custom-control-label">Option 2</span>
+						</label>
+						<label class="custom-control custom-checkbox custom-control-inline">
 							<input type="checkbox" class="custom-control-input" name="example-inline-checkbox3" value="option3">
-							<label class="custom-control-label">Option 3</label>
-						</div>
+							<span class="custom-control-label">Option 3</span>
+						</label>
 					</div>
 				</div>
 				<div class="form-group">
--- a/src/_includes/cards/login.html
+++ b/src/_includes/cards/login.html
@@ -10,7 +10,7 @@
 		<div class="form-group">
 			<label class="form-label">
 				Password
-				<a href="{{ site.base }}/forgot-password.html" class="pull-right small">I forgot password</a>
+				<a href="{{ site.base }}/forgot-password.html" class="float-right small">I forgot password</a>
 			</label>
 			<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
 		</div>
--- a/src/_includes/cards/media-inverse.html
+++ b/src/_includes/cards/media-inverse.html
@@ -1,6 +1,6 @@
 <div class="card bg-{{ include.color | default: 'success' }}">
 	<div class="card-body text-white">
-		<div class="card-value pull-right">{{ include.rate | default: '23%' }}</div>
+		<div class="card-value float-right">{{ include.rate | default: '23%' }}</div>
 		<h3 class="mb-1">{{ include.title | default: '423' }}</h3>
 		<div>{{ include.description | default: 'Users online' }}</div>
 	</div>
--- a/src/_includes/cards/media.html
+++ b/src/_includes/cards/media.html
@@ -1,6 +1,6 @@
 <div class="card">
 	<div class="card-body">
-		<div class="card-value pull-right text-{{ include.color | default: 'success' }}">{{ include.rate | default: '23%' }}</div>
+		<div class="card-value float-right text-{{ include.color | default: 'success' }}">{{ include.rate | default: '23%' }}</div>
 		<h3 class="mb-1">{{ include.title | default: '423' }}</h3>
 		<div>{{ include.description | default: 'Users online' }}</div>
 		{% if include.progress %}
--- a/src/_includes/cards/server.html
+++ b/src/_includes/cards/server.html
@@ -27,7 +27,7 @@
 	<div class="card-body">
 		<div class="card-text">
 			<div class="mt-0">
-				<small class="pull-right text-muted">10/200 GB</small>
+				<small class="float-right text-muted">10/200 GB</small>
 				<h5>Memory</h5>
 				<div class="progress progress-sm">
 					<div style="width: 60%;" class="progress-bar"></div>
@@ -35,7 +35,7 @@
 			</div>

 			<div class="mt-5">
-				<small class="pull-right text-muted">20 GB</small>
+				<small class="float-right text-muted">20 GB</small>
 				<h5>Bandwidth</h5>
 				<div class="progress progress-sm">
 					<div style="width: 50%;" class="progress-bar"></div>
@@ -43,7 +43,7 @@
 			</div>

 			<div class="mt-5">
-				<small class="pull-right text-muted">73%</small>
+				<small class="float-right text-muted">73%</small>
 				<h5>Activity</h5>
 				<div class="progress progress-sm">
 					<div style="width: 40%;" class="progress-bar"></div>
@@ -51,7 +51,7 @@
 			</div>

 			<div class="mt-5">
-				<small class="pull-right text-muted">400 GB</small>
+				<small class="float-right text-muted">400 GB</small>
 				<h5>FTP</h5>
 				<div class="progress progress-sm">
 					<div style="width: 80%;" class="progress-bar bg-danger"></div>
--- a/src/_includes/cards/sparkline.html
+++ b/src/_includes/cards/sparkline.html
@@ -6,7 +6,7 @@

 <div class="card">
 	<div class="card-body">
-		<div class="card-value pull-right text-warning">
+		<div class="card-value float-right text-warning">
 			<div class="sparkline" data-sparkline="{% include chart-data.html limit=limit offset=offset aggregate=aggregate %}" data-sparkline-color="{{ site.colors[color] }}" data-sparkline-type="{{ chart_type }}"></div>
 		</div>
 		<h3 class="mb-1">$10M <i class="mdi mdi-trending-up text-success"></i></h3>
--- a/src/_includes/cards/table-users.html
+++ b/src/_includes/cards/table-users.html
@@ -1,66 +1,69 @@
 <div class="card">
-	<table class="table table-responsive table-hover table-outline table-vcenter text-nowrap card-table">
-		<thead>
-		<tr>
-			<th class="text-center w-1"><i class="icon-people"></i></th>
-			<th>User</th>
-			<th>Usage</th>
-			<th class="text-center">Payment</th>
-			<th>Activity</th>
-			<th class="text-center">Satisfaction</th>
-			<th class="text-center"><i class="icon-settings"></i></th>
-		</tr>
-		</thead>
-		<tbody>
+	<div class="table-responsive">
+		<table class="table table-hover table-outline table-vcenter text-nowrap card-table">
+			<thead>
+			<tr>
+				<th class="text-center w-1"><i class="icon-people"></i></th>
+				<th>User</th>
+				<th>Usage</th>
+				<th class="text-center">Payment</th>
+				<th>Activity</th>
+				<th class="text-center">Satisfaction</th>
+				<th class="text-center"><i class="icon-settings"></i></th>
+			</tr>
+			</thead>
+			<tbody>

-		{% for user in site.data.users limit: 8 offset: 50 %}
-		{% assign percentage = forloop.index | random_number %}
-		{% assign time_offset = forloop.index | random_number: 0, 800 %}
-		{% assign register_offset = forloop.index | random_number: 0, 8000000 %}
-		<tr>
-			<td class="text-center">
-				<div class="avatar d-block" style="background-image: url({{ user.photo }})">
-					<span class="avatar-status bg-green"></span>
-				</div>
-			</td>
-			<td>
-				<div>{{ user.name }} {{ user.surname }}</div>
-				<div class="small text-muted">
-					Registered: {{ site.time | date: "%s" | minus: register_offset | date: '%b %-d, %Y' }}
-				</div>
-			</td>
-			<td>
-				<div class="clearfix">
-					<div class="float-left">
-						<strong>{{ percentage }}%</strong>
+			{% for user in site.data.users limit: 8 offset: 50 %}
+			{% assign percentage = forloop.index | random_number %}
+			{% assign time_offset = forloop.index | random_number: 0, 800 %}
+			{% assign register_offset = forloop.index | random_number: 0, 8000000 %}
+			<tr>
+				<td class="text-center">
+					<div class="avatar d-block" style="background-image: url({{ user.photo }})">
+						<span class="avatar-status bg-green"></span>
 					</div>
-					<div class="float-right">
-						<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
+				</td>
+				<td>
+					<div>{{ user.name }} {{ user.surname }}</div>
+					<div class="small text-muted">
+						Registered: {{ site.time | date: "%s" | minus: register_offset | date: '%b %-d, %Y' }}
 					</div>
-				</div>
-				<div class="progress progress-xs">
-					<div class="progress-bar bg-{{ percentage | number_color }}" role="progressbar" style="width: {{ percentage }}%" aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
-				</div>
-			</td>
-			<td class="text-center">
-				<i class="payment payment-{% cycle 'visa', 'googlewallet', 'mastercard', 'shopify', 'ebay', 'paypal' %}"></i>
-			</td>
-			<td>
-				<div class="small text-muted">Last login</div>
-				<div>{{ site.time | date: "%s" | minus: time_offset | to_pretty_time }}</div>
-			</td>
-			<td class="text-center">
-				{% assign circle-percentage = forloop.index | random_number: 0, 100 %}
-				<div class="mx-auto chart-circle chart-circle-xs" data-value="{{ circle-percentage | divide: 100 }}" data-thickness="3" data-color="blue">
-					<div class="chart-circle-value">{{ circle-percentage }}%</div>
-				</div>
-			</td>
-			<td class="text-center">
-				{% include dropdown-options.html %}
-			</td>
-		</tr>
-		{% endfor %}
-		</tbody>
-	</table>
+				</td>
+				<td>
+					<div class="clearfix">
+						<div class="float-left">
+							<strong>{{ percentage }}%</strong>
+						</div>
+						<div class="float-right">
+							<small class="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
+						</div>
+					</div>
+					<div class="progress progress-xs">
+						<div class="progress-bar bg-{{ percentage | number_color }}" role="progressbar" style="width: {{ percentage }}%"
+						     aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
+					</div>
+				</td>
+				<td class="text-center">
+					<i class="payment payment-{% cycle 'visa', 'googlewallet', 'mastercard', 'shopify', 'ebay', 'paypal' %}"></i>
+				</td>
+				<td>
+					<div class="small text-muted">Last login</div>
+					<div>{{ site.time | date: "%s" | minus: time_offset | to_pretty_time }}</div>
+				</td>
+				<td class="text-center">
+					{% assign circle-percentage = forloop.index | random_number: 0, 100 %}
+					<div class="mx-auto chart-circle chart-circle-xs" data-value="{{ circle-percentage | divide: 100 }}" data-thickness="3" data-color="blue">
+						<div class="chart-circle-value">{{ circle-percentage }}%</div>
+					</div>
+				</td>
+				<td class="text-center">
+					{% include dropdown-options.html %}
+				</td>
+			</tr>
+			{% endfor %}
+			</tbody>
+		</table>
+	</div>

 </div>
--- a/src/_includes/cards/twitter.html
+++ b/src/_includes/cards/twitter.html
@@ -9,7 +9,7 @@
 				<div class="content">

 					<p class="h5">
-						John Smith <small>@johnsmith</small> <small class="pull-right text-muted">31 minutes ago</small>
+						John Smith <small>@johnsmith</small> <small class="float-right text-muted">31 minutes ago</small>
 					</p>
 					<p>
 						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
--- a/src/_includes/footer.html
+++ b/src/_includes/footer.html
@@ -2,7 +2,7 @@
 <footer class="footer">
 	<div class="container">
 		<div class="row align-items-center flex-row-reverse">
-			<div class="col-auto ml-auto">
+			<div class="col-auto ml-lg-auto">
 				<div class="row align-items-center">
 					<div class="col-auto">
 						<ul class="list-inline list-inline-dots mb-0">
--- a/src/_includes/head.html
+++ b/src/_includes/head.html
@@ -19,3 +19,21 @@

 <title>{% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{{ site.description }}</title>

+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
+<script src="{{ site.base }}/assets/js/require.min.js"></script>
+<script>
+    requirejs.config({
+        baseUrl: '{{ site.base }}'
+    });
+</script>
+
+<!-- Dashboard Core -->
+<link href="{{ site.base }}/assets/css/dashboard{% if page.rtl %}.rtl{% endif %}.css" rel="stylesheet" />
+<script src="{{ site.base }}/assets/js/dashboard.js"></script>
+
+{% for plugin in site.theme-plugins %}
+<!-- {{ plugin[1].name }} Plugin -->
+{% if plugin[1].files contains 'css' %}<link href="{{ site.base }}/assets/plugins/{{ plugin[0] }}/plugin.css" rel="stylesheet" />{% endif %}
+{% if plugin[1].files contains 'js' %}<script src="{{ site.base }}/assets/plugins/{{ plugin[0] }}/plugin.js"></script>{% endif %}
+{% endfor %}
--- a/src/_includes/header.html
+++ b/src/_includes/header.html
@@ -1,35 +1,48 @@
 {% assign user = site.data.users[40] %}
-<div class="header">
+<div class="header py-4">
 	<div class="container">
 		<div class="d-flex">
-			<a class="navbar-brand" href="{{ site.base }}/index.html">
-				<img src="{{ site.base }}/demo/brand/tabler.svg" class="navbar-brand-img" alt="tabler.io">
+			<a class="header-brand" href="{{ site.base }}/index.html">
+				<img src="{{ site.base }}/demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
 			</a>
-			<div class="ml-auto d-flex order-lg-2">
-				<div class="nav-item">
+
+			<div class="d-flex order-lg-2 ml-auto">
+				<div class="nav-item d-none d-md-flex">
 					<a href="{{ site.github_url }}" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
 				</div>
-				<div class="dropdown d-none d-md-flex">
-					<a class="nav-link icon" data-toggle="dropdown">
-						<i class="fe fe-message-square"></i>
-					</a>
-					<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-						delectus dolore dolores maxime nesciunt qui quia totam.
-					</div>
-				</div>
 				<div class="dropdown d-none d-md-flex">
 					<a class="nav-link icon" data-toggle="dropdown">
 						<i class="fe fe-bell"></i>
 						<span class="nav-unread"></span>
 					</a>
-					<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow px-4">
-						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
-						delectus dolore dolores maxime nesciunt qui quia totam.
+					<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
+						<a href="#" class="dropdown-item d-flex">
+							<span class="avatar mr-3 align-self-center" style="background-image: url({{ site.data.users[1].photo }})"></span>
+							<div>
+								<strong>{{ site.data.users[1].name }}</strong> pushed new commit: Fix page load performance issue.
+								<div class="small text-muted">10 minutes ago</div>
+							</div>
+						</a>
+						<a href="#" class="dropdown-item d-flex">
+							<span class="avatar mr-3 align-self-center" style="background-image: url({{ site.data.users[2].photo }})"></span>
+							<div>
+								<strong>{{ site.data.users[2].name }}</strong> started new task: Tabler UI design.
+								<div class="small text-muted">1 hour ago</div>
+							</div>
+						</a>
+						<a href="#" class="dropdown-item d-flex">
+							<span class="avatar mr-3 align-self-center" style="background-image: url({{ site.data.users[3].photo }})"></span>
+							<div>
+								<strong>{{ site.data.users[3].name }}</strong> deployed new version of NodeJS REST Api V3
+								<div class="small text-muted">2 hours ago</div>
+							</div>
+						</a>
+						<div class="dropdown-divider"></div>
+						<a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
 					</div>
 				</div>
 				<div class="dropdown">
-					<a href="#" class="nav-link pr-0" data-toggle="dropdown">
+					<a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
 						<span class="avatar" style="background-image: url({{ site.base }}/{{ user.photo }})"></span>
 						<span class="ml-2 d-none d-lg-block">
 							<span class="text-default">{{ user.name }} {{ user.surname }}</span>
@@ -38,58 +51,50 @@
 					</a>
 					<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
 						<a class="dropdown-item" href="#">
-							<span>Profile</span>
+							<i class="dropdown-icon fe fe-user"></i> Profile
 						</a>
 						<a class="dropdown-item" href="#">
-							<span>Settings</span>
+							<i class="dropdown-icon fe fe-settings"></i> Settings
 						</a>
 						<a class="dropdown-item" href="#">
 							<span class="float-right"><span class="badge badge-primary">6</span></span>
-							<span>Inbox</span>
+							<i class="dropdown-icon fe fe-mail"></i> Inbox
 						</a>
 						<a class="dropdown-item" href="#">
-							<span>Message</span>
+							<i class="dropdown-icon fe fe-send"></i> Message
 						</a>
 						<div class="dropdown-divider"></div>
-						<a class="dropdown-item" href="#">Need help? </a>
-						<a class="dropdown-item" href="#">Sign out</a>
+						<a class="dropdown-item" href="#">
+							<i class="dropdown-icon fe fe-help-circle"></i> Need help?
+						</a>
+						<a class="dropdown-item" href="#">
+							<i class="dropdown-icon fe fe-log-out"></i> Sign out
+						</a>
 					</div>
 				</div>
 			</div>
-			<div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
-				<ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
-					<li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
-					<li class="nav-item dropdown">
-						<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
-						<div class="dropdown-menu mt-2 text-color" role="menu">
-							<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
-							<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
-							<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
-							<div class="dropdown-divider"></div>
-							<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
-						</div>
-					</li>
-				</ul>
-			</div>
+
+			<a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
+				<span class="header-toggler-icon"></span>
+			</a>
 		</div>
 	</div>
 </div>

-<div class="header-nav d-none d-lg-flex">
+<div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
 	<div class="container">
 		<div class="row align-items-center">
-			<div class="col">
-				{% include menu.html %}
-			</div>
-
-			<div class="col-3 ml-auto">
-				<form class="input-icon">
+			<div class="col-lg-3 ml-auto">
+				<form class="input-icon my-3 my-lg-0">
 					<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
 					<div class="input-icon-addon">
 						<i class="fe fe-search"></i>
 					</div>
 				</form>
 			</div>
+			<div class="col-lg order-lg-first">
+				{% include menu.html %}
+			</div>
 		</div>
 	</div>
 </div>
--- a/src/_includes/menu.html
+++ b/src/_includes/menu.html
@@ -1,19 +1,19 @@
-<ul class="nav nav-tabs">
+<ul class="nav nav-tabs border-0 flex-column flex-lg-row">
 	{% assign menu = site.data.menu %}
 	{% assign menu_levels = layout.menu | default: page.menu | split: '.' %}

 	{% for item in menu %}
-	<li class="nav-item">
+	<li class="nav-item{% if data.subpages %} dropdown{% endif %}">
 		{% assign index = item[0] %}
 		{% assign data = item[1] %}
-		<a href="{% if data.url %}{% if data.url != '#' %}{{ site.base }}/{% endif %}{{ data.url }}{% else %}javascript:void(0){% endif %}" class="nav-link{% if menu_levels[0] == index %} active{% endif %}{% if data.disabled %} disabled{% endif %}">{% if data.icon %}<i class="{{ data.icon }}"></i>{% endif %} {{ data.name }}{% if data.count %} <span class="badge badge-pill bg-primary text-white ml-2">{{ data.count }}</span>{% endif %}</a>
+		<a href="{% if data.url %}{% if data.url != '#' %}{{ site.base }}/{% endif %}{{ data.url }}{% else %}javascript:void(0){% endif %}" class="nav-link{% if menu_levels[0] == index %} active{% endif %}{% if data.disabled %} disabled{% endif %}"{% if data.subpages %} data-toggle="dropdown"{% endif %}>{% if data.icon %}<i class="{{ data.icon }}"></i>{% endif %} {{ data.name }}{% if data.count %} <span class="badge badge-pill bg-primary text-white ml-2">{{ data.count }}</span>{% endif %}</a>

 		{% if data.subpages %}
-			<div class="nav-submenu nav">
+			<div class="dropdown-menu dropdown-menu-arrow">
 				{% for subitem in data.subpages %}
 					{% assign subindex = subitem[0] %}
 					{% assign subdata = subitem[1] %}
-					<a href="{{ site.base }}/{{ subdata.url }}" class="nav-item {% if menu_levels[1] == subindex %}active{% endif %}">{{ subdata.name }}</a>
+					<a href="{{ site.base }}/{{ subdata.url }}" class="dropdown-item {% if menu_levels[1] == subindex %}active{% endif %}">{{ subdata.name }}</a>
 				{% endfor %}
 			</div>
 		{% endif %}
--- a/src/_layouts/base.html
+++ b/src/_layouts/base.html
@@ -1,27 +1,8 @@
 <!doctype html>
 {% assign min-ext = '' %}{% if jekyll.environment == 'production' %}{% assign min-ext = '.min' %}{% endif %}
-<html lang="en">
+<html lang="en" dir="{% if page.rtl %}rtl{% else %}ltr{% endif %}">
 <head>
 	{% include head.html %}
-
-	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
-	<script src="{{ site.base }}/assets/js/require.min.js"></script>
-	<script>
-        requirejs.config({
-            baseUrl: '{{ site.base }}'
-		});
-	</script>
-
-	<!-- Dashboard Core -->
-	<link href="{{ site.base }}/assets/css/dashboard.css" rel="stylesheet" />
-	<script src="{{ site.base }}/assets/js/dashboard.js"></script>
-
-	{% for plugin in site.theme-plugins %}
-	<!-- {{ plugin[1].name }} Plugin -->
-	{% if plugin[1].files contains 'css' %}<link href="{{ site.base }}/assets/plugins/{{ plugin[0] }}/plugin.css" rel="stylesheet" />{% endif %}
-	{% if plugin[1].files contains 'js' %}<script src="{{ site.base }}/assets/plugins/{{ plugin[0] }}/plugin.js"></script>{% endif %}
-	{% endfor %}
 </head>
 <body class="{{ page.body-class }}">

--- a/src/_layouts/default.html
+++ b/src/_layouts/default.html
@@ -9,7 +9,7 @@ layout: base
 <div class="page-main">
 	{% include header.html %}

-	<div class="page-content">
+	<div class="my-3 my-md-5">
 		{% if page.page-title %}
 		<div class="container">
 			<div class="page-header">
--- a/src/assets/js/core.js
+++ b/src/assets/js/core.js
@@ -1,97 +1,107 @@
-var hexToRgba = function(hex, opacity) {
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    var rgb = result ? {
-            r: parseInt(result[1], 16),
-            g: parseInt(result[2], 16),
-            b: parseInt(result[3], 16)
-        } : null;
+/**
+ *
+ */
+let hexToRgba = function(hex, opacity) {
+  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  let rgb = result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;

-    return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', '+ opacity + ')';
+  return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + opacity + ')';
 };

-$(document).ready(function () {
+/**
+ *
+ */
+$(document).ready(function() {
+  /** Constant div card */
+  const DIV_CARD = 'div.card';

-    // Initialize tooltips
-    $('[data-toggle="tooltip"]').tooltip();
+  /** Initialize tooltips */
+  $('[data-toggle="tooltip"]').tooltip();

-    // Initialize popovers
-	$('[data-toggle="popover"]').popover({
-		html: true
-    });
+  /** Initialize popovers */
+  $('[data-toggle="popover"]').popover({
+    html: true
+  });

-    // Function for remove card
-    $('[data-toggle="card-remove"]').on('click', function (e) {
-        var $card = $(this).closest('div.card');
-        $card.remove();
+  /** Function for remove card */
+  $('[data-toggle="card-remove"]').on('click', function(e) {
+    let $card = $(this).closest(DIV_CARD);

-        e.preventDefault();
-        return false;
-    });
+    $card.remove();

-    // Function for collapse card
-    $('[data-toggle="card-collapse"]').on('click', function (e) {
-        var $this = $(this),
-            $card = $this.closest('div.card');
+    e.preventDefault();
+    return false;
+  });

-        $card.toggleClass('card-collapsed');
+  /** Function for collapse card */
+  $('[data-toggle="card-collapse"]').on('click', function(e) {
+    let $card = $(this).closest(DIV_CARD);

-        e.preventDefault();
-        return false;
-    });
+    $card.toggleClass('card-collapsed');

-    // Function for fullscreen card
-    $('[data-toggle="card-fullscreen"]').on('click', function(e) {
-        var $card = $(this).closest('div.card');
+    e.preventDefault();
+    return false;
+  });

-        $card.toggleClass('card-fullscreen').removeClass('card-collapsed');
+  /** Function for fullscreen card */
+  $('[data-toggle="card-fullscreen"]').on('click', function(e) {
+    let $card = $(this).closest(DIV_CARD);

-        e.preventDefault();
-        return false;
-    });
+    $card.toggleClass('card-fullscreen').removeClass('card-collapsed');

-    if($('[data-sparkline]').length) {
-        var generateSparkline = function($elem, data, params) {
-            $elem.sparkline(data, {
-                type: $elem.attr('data-sparkline-type'),
-                height: '100%',
-                barColor: params.color,
-                lineColor: params.color,
-                fillColor: 'transparent',
-                spotColor: params.color,
-                spotRadius: 0,
-                lineWidth: 2,
-                highlightColor: hexToRgba(params.color, .6),
-                highlightLineColor: '#666',
-                defaultPixelsPerValue: 5
-            });
-        };
+    e.preventDefault();
+    return false;
+  });

-        require(['sparkline'], function(){
-            $('[data-sparkline]').each(function(){
-                var $chart = $(this);
+  /**  */
+  if ($('[data-sparkline]').length) {
+    let generateSparkline = function($elem, data, params) {
+      $elem.sparkline(data, {
+        type: $elem.attr('data-sparkline-type'),
+        height: '100%',
+        barColor: params.color,
+        lineColor: params.color,
+        fillColor: 'transparent',
+        spotColor: params.color,
+        spotRadius: 0,
+        lineWidth: 2,
+        highlightColor: hexToRgba(params.color, .6),
+        highlightLineColor: '#666',
+        defaultPixelsPerValue: 5
+      });
+    };

-                generateSparkline($chart, JSON.parse($chart.attr('data-sparkline')), {
-                    color: $chart.attr('data-sparkline-color')
-                });
-            });
+    require(['sparkline'], function() {
+      $('[data-sparkline]').each(function() {
+        let $chart = $(this);
+
+        generateSparkline($chart, JSON.parse($chart.attr('data-sparkline')), {
+          color: $chart.attr('data-sparkline-color')
        });
-    }
+      });
+    });
+  }

+  /**  */
+  if ($('.chart-circle').length) {
+    require(['circle-progress'], function() {
+      $('.chart-circle').each(function() {
+        let $this = $(this);

-    if($('.chart-circle').length) {
-        require(['circle-progress'], function () {
-            $('.chart-circle').each(function () {
-                var $this = $(this);
-                $this.circleProgress({
-                    fill: {
-                        color: tabler.colors[$this.attr('data-color')] || tabler.colors.blue
-                    },
-                    size: $this.height(),
-                    startAngle: -Math.PI / 4 * 2,
-                    emptyFill: '#F4F4F4',
-                    lineCap: 'round'
-                });
-            });
+        $this.circleProgress({
+          fill: {
+            color: tabler.colors[$this.attr('data-color')] || tabler.colors.blue
+          },
+          size: $this.height(),
+          startAngle: -Math.PI / 4 * 2,
+          emptyFill: '#F4F4F4',
+          lineCap: 'round'
        });
-    }
+      });
+    });
+  }
 });
--- a/src/assets/plugins/charts-c3/scss/_c3.scss
+++ b/src/assets/plugins/charts-c3/scss/_c3.scss
@@ -1,6 +1,5 @@
 /*-- Chart --*/
 .c3 {
-	overflow: hidden;
 }

 .c3 svg {
--- a/src/assets/scss/bundle.scss
+++ b/src/assets/scss/bundle.scss
@@ -3,5 +3,5 @@ Dashboard UI
 */

@import 'variables';
-@import 'dashboard/bootstrap/bootstrap';
+@import '../../../node_modules/bootstrap/scss/bootstrap.scss';
@import 'dashboard/dashboard';
--- a/src/assets/scss/dashboard/_aside.scss
+++ b/src/assets/scss/dashboard/_aside.scss
@@ -21,7 +21,7 @@

 .aside-body {
 	padding: 1.5rem;
-	flex: 1;
+	flex: 1 1 auto;
 	overflow: auto;
 }

--- a/src/assets/scss/dashboard/_cards.scss
+++ b/src/assets/scss/dashboard/_cards.scss
@@ -15,7 +15,7 @@
 }

 .card-body {
-	flex: 1;
+	flex: 1 1 auto;
 	margin: 0;
 	padding: $card-spacer-y $card-spacer-x;
 	position: relative;
@@ -322,7 +322,7 @@ Card tabs
 }

 .card-tabs-item {
-	flex: 1;
+	flex: 1 1 auto;
 	display: block;
 	padding: 1rem $card-spacer-x;
 	border-bottom: 1px solid $border-color;
--- a/src/assets/scss/dashboard/_core.scss
+++ b/src/assets/scss/dashboard/_core.scss
@@ -1,10 +1,7 @@
 html {
-	font-size: 15px;
+	font-size: 16px;
 	height: 100%;
-
-	@include media-breakpoint-up('md') {
-		font-size: 16px;
-	}
+	direction: ltr;
 }

 body {
--- a/src/assets/scss/dashboard/_dropdown.scss
+++ b/src/assets/scss/dashboard/_dropdown.scss
@@ -5,14 +5,17 @@
 .dropdown-menu {
 	box-shadow: $dropdown-box-shadow;
 	min-width: 12rem;
-	max-width: 100%;
+}
+
+.dropdown-item {
+	color: $text-muted-dark;
 }

 .dropdown-menu-arrow {
 	&:before {
 		position: absolute;
 		top: -6px;
-		right: 12px;
+		left: 12px;
 		display: inline-block;
 		border-right: 5px solid transparent;
 		border-bottom: 5px solid $border-color;
@@ -24,13 +27,21 @@
 	&:after {
 		position: absolute;
 		top: -5px;
-		right: 12px;
+		left: 12px;
 		display: inline-block;
 		border-right: 5px solid transparent;
 		border-bottom: 5px solid #fff;
 		border-left: 5px solid transparent;
 		content: '';
 	}
+
+	&.dropdown-menu-right {
+		&:before,
+		&:after {
+			left: auto;
+			right: 12px;
+		}
+	}
 }

 .dropdown-toggle {
@@ -47,7 +58,7 @@
 }

 .dropdown-icon {
-	color: $text-muted-dark;
+	color: $text-muted;
 	margin-right: .5rem;
 	margin-left: -.5rem;
 	width: 1em;
--- a/src/assets/scss/dashboard/_example.scss
+++ b/src/assets/scss/dashboard/_example.scss
@@ -3,7 +3,6 @@
 	border: 1px solid $border-color;
 	border-radius: 3px 3px 0 0;
 	font-size: px2rem(15px);
-	overflow: hidden;
 }

 .example-bg {
--- a/src/assets/scss/dashboard/_form.scss
+++ b/src/assets/scss/dashboard/_form.scss
@@ -34,7 +34,6 @@ textarea {

 .custom-control {
 	user-select: none;
-	margin: 0;
 }

 .custom-controls-stacked {
--- a/src/assets/scss/dashboard/_grid.scss
+++ b/src/assets/scss/dashboard/_grid.scss
@@ -19,7 +19,7 @@
 		align-items: stretch;

 		.card {
-			flex: 1;
+			flex: 1 1 auto;
 		}
 	}
 }
--- a/src/assets/scss/dashboard/_header.scss
+++ b/src/assets/scss/dashboard/_header.scss
@@ -1,7 +1,6 @@
 .header {
-	padding-top: 1rem;
-	padding-bottom: 1rem;
-	//height: $header-height;
+	padding-top: .75rem;
+	padding-bottom: .75rem;
 	background: #fff;
 	border-bottom: 1px solid $border-color;

@@ -17,30 +16,6 @@
 		display: none;
 	}

-	.nav-link,
-	.nav-item {
-		padding: 0 .75rem;
-		min-width: 2rem;
-		transition: .3s color;
-		user-select: none;
-		cursor: pointer;
-		line-height: 1;
-		display: flex;
-		align-items: center;
-
-		&:hover {
-			//color: $body-color !important;
-		}
-
-		.badge {
-			position: absolute;
-			top: 0;
-			right: 0;
-			padding: .2rem .25rem;
-			min-width: 1rem
-		}
-	}
-
 	.dropdown-menu {
 		margin-top: .75rem;
 	}
@@ -56,7 +31,7 @@
 	border-radius: 50%;
 }

-.navbar-brand {
+.header-brand {
 	color: inherit;
 	margin-right: 1rem;
 	font-size: 1.25rem;
@@ -73,7 +48,7 @@
 	}
 }

-.navbar-brand-img {
+.header-brand-img {
 	height: 2rem;
 	line-height: 2rem;
 	vertical-align: bottom;
@@ -89,45 +64,20 @@
 	border-radius: 50%;
 }

-.header-overlay {
-	position: fixed;
-	top: $header-height;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	background: rgba(26,54,80,0.1);
-	visibility: hidden;
-	opacity: 0;
-	z-index: $zindex-overlay;
-	transition: .6s opacity, .6s visibility;
-	backdrop-filter: blur(1px);
-
-
-	.dropdown-menu.show + & {
-		visibility: visible;
-		opacity: 1;
-	}
-}
-
-.header-nav {
-	background: #fff;
-	border-bottom: 1px solid $border-color;
-	color: $text-muted;
-	align-items: center;
-
-
-	@media print {
-		display: none;
-	}
-
-	.nav-tabs {
-		border: 0;
-
-		.nav-item + .nav-item {
-			margin-left: 1.5rem;
-		}
-	}
-}
+//.header-nav {
+//	background: #fff;
+//	border-bottom: 1px solid $border-color;
+//	color: $text-muted;
+//	align-items: center;
+//
+//	@media print {
+//		display: none;
+//	}
+//
+//	.nav-tabs {
+//		border: 0;
+//	}
+//}

 .header-btn {
 	display: inline-block;
@@ -151,4 +101,28 @@
 			border-radius: 50%;
 		}
 	}
+}
+
+.header-toggler {
+	width: 2rem;
+	height: 2rem;
+	position: relative;
+	color: $text-muted;
+
+	&:hover {
+		color: $text-muted-dark;
+	}
+}
+
+.header-toggler-icon {
+	position: absolute;
+	width: 1rem;
+	height: 2px;
+	color: inherit;
+	background: currentColor;
+	border-radius: 3px;
+	top: 50%;
+	left: 50%;
+	margin: -2px 0 0 -.5rem;
+	box-shadow: 0 5px currentColor, 0 -5px currentColor;
 }
--- a/src/assets/scss/dashboard/_layout.scss
+++ b/src/assets/scss/dashboard/_layout.scss
@@ -16,7 +16,7 @@
 }

 .page-main {
-	flex: 1;
+	flex: 1 1 auto;
 }

 .page-content {
@@ -74,7 +74,7 @@
 }

 .page-single {
-	flex: 1;
+	flex: 1 1 auto;
 	display: flex;
 	align-items: center;
 	justify-content: center;
--- a/src/assets/scss/dashboard/_nav.scss
+++ b/src/assets/scss/dashboard/_nav.scss
@@ -1,5 +1,26 @@
+.nav-link,
+.nav-item {
+	padding: 0 .75rem;
+	min-width: 2rem;
+	transition: .3s color;
+	user-select: none;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+
+	.badge {
+		position: absolute;
+		top: 0;
+		right: 0;
+		padding: .2rem .25rem;
+		min-width: 1rem
+	}
+}
+
 .nav-tabs {
 	user-select: none;
+	color: $text-muted;
+	margin: 0 -.75rem;

 	.nav-link {
 		border: 0;
@@ -10,17 +31,17 @@
 		font-weight: 400;
 		padding: 1rem 0;

+		&:hover:not(.disabled) {
+			border-color: $text-muted-dark;
+			color: $text-muted-dark;
+		}
+
 		&.active {
 			border-color: $blue;
 			color: $blue;
 			background: transparent;
 		}

-		&:hover:not(.disabled) {
-			border-color: $text-muted-dark;
-			color: $text-muted-dark;
-		}
-
 		&.disabled {
 			opacity: .4;
 			cursor: default;
@@ -41,10 +62,6 @@
 			display: inline-block;
 		}

-		+ .nav-item {
-			margin-left: 1.25rem;
-		}
-
 		&:hover {
 			.nav-submenu {
 				display: block;
@@ -85,6 +102,6 @@
 }

 .nav-link {
-	display: block;
-	padding: 0.25rem 0.75rem;
+	//display: block;
+	//padding: 0.25rem 0.75rem;
 }
--- a/src/assets/scss/dashboard/bootstrap/_media.scss
+++ b/src/assets/scss/dashboard/bootstrap/_media.scss
@@ -4,5 +4,5 @@
 }

 .media-body {
-  flex: 1;
+  flex: 1 1 auto;
 }
--- a/src/cards.html
+++ b/src/cards.html
@@ -45,7 +45,7 @@ menu: interface.cards
 			{% include cards/card.html title="With additional fullscreen button" show-fullscreen=true %}
 		</div>
 		<div class="col-lg-6">
-			{% include cards/card.html title="Pannel with custom buttons" show-buttons=true %}
+			{% include cards/card.html title="Panel with custom buttons" show-buttons=true %}
 		</div>
 		<div class="col-lg-6">
 			{% include cards/card.html title="Card with search form" show-form=true %}
@@ -54,7 +54,7 @@ menu: interface.cards
 			{% include cards/card.html title="Card with alert" alert="Adding action was successful" %}
 		</div>
 		<div class="col-lg-6 col-xl-4">
-			{% include cards/card.html title="Card with alert" alert="Adding action was failed" alert-type="danger" %}
+			{% include cards/card.html title="Card with alert" alert="Adding action failed" alert-type="danger" %}
 		</div>
 		<div class="col-lg-6 col-xl-4">
 			{% include cards/card.html title="Card with switch" show-switch=true %}
@@ -63,4 +63,4 @@ menu: interface.cards
 			{% include cards/card.html title="Card with loader" show-loader=true %}
 		</div>
 	</div>
-</div>
+</div>
--- a/src/empty.html
+++ b/src/empty.html
@@ -1,4 +1,5 @@
 ---
 title: Empty page
 layout: default
+menu: pages.empty
 ---
--- a/src/index.html
+++ b/src/index.html
@@ -45,7 +45,7 @@ menu: index
 					{% include cards/chart.html height=12 title="Chart title" id="chart-pie" data="pie" %}
 				</div>
 				<div class="col-sm-4">
-					{% include cards/digit.html color="red" title="New fedbacks" digit="62" width="28%" %}
+					{% include cards/digit.html color="red" title="New feedback" digit="62" width="28%" %}
 				</div>
 				<div class="col-sm-4">
 					{% include cards/digit.html color="green" title="Today profit" digit="$652" width="84%" %}
@@ -116,4 +116,4 @@ menu: index
 			{% include cards/invoices.html %}
 		</div>
 	</div>
-</div>
+</div>
--- a/src/rtl.html
+++ b/src/rtl.html
@@ -0,0 +1,39 @@
+---
+layout: default
+rtl: true
+title: RTL mode
+menu: pages.rtl
+---
+
+<div class="container">
+	{% include page-title.html title="RTL mode" %}
+
+	<div class="row">
+		<div class="col-6">
+			{% capture body %}
+			لكن لا بد أن أوضح لك أن كل هذه الأفكار المغلوطة حول استنكار  النشوة وتمجيد الألم نشأت بالفعل، وسأعرض لك التفاصيل لتكتشف حقيقة وأساس تلك السعادة البشرية، فلا أحد يرفض أو يكره أو يتجنب الشعور بالسعادة، ولكن بفضل هؤلاء الأشخاص الذين لا يدركون بأن السعادة لا بد أن نستشعرها بصورة أكثر عقلانية ومنطقية فيعرضهم هذا لمواجهة الظروف الأليمة، وأكرر بأنه لا يوجد من يرغب في الحب ونيل المنال ويتلذذ بالآلام، الألم هو الألم ولكن نتيجة لظروف ما قد تكمن السعاده فيما نتحمله من كد وأسي.
+
+			و سأعرض مثال حي لهذا، من منا لم يتحمل جهد بدني شاق إلا من أجل الحصول على ميزة أو فائدة؟ ولكن من لديه الحق أن ينتقد شخص ما أراد أن يشعر بالسعادة التي لا تشوبها عواقب أليمة أو آخر أراد أن يتجنب الألم الذي ربما تنجم عنه بعض المتعة ؟
+			علي الجانب الآخر نشجب ونستنكر هؤلاء الرجال المفتونون بنشوة اللحظة الهائمون في رغباتهم فلا يدركون ما يعقبها من الألم والأسي المحتم، واللوم كذلك يشمل هؤلاء الذين أخفقوا في واجباتهم نتيجة لضعف إرادتهم فيتساوي مع هؤلاء الذين يتجنبون وينأون عن تحمل الكدح والألم .
+			{% endcapture %}
+
+			{% include cards/card.html body=body title="عنوان البطاقة" %}
+		</div>
+		<div class="col-6">
+			<div class="row">
+				<div class="col-4">
+					{% include cards/stats-1.html number=43 title="تذاكر جديدة" percentage=6 %}
+				</div>
+				<div class="col-4">
+					{% include cards/stats-1.html number=17 title="مغلق اليوم" percentage=-3 %}
+				</div>
+				<div class="col-4">
+					{% include cards/stats-1.html number="27.3K" title="متابعون" percentage=2 %}
+				</div>
+				<div class="col-12">
+					{% include cards/twitter.html %}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
--- a/src/sample-cards.html
+++ b/src/sample-cards.html
@@ -139,7 +139,7 @@ menu: cards
 					{% include cards/client.html %}
 					{% include cards/digit.html %}
 					<div class="row row-deck">
-						<div class="col-6">{% include cards/digit.html color="red" title="New fedbacks" digit="62" width="34%" %}</div>
+						<div class="col-6">{% include cards/digit.html color="red" title="New feedback" digit="62" width="34%" %}</div>
 						<div class="col-6">{% include cards/digit.html color="green" title="Users online" digit="76" width="32%" %}</div>
 					</div>
 					{% include cards/digit.html color="yellow" title="Profit for this month" digit="$65,256" width="85%" %}
--- a/src/sw.js
+++ b/src/sw.js
Author	SHA1	Message	Date
chomik	84bdbebe8f	0.0.30	2018-04-06 16:27:45 +02:00
chomik	75f0f760a6	version 0.0.30	2018-04-06 16:27:45 +02:00
chomik	cdd8b7e2e3	#23	2018-04-06 16:26:13 +02:00
chomik	628306accc	#51	2018-04-06 16:23:33 +02:00
chomik	65464678a3	Merge remote-tracking branch 'origin/dev' into dev # Conflicts: # dist-new-version.sh # dist/400.html # dist/401.html # dist/403.html # dist/404.html # dist/500.html # dist/503.html # dist/blog.html # dist/cards.html # dist/charts.html # dist/crypto-currencies.html # dist/docs/alerts.html # dist/docs/avatars.html # dist/docs/buttons.html # dist/docs/cards.html # dist/docs/charts.html # dist/docs/colors.html # dist/docs/form-components.html # dist/docs/grid.html # dist/docs/index.html # dist/docs/tags.html # dist/docs/typography.html # dist/email.html # dist/empty.html # dist/forgot-password.html # dist/form-elements.html # dist/gallery.html # dist/icons.html # dist/index.html # dist/invoice.html # dist/login.html # dist/lookup.html # dist/maps.html # dist/pagination.html # dist/pricing-cards.html # dist/profile.html # dist/register.html # dist/sample-cards.html # dist/store.html # dist/users-list.html # package.json	2018-04-06 16:21:03 +02:00
Paweł Kuna	bbc20ac4eb	Update menu.yml	2018-04-06 14:35:25 +02:00
Paweł Kuna	d0c18f2b63	Update menu.yml	2018-04-06 14:20:15 +02:00
Paweł Kuna	0e99cdd0bd	test	2018-04-06 14:18:37 +02:00
codecalm	b4f25dbf2c	top menu dropdowns	2018-04-06 00:21:29 +02:00
codecalm	fac135615f	header toggler	2018-04-06 00:05:27 +02:00
codecalm	a3362afd58	header top nav toggler	2018-04-05 23:39:58 +02:00
codecalm	5e8e7b0759	Merge branch 'dev' of https://github.com/tabler/tabler into dev	2018-04-05 23:29:47 +02:00
codecalm	c08a07436c	header nav menu, small fixes	2018-04-05 23:24:02 +02:00
Paweł Kuna	1c15127a79	Delete PULL_REQUEST_TEMPLATE.md	2018-04-05 22:42:30 +02:00
Paweł Kuna	733f974b1c	menu.yml fix	2018-04-05 16:49:22 +02:00
Paweł Kuna	6d50163725	Update menu.yml	2018-04-05 15:22:06 +02:00
Paweł Kuna	9ddb1f9dd2	Merge pull request #58 from tabler/master Merge master -> dev	2018-04-05 15:08:32 +02:00
Paweł Kuna	1002b9c5f8	Update README.md	2018-04-05 15:01:07 +02:00
Paweł Kuna	5d94d69e26	dev sandboxes url	2018-04-05 15:00:41 +02:00
Bram Borggreve	b76d1ca3a9	Merge pull request #39 from Git-Good/master Edited for wordchoice, contractions	2018-04-04 18:13:28 -05:00
Git-Good	ec066699b8	Merge branch 'master' into master	2018-04-04 15:57:18 -07:00
Bram Borggreve	ebb40be910	Merge pull request #52 from beeman/beeman/add-slack-to-readme Add link to slack invite page	2018-04-04 16:01:26 -05:00
Bram Borggreve	9d534eed87	Add link to slack invite page	2018-04-04 15:57:27 -05:00
codecalm	e7f87265d1	version 0.0.24	2018-04-04 18:58:36 +02:00
codecalm	2cc655e7d1	remove sw.js file	2018-04-04 18:52:10 +02:00
codecalm	f4b70c78f5	version 0.0.23	2018-04-04 18:48:03 +02:00
codecalm	a5c81dc5b6	Merge branches 'dev' and 'master' of https://github.com/tabler/tabler	2018-04-04 18:46:58 +02:00
codecalm	e7f0b01ed7	rtl mode	2018-04-04 18:44:28 +02:00
codecalm	2b3f874264	version 0.0.22	2018-04-04 17:57:29 +02:00
codecalm	2f95440428	fix #20	2018-04-04 17:55:49 +02:00
codecalm	728348fbd9	Merge branches 'dev' and 'master' of https://github.com/tabler/tabler into dev	2018-04-04 17:50:12 +02:00
Paweł Kuna	414f452cbc	Merge pull request #50 from cehnegaitne/patch-1 Changed a few sentence structures	2018-04-04 17:05:57 +02:00
Andy Tse	14bbc520cf	Changed a few sentence structures Rewrote a few sentences to remove unnecessary words. Fixed grammar issues.	2018-04-04 07:50:58 -07:00
chomik	80e63b200c	0.0.21	2018-04-04 16:20:24 +02:00
chomik	b293328ce1	version 0.0.21	2018-04-04 16:20:23 +02:00
chomik	311789b08e	0.0.20	2018-04-04 16:13:41 +02:00
chomik	d04eab4c52	version 0.0.20	2018-04-04 16:13:41 +02:00
chomik	3985a5d1e6	0.0.20	2018-04-04 16:13:00 +02:00
chomik	a81e1d5ea3	version 0.0.20	2018-04-04 16:13:00 +02:00
chomik	d3157e6277	Merge branches 'dev' and 'master' of https://github.com/tabler/tabler into dev	2018-04-04 15:15:59 +02:00
chomik	466c2504f3	Merge remote-tracking branch 'origin/master'	2018-04-04 15:15:39 +02:00
chomik	13c9141866	jekyll host fix	2018-04-04 15:15:34 +02:00
Paweł Kuna	1fb1eef7ba	status <=> features change	2018-04-04 14:19:15 +02:00
Paweł Kuna	02a383cbcf	Update README.md	2018-04-04 14:15:32 +02:00
chomik	5296c523ac	Merge branches 'dev' and 'master' of https://github.com/tabler/tabler into dev	2018-04-04 12:45:16 +02:00
Paweł Kuna	8b0917c548	Merge pull request #46 from roanvanbao/master Support composer	2018-04-04 11:50:50 +02:00
Bao Bao	a7f5b22200	Support composer	2018-04-04 16:42:52 +07:00
Paweł Kuna	03e7ec5711	Merge pull request #44 from tabler/revert-43-master Revert "Update README for content / readability "	2018-04-04 10:49:10 +02:00
Paweł Kuna	e3b837b4c5	Revert "Update README for content / readability "	2018-04-04 10:49:01 +02:00
Paweł Kuna	0f7b572b94	Merge pull request #43 from Shloken/master Update README for content / readability	2018-04-04 10:47:33 +02:00
Andrew Hainer	9ea0fe0f06	Update README.md	2018-04-04 04:25:49 -04:00
Andrew Hainer	d5bf80fe64	Update README.md	2018-04-04 04:09:44 -04:00
chomik	3b31588a73	0.0.19	2018-04-04 10:03:25 +02:00
chomik	da5d3ebb60	version 0.0.19	2018-04-04 10:03:24 +02:00
chomik	e530e5388a	add scss files to `dist/` dir	2018-04-04 10:03:12 +02:00
chomik	9d74ea9d87	0.0.18	2018-04-04 09:41:01 +02:00
chomik	1c2123a805	version 0.0.18	2018-04-04 09:41:01 +02:00
chomik	74ffca91f8	generate dist	2018-04-04 09:36:23 +02:00
chomik	838f1eafdb	Merge branches 'dev' and 'master' of https://github.com/tabler/tabler into dev	2018-04-04 09:34:19 +02:00
Paweł Kuna	4b7e52133d	Merge pull request #27 from jwc1/master Update README.md	2018-04-04 09:33:36 +02:00
Paweł Kuna	7a4a6de943	Merge pull request #28 from altern8tif/altern8tif-patch-1 Update typo in demo pages	2018-04-04 09:20:51 +02:00
Paweł Kuna	f93c81346c	Merge pull request #25 from domProjects/master JS code change with Google guide recommendations	2018-04-04 09:18:27 +02:00
Paweł Kuna	c7d9c02daf	Merge pull request #36 from beeman/beeman/typos Fix some typos	2018-04-04 09:17:48 +02:00
Paweł Kuna	46a2645bad	Merge pull request #40 from realgio95/patch-1 Update README.md	2018-04-04 09:17:12 +02:00
Paweł Kuna	9f53ef5380	Merge pull request #38 from eugene1g/master Fix flex issues in IE11	2018-04-04 09:16:56 +02:00
Paweł Kuna	54b7084416	Merge pull request #41 from samuelhychan/patch-1 Update README.md	2018-04-04 09:16:09 +02:00
Git-Good	991316bfe0	Update README.md	2018-04-03 19:28:50 -07:00
samuelhychan	b035135510	Update README.md	2018-04-03 18:38:58 -07:00
Giovanni HoSang	67375652e2	Update README.md	2018-04-03 18:38:38 -07:00
Git-Good	4e8e8f2bf5	Edited for wordchoice, contractions	2018-04-03 18:03:22 -07:00
Eugene G	35751817c4	Expand 'flex' shortcuts to be compatible with IE11	2018-04-03 16:39:35 -06:00
Bram Borggreve	7989ecf79e	Fix some typos	2018-04-03 13:15:30 -05:00
Kevin Kwa	588fa7e721	Update typo in card component Change "New fedbacks" to "New feedback"	2018-04-03 09:26:13 +08:00
Kevin Kwa	9794e0e0ab	Update typo in card component Change "New fedbacks" to "New feedback"	2018-04-03 09:24:22 +08:00
jwc1	2028526d9f	Update README.md	2018-04-02 17:12:06 -07:00
Emmanuel Campait	9ff148ad1c	fix Inline radios & Checkboxes not clickable/working https://github.com/tabler/tabler/issues/20	2018-04-02 17:56:51 +02:00
Emmanuel Campait	2155b2f3f7	JS code change with Google guide recommendations change var by let, block indentation +2 spaces and more	2018-03-31 14:15:41 +02:00
Paweł Kuna	534215892d	Merge pull request #22 from tdtgit/patch-1 Fix #21	2018-03-30 20:13:06 +02:00
Anh Tuấn	bffca7835d	Update menu.yml	2018-03-30 20:53:39 +07:00
Paweł Kuna	8e7b60f8ec	Merge pull request #17 from pavanjadhaw/master fix typo in README.md	2018-03-28 15:13:19 +02:00
Pavan Jadhaw	03e6a39328	fix typo	2018-03-28 18:41:44 +05:30
Paweł Kuna	bf070b41ef	Update README.md	2018-03-28 13:10:31 +02:00
codecalm	1239d3493b	header links	2018-03-27 20:59:03 +02:00
codecalm	8c4be816ee	header messages	2018-03-27 20:54:06 +02:00
Paweł Kuna	43ec11c498	Update README.md	2018-03-27 19:45:47 +02:00
Paweł Kuna	51c0412b2a	Update README.md	2018-03-27 19:45:26 +02:00
Paweł Kuna	8045c1f59d	Update README.md	2018-03-27 19:45:17 +02:00
Paweł Kuna	51e1d1c1d0	Update README.md	2018-03-27 19:44:43 +02:00
Paweł Kuna	ff7aadf46a	Update README.md	2018-03-27 19:41:30 +02:00
Paweł Kuna	4504f09cc1	Update README.md	2018-03-27 19:41:01 +02:00
Paweł Kuna	6dd1981e03	Update README.md	2018-03-27 19:39:41 +02:00
chomik	7a7ac6075f	0.0.16	2018-03-27 13:25:05 +02:00
chomik	7d78c6c1fe	generate dist	2018-03-27 13:25:05 +02:00
chomik	e7db5c2fe2	users table hotfix	2018-03-27 13:24:44 +02:00
chomik	f5b87fbf83	new version generate script	2018-03-27 12:05:05 +02:00
chomik	cc0878e45a	0.0.15	2018-03-27 12:00:09 +02:00
chomik	7bb2415758	version 0.0.15	2018-03-27 12:00:08 +02:00
chomik	bc8f126d9b	0.0.14	2018-03-27 11:42:59 +02:00
chomik	4ab148baf5	version 0.0.14	2018-03-27 11:42:51 +02:00
chomik	6a9e301852	0.0.13	2018-03-27 11:39:16 +02:00
chomik	8bf83f3cd4	version 0.0.13	2018-03-27 11:39:05 +02:00
chomik	d749fbfd4a	0.0.12	2018-03-27 11:37:55 +02:00
chomik	bf688f4012	version 0.0.12	2018-03-27 11:37:46 +02:00
chomik	33f9002af8	version 0.0.11	2018-03-27 11:34:06 +02:00
chomik	bceab0920c	0.0.11	2018-03-27 11:30:11 +02:00
chomik	033aac3f5b	0.0.9	2018-03-27 11:30:02 +02:00
chomik	93cfdaa9c8	0.0.10	2018-03-27 11:29:58 +02:00