0.0.32

version 0.0.32
version 0.0.31
2025-12-21 17:34:25 +04:00 · 2018-04-16 09:29:07 +02:00 · 2018-04-16 09:29:07 +02:00 · 2018-04-16 09:28:18 +02:00 · 2018-04-16 09:14:01 +02:00 · 2018-04-16 09:11:34 +02:00
186 changed files with 60153 additions and 10316 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,15 +1,12 @@
 .idea/
 _site/
-/Gemfile.lock
 /node_modules/
 /.sass-cache/
 /.jekyll-metadata
 /.asset-cache/
 .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
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -0,0 +1,82 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.5.2)
+      public_suffix (>= 2.0.2, < 4.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.0.5)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    eventmachine (1.2.5)
+    ffi (1.9.21)
+    forwardable-extended (2.6.0)
+    htmlbeautifier (1.3.1)
+    htmlcompressor (0.4.0)
+    http_parser.rb (0.6.0)
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.7.2)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 0.7)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 1.14)
+      liquid (~> 4.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (>= 1.7, < 4)
+      safe_yaml (~> 1.0)
+    jekyll-random (0.0.3)
+      jekyll (~> 3.3)
+    jekyll-redirect-from (0.13.0)
+      jekyll (~> 3.3)
+    jekyll-sass-converter (1.5.2)
+      sass (~> 3.4)
+    jekyll-tidy (0.2.2)
+      htmlbeautifier
+      htmlcompressor
+      jekyll
+    jekyll-toc (0.5.1)
+      nokogiri (~> 1.6)
+    jekyll-watch (2.0.0)
+      listen (~> 3.0)
+    kramdown (1.16.2)
+    liquid (4.0.0)
+    listen (3.1.5)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+      ruby_dep (~> 1.2)
+    mercenary (0.3.6)
+    mini_portile2 (2.3.0)
+    nokogiri (1.8.2)
+      mini_portile2 (~> 2.3.0)
+    pathutil (0.16.1)
+      forwardable-extended (~> 2.6)
+    public_suffix (3.0.0)
+    rb-fsevent (0.10.2)
+    rb-inotify (0.9.10)
+      ffi (>= 0.5.0, < 2)
+    rouge (3.1.1)
+    ruby_dep (1.5.0)
+    safe_yaml (1.0.4)
+    sass (3.5.5)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  jekyll-random!
+  jekyll-redirect-from!
+  jekyll-tidy!
+  jekyll-toc!
+  public_suffix (= 3.0.0)!
+
+BUNDLED WITH
+   1.16.1
--- 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
@@ -4,7 +4,7 @@

 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></strong>
+<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>

@@ -14,18 +14,20 @@ Premium and Open Source dashboard template with responsive and high quality UI.

 <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 template 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!
+
+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’re working hard to support them.
+* **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 have variation in color and styling, that can easily be modified using Sass. The sky is the limit!
+* **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)

+
 ## Documentation

 For full documentation, visit [tabler.github.io/tabler/docs](https://tabler.github.io/tabler/docs/index.html).
@@ -40,7 +42,7 @@ git clone https://github.com/tabler/tabler.git

 ### Setup environment

-To use our build system and run documentation locally, you'll need a copy of Tabler's source files and Node. Follow the steps below:
+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 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`.
@@ -48,7 +50,7 @@ To use our build system and run documentation locally, you'll need a copy of Tab
   
   **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 in the command line.
+When completed, you will be able to run the various commands provided in the command line.

 ### Build Tabler

@@ -58,6 +60,10 @@ When completed, you'll be able to run the various commands provided in the comma

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

+## Development preview
+
+All changes made on `dev` branch are avaliable on http://tabler.codecalm.net/dev/. 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).
@@ -65,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
@@ -27,6 +27,8 @@ exclude:
  - .asset-cache/
  - push-to-repo.sh
  - commits.sh
+  - assets/scss/*
+  - assets/plugins/**/*.scss

 collections:
  docs:
@@ -72,66 +74,66 @@ docs-menu:
    pages: [alerts, avatars, buttons, colors, cards, charts, form-components, tags, typography]

 colors:
-  blue: 
+  blue:
    hex: '#467fcf'
    name: Blue
-  azure: 
+  azure:
    hex: '#45aaf2'
    name: Azure
-  indigo: 
+  indigo:
    hex: '#6574cd'
    name: Indigo
-  purple: 
+  purple:
    hex: '#a55eea'
    name: Purple
-  pink: 
+  pink:
    hex: '#f66d9b'
    name: Pink
-  red: 
+  red:
    hex: '#e74c3c'
    name: Red
-  orange: 
+  orange:
    hex: '#fd9644'
    name: Orange
-  yellow: 
+  yellow:
    hex: '#f1c40f'
    name: Yellow
-  lime: 
+  lime:
    hex: '#7bd235'
    name: Lime
-  green: 
+  green:
    hex: '#5eba00'
    name: Green
-  teal: 
+  teal:
    hex: '#2bcbba'
    name: Teal
-  cyan: 
+  cyan:
    hex: '#17a2b8'
    name: Cyan
-  gray: 
+  gray:
    hex: '#868e96'
    name: Gray
-  gray-dark: 
+  gray-dark:
    hex: '#343a40'
    name: Dark gray

 theme-colors:
-  primary: 
+  primary:
    hex: '#467fcf'
    name: Primary
-  secondary: 
+  secondary:
    hex: '#868e96'
    name: Secondary
-  success: 
+  success:
    hex: '#38c172'
    name: Success
-  info: 
+  info:
    hex: '#17a2b8'
    name: Info
-  warning: 
+  warning:
    hex: '#f8b700'
    name: Warning
-  danger: 
+  danger:
    hex: '#f90049'
    name: Danger
 #  light:
--- a/dist-new-version.sh
+++ b/dist-new-version.sh
@@ -1,6 +1,6 @@
 #!/usr/bin/env bash

-version=0.0.21
+version=0.0.32

 echo "Version $version"

--- 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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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
@@ -3,7 +3,7 @@
 Dashboard UI
 */
 /*!
- * Bootstrap v4.0.0 (https://getbootstrap.com)
+ * Bootstrap v4.1.0 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
@@ -1838,6 +1838,12 @@ pre code {
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }

+@media screen and (prefers-reduced-motion: reduce) {
+  .form-control {
+    transition: none;
+  }
+}
+
 .form-control::-ms-expand {
  background-color: transparent;
  border: 0;
@@ -2327,6 +2333,12 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }

+@media screen and (prefers-reduced-motion: reduce) {
+  .btn {
+    transition: none;
+  }
+}
+
 .btn:hover, .btn:focus {
  text-decoration: none;
 }
@@ -2918,6 +2930,7 @@ fieldset:disabled a.btn {

 .btn-link:disabled, .btn-link.disabled {
  color: #868e96;
+  pointer-events: none;
 }

 .btn-lg, .btn-group-lg > .btn {
@@ -2950,30 +2963,23 @@ input[type="button"].btn-block {
 }

 .fade {
-  opacity: 0;
  transition: opacity 0.15s linear;
 }

-.fade.show {
-  opacity: 1;
+@media screen and (prefers-reduced-motion: reduce) {
+  .fade {
+    transition: none;
+  }
 }

-.collapse {
+.fade:not(.show) {
+  opacity: 0;
+}
+
+.collapse:not(.show) {
  display: none;
 }

-.collapse.show {
-  display: block;
-}
-
-tr.collapse.show {
-  display: table-row;
-}
-
-tbody.collapse.show {
-  display: table-row-group;
-}
-
 .collapsing {
  position: relative;
  height: 0;
@@ -2981,8 +2987,16 @@ tbody.collapse.show {
  transition: height 0.35s ease;
 }

+@media screen and (prefers-reduced-motion: reduce) {
+  .collapsing {
+    transition: none;
+  }
+}
+
 .dropup,
-.dropdown {
+.dropright,
+.dropdown,
+.dropleft {
  position: relative;
 }

@@ -3023,7 +3037,14 @@ tbody.collapse.show {
  border-radius: 3px;
 }

+.dropdown-menu-right {
+  right: 0;
+  left: auto;
+}
+
 .dropup .dropdown-menu {
+  top: auto;
+  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.125rem;
 }
@@ -3046,6 +3067,9 @@ tbody.collapse.show {
 }

 .dropright .dropdown-menu {
+  top: 0;
+  right: auto;
+  left: 100%;
  margin-top: 0;
  margin-left: 0.125rem;
 }
@@ -3058,6 +3082,7 @@ tbody.collapse.show {
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
+  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
 }
@@ -3071,6 +3096,9 @@ tbody.collapse.show {
 }

 .dropleft .dropdown-menu {
+  top: 0;
+  right: 100%;
+  left: auto;
  margin-top: 0;
  margin-right: 0.125rem;
 }
@@ -3108,6 +3136,11 @@ tbody.collapse.show {
  vertical-align: 0;
 }

+.dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], .dropdown-menu[x-placement^="bottom"], .dropdown-menu[x-placement^="left"] {
+  right: auto;
+  bottom: auto;
+}
+
 .dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
@@ -3236,10 +3269,16 @@ tbody.collapse.show {
  padding-left: 0.5625rem;
 }

-.dropdown-toggle-split::after {
+.dropdown-toggle-split::after,
+.dropup .dropdown-toggle-split::after,
+.dropright .dropdown-toggle-split::after {
  margin-left: 0;
 }

+.dropleft .dropdown-toggle-split::before {
+  margin-right: 0;
+}
+
 .btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
@@ -3634,12 +3673,12 @@ tbody.collapse.show {
  opacity: 0;
 }

-.custom-file-input:focus ~ .custom-file-control {
+.custom-file-input:focus ~ .custom-file-label {
  border-color: #1991eb;
  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
 }

-.custom-file-input:focus ~ .custom-file-control::before {
+.custom-file-input:focus ~ .custom-file-label::after {
  border-color: #1991eb;
 }

@@ -3844,8 +3883,8 @@ tbody.collapse.show {
 .nav-tabs .nav-link.active,
 .nav-tabs .nav-item.show .nav-link {
  color: #495057;
-  background-color: #f5f7fb;
-  border-color: #dee2e6 #dee2e6 #f5f7fb;
+  background-color: transparent;
+  border-color: #dee2e6 #dee2e6 transparent;
 }

 .nav-tabs .dropdown-menu {
@@ -4009,10 +4048,6 @@ tbody.collapse.show {
  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }
-  .navbar-expand-sm .navbar-nav .dropdown-menu-right {
-    right: 0;
-    left: auto;
-  }
  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
@@ -4031,10 +4066,6 @@ tbody.collapse.show {
  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
-  .navbar-expand-sm .dropup .dropdown-menu {
-    top: auto;
-    bottom: 100%;
-  }
 }

@media (max-width: 767.98px) {
@@ -4059,10 +4090,6 @@ tbody.collapse.show {
  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }
-  .navbar-expand-md .navbar-nav .dropdown-menu-right {
-    right: 0;
-    left: auto;
-  }
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
@@ -4081,10 +4108,6 @@ tbody.collapse.show {
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
-  .navbar-expand-md .dropup .dropdown-menu {
-    top: auto;
-    bottom: 100%;
-  }
 }

@media (max-width: 991.98px) {
@@ -4109,10 +4132,6 @@ tbody.collapse.show {
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }
-  .navbar-expand-lg .navbar-nav .dropdown-menu-right {
-    right: 0;
-    left: auto;
-  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
@@ -4131,10 +4150,6 @@ tbody.collapse.show {
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
-  .navbar-expand-lg .dropup .dropdown-menu {
-    top: auto;
-    bottom: 100%;
-  }
 }

@media (max-width: 1279.98px) {
@@ -4159,10 +4174,6 @@ tbody.collapse.show {
  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }
-  .navbar-expand-xl .navbar-nav .dropdown-menu-right {
-    right: 0;
-    left: auto;
-  }
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
@@ -4181,10 +4192,6 @@ tbody.collapse.show {
  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
-  .navbar-expand-xl .dropup .dropdown-menu {
-    top: auto;
-    bottom: 100%;
-  }
 }

 .navbar-expand {
@@ -4209,11 +4216,6 @@ tbody.collapse.show {
  position: absolute;
 }

-.navbar-expand .navbar-nav .dropdown-menu-right {
-  right: 0;
-  left: auto;
-}
-
 .navbar-expand .navbar-nav .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
@@ -4236,11 +4238,6 @@ tbody.collapse.show {
  display: none;
 }

-.navbar-expand .dropup .dropdown-menu {
-  top: auto;
-  bottom: 100%;
-}
-
 .navbar-light .navbar-brand {
  color: rgba(0, 0, 0, 0.9);
 }
@@ -4572,6 +4569,8 @@ tbody.collapse.show {
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
+    orphans: 1;
+    widows: 1;
  }
  .card-columns .card {
    display: inline-block;
@@ -4611,10 +4610,13 @@ tbody.collapse.show {
  border-radius: 3px;
 }

+.breadcrumb-item + .breadcrumb-item {
+  padding-left: 0.5rem;
+}
+
 .breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
-  padding-left: 0.5rem;
  color: #868e96;
  content: "/";
 }
@@ -5042,6 +5044,12 @@ tbody.collapse.show {
  transition: width 0.6s ease;
 }

+@media screen and (prefers-reduced-motion: reduce) {
+  .progress-bar {
+    transition: none;
+  }
+}
+
 .progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
@@ -5060,8 +5068,8 @@ tbody.collapse.show {
 }

 .media-body {
-  -ms-flex: 1 1 auto;
-  flex: 1 1 auto;
+  -ms-flex: 1;
+  flex: 1;
 }

 .list-group {
@@ -5332,6 +5340,12 @@ button.close {
  transform: translate(0, -25%);
 }

+@media screen and (prefers-reduced-motion: reduce) {
+  .modal.fade .modal-dialog {
+    transition: none;
+  }
+}
+
 .modal.show .modal-dialog {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
@@ -5776,6 +5790,12 @@ button.close {
  perspective: 1000px;
 }

+@media screen and (prefers-reduced-motion: reduce) {
+  .carousel-item {
+    transition: none;
+  }
+}
+
 .carousel-item.active,
 .carousel-item-next,
 .carousel-item-prev {
@@ -6489,6 +6509,26 @@ button.bg-dark:focus {
  flex: 1 1 auto !important;
 }

+.flex-grow-0 {
+  -ms-flex-positive: 0 !important;
+  flex-grow: 0 !important;
+}
+
+.flex-grow-1 {
+  -ms-flex-positive: 1 !important;
+  flex-grow: 1 !important;
+}
+
+.flex-shrink-0 {
+  -ms-flex-negative: 0 !important;
+  flex-shrink: 0 !important;
+}
+
+.flex-shrink-1 {
+  -ms-flex-negative: 1 !important;
+  flex-shrink: 1 !important;
+}
+
 .justify-content-start {
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
@@ -6632,6 +6672,22 @@ button.bg-dark:focus {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }
+  .flex-sm-grow-0 {
+    -ms-flex-positive: 0 !important;
+    flex-grow: 0 !important;
+  }
+  .flex-sm-grow-1 {
+    -ms-flex-positive: 1 !important;
+    flex-grow: 1 !important;
+  }
+  .flex-sm-shrink-0 {
+    -ms-flex-negative: 0 !important;
+    flex-shrink: 0 !important;
+  }
+  .flex-sm-shrink-1 {
+    -ms-flex-negative: 1 !important;
+    flex-shrink: 1 !important;
+  }
  .justify-content-sm-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
@@ -6755,6 +6811,22 @@ button.bg-dark:focus {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }
+  .flex-md-grow-0 {
+    -ms-flex-positive: 0 !important;
+    flex-grow: 0 !important;
+  }
+  .flex-md-grow-1 {
+    -ms-flex-positive: 1 !important;
+    flex-grow: 1 !important;
+  }
+  .flex-md-shrink-0 {
+    -ms-flex-negative: 0 !important;
+    flex-shrink: 0 !important;
+  }
+  .flex-md-shrink-1 {
+    -ms-flex-negative: 1 !important;
+    flex-shrink: 1 !important;
+  }
  .justify-content-md-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
@@ -6878,6 +6950,22 @@ button.bg-dark:focus {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }
+  .flex-lg-grow-0 {
+    -ms-flex-positive: 0 !important;
+    flex-grow: 0 !important;
+  }
+  .flex-lg-grow-1 {
+    -ms-flex-positive: 1 !important;
+    flex-grow: 1 !important;
+  }
+  .flex-lg-shrink-0 {
+    -ms-flex-negative: 0 !important;
+    flex-shrink: 0 !important;
+  }
+  .flex-lg-shrink-1 {
+    -ms-flex-negative: 1 !important;
+    flex-shrink: 1 !important;
+  }
  .justify-content-lg-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
@@ -7001,6 +7089,22 @@ button.bg-dark:focus {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
  }
+  .flex-xl-grow-0 {
+    -ms-flex-positive: 0 !important;
+    flex-grow: 0 !important;
+  }
+  .flex-xl-grow-1 {
+    -ms-flex-positive: 1 !important;
+    flex-grow: 1 !important;
+  }
+  .flex-xl-shrink-0 {
+    -ms-flex-negative: 0 !important;
+    flex-shrink: 0 !important;
+  }
+  .flex-xl-shrink-1 {
+    -ms-flex-negative: 1 !important;
+    flex-shrink: 1 !important;
+  }
  .justify-content-xl-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
@@ -7217,6 +7321,22 @@ button.bg-dark:focus {
  white-space: normal;
 }

+.shadow-sm {
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
+}
+
+.shadow {
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+}
+
+.shadow-lg {
+  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
+}
+
+.shadow-none {
+  box-shadow: none !important;
+}
+
 .w-25 {
  width: 25% !important;
 }
@@ -9457,6 +9577,10 @@ button.bg-dark:focus {
  }
 }

+.text-monospace {
+  font-family: Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
 .text-justify {
  text-align: justify !important;
 }
@@ -9627,10 +9751,22 @@ a.text-dark:hover, a.text-dark:focus {
  color: #1d2124 !important;
 }

+.text-body {
+  color: #495057 !important;
+}
+
 .text-muted {
  color: #9aa0ac !important;
 }

+.text-black-50 {
+  color: rgba(0, 0, 0, 0.5) !important;
+}
+
+.text-white-50 {
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+
 .text-hide {
  font: 0/0 a;
  color: transparent;
@@ -9665,7 +9801,7 @@ a.text-dark:hover, a.text-dark:focus {
  }
  pre,
  blockquote {
-    border: 1px solid #999;
+    border: 1px solid #adb5bd;
    page-break-inside: avoid;
  }
  thead {
@@ -9711,19 +9847,14 @@ a.text-dark:hover, a.text-dark:focus {
  .table-bordered th, .text-wrap table th,
  .table-bordered td,
  .text-wrap table td {
-    border: 1px solid #ddd !important;
+    border: 1px solid #dee2e6 !important;
  }
 }

 html {
-  font-size: 15px;
+  font-size: 16px;
  height: 100%;
-}
-
-@media (min-width: 768px) {
-  html {
-    font-size: 16px;
-  }
+  direction: ltr;
 }

 body {
@@ -10140,8 +10271,8 @@ body.fixed-header .page {
 }

 .header {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding-top: .75rem;
+  padding-bottom: .75rem;
  background: #fff;
  border-bottom: 1px solid rgba(0, 40, 100, 0.12);
 }
@@ -10160,32 +10291,6 @@ body.fixed-header .header {
  }
 }

-.header .nav-link,
-.header .nav-item {
-  padding: 0 .75rem;
-  min-width: 2rem;
-  transition: .3s color;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  cursor: pointer;
-  line-height: 1;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.header .nav-link .badge,
-.header .nav-item .badge {
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: .2rem .25rem;
-  min-width: 1rem;
-}
-
 .header .dropdown-menu {
  margin-top: .75rem;
 }
@@ -10200,7 +10305,7 @@ body.fixed-header .header {
  border-radius: 50%;
 }

-.navbar-brand {
+.header-brand {
  color: inherit;
  margin-right: 1rem;
  font-size: 1.25rem;
@@ -10211,13 +10316,13 @@ body.fixed-header .header {
  line-height: 2rem;
 }

-.navbar-brand:hover {
+.header-brand:hover {
  opacity: .8;
  color: inherit;
  text-decoration: none;
 }

-.navbar-brand-img {
+.header-brand-img {
  height: 2rem;
  line-height: 2rem;
  vertical-align: bottom;
@@ -10233,48 +10338,6 @@ body.fixed-header .header {
  border-radius: 50%;
 }

-.header-overlay {
-  position: fixed;
-  top: 4.5rem;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background: rgba(26, 54, 80, 0.1);
-  visibility: hidden;
-  opacity: 0;
-  z-index: 900;
-  transition: .6s opacity, .6s visibility;
-  -webkit-backdrop-filter: blur(1px);
-  backdrop-filter: blur(1px);
-}
-
-.dropdown-menu.show + .header-overlay {
-  visibility: visible;
-  opacity: 1;
-}
-
-.header-nav {
-  background: #fff;
-  border-bottom: 1px solid rgba(0, 40, 100, 0.12);
-  color: #9aa0ac;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-@media print {
-  .header-nav {
-    display: none;
-  }
-}
-
-.header-nav .nav-tabs {
-  border: 0;
-}
-
-.header-nav .nav-tabs .nav-item + .nav-item {
-  margin-left: 1.5rem;
-}
-
 .header-btn {
  display: inline-block;
  width: 2rem;
@@ -10299,6 +10362,30 @@ body.fixed-header .header {
  border-radius: 50%;
 }

+.header-toggler {
+  width: 2rem;
+  height: 2rem;
+  position: relative;
+  color: #9aa0ac;
+}
+
+.header-toggler:hover {
+  color: #6e7687;
+}
+
+.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;
+}
+
 .footer {
  background: #fff;
  border-top: 1px solid rgba(0, 40, 100, 0.12);
@@ -11508,11 +11595,38 @@ a.icon:hover {
  box-shadow: none !important;
 }

+.nav-link,
+.nav-item {
+  padding: 0 .75rem;
+  min-width: 2rem;
+  transition: .3s color;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: pointer;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.nav-link .badge,
+.nav-item .badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: .2rem .25rem;
+  min-width: 1rem;
+}
+
 .nav-tabs {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
+  color: #9aa0ac;
+  margin: 0 -.75rem;
 }

 .nav-tabs .nav-link {
@@ -11525,17 +11639,17 @@ a.icon:hover {
  padding: 1rem 0;
 }

+.nav-tabs .nav-link:hover:not(.disabled) {
+  border-color: #6e7687;
+  color: #6e7687;
+}
+
 .nav-tabs .nav-link.active {
  border-color: #467fcf;
  color: #467fcf;
  background: transparent;
 }

-.nav-tabs .nav-link:hover:not(.disabled) {
-  border-color: #6e7687;
-  color: #6e7687;
-}
-
 .nav-tabs .nav-link.disabled {
  opacity: .4;
  cursor: default;
@@ -11556,10 +11670,6 @@ a.icon:hover {
  display: inline-block;
 }

-.nav-tabs .nav-item + .nav-item {
-  margin-left: 1.25rem;
-}
-
 .nav-tabs .nav-item:hover .nav-submenu {
  display: block;
 }
@@ -11595,11 +11705,6 @@ a.icon:hover {
  background: rgba(0, 0, 0, 0.024);
 }

-.nav-link {
-  display: block;
-  padding: 0.25rem 0.75rem;
-}
-
 .btn {
  cursor: pointer;
  font-weight: 600;
@@ -13105,6 +13210,8 @@ a.icon:hover {
 .card-aside-column {
  min-width: 5rem;
  width: 30%;
+  -ms-flex: 0 0 30%;
+  flex: 0 0 30%;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  background: no-repeat center/cover;
@@ -13145,19 +13252,19 @@ a.icon:hover {
  align-self: center;
 }

-.card-options a {
+.card-options a:not(.btn) {
  margin-left: .5rem;
  color: #9aa0ac;
  display: inline-block;
  min-width: 1rem;
 }

-.card-options a:hover {
+.card-options a:not(.btn):hover {
  text-decoration: none;
  color: #6e7687;
 }

-.card-options a i {
+.card-options a:not(.btn) i {
  font-size: 1rem;
  vertical-align: middle;
 }
@@ -13327,13 +13434,16 @@ Card alert
 .dropdown-menu {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  min-width: 12rem;
-  max-width: 100%;
+}
+
+.dropdown-item {
+  color: #6e7687;
 }

 .dropdown-menu-arrow:before {
  position: absolute;
  top: -6px;
-  right: 12px;
+  left: 12px;
  display: inline-block;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgba(0, 40, 100, 0.12);
@@ -13345,7 +13455,7 @@ Card alert
 .dropdown-menu-arrow:after {
  position: absolute;
  top: -5px;
-  right: 12px;
+  left: 12px;
  display: inline-block;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #fff;
@@ -13353,6 +13463,11 @@ Card alert
  content: '';
 }

+.dropdown-menu-arrow.dropdown-menu-right:before, .dropdown-menu-arrow.dropdown-menu-right:after {
+  left: auto;
+  right: 12px;
+}
+
 .dropdown-toggle {
  -webkit-user-select: none;
  -moz-user-select: none;
@@ -13370,7 +13485,7 @@ Card alert
 }

 .dropdown-icon {
-  color: #6e7687;
+  color: #9aa0ac;
  margin-right: .5rem;
  margin-left: -.5rem;
  width: 1em;
@@ -13884,7 +13999,6 @@ textarea[cols] {
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
-  margin: 0;
 }

 .custom-controls-stacked .custom-control {
@@ -14342,7 +14456,6 @@ a.chip:hover {
  border: 1px solid rgba(0, 40, 100, 0.12);
  border-radius: 3px 3px 0 0;
  font-size: 0.9375rem;
-  overflow: hidden;
 }

 .example-bg {
@@ -14853,6 +14966,16 @@ a.tag-addon:hover {
  user-select: none;
 }

+.carousel-item-background {
+  content: '';
+  background: rgba(0, 0, 0, 0.5);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
 .custom-range {
  -ms-flex-align: center;
  align-items: center;
@@ -15019,15 +15142,14 @@ a.tag-addon:hover {
  -ms-user-select: none;
  user-select: none;
  font-size: 0.9375rem;
-  line-height: 1.5;
+  line-height: 1.5rem;
  min-width: 2.375rem;
 }

 .selectgroup-button-icon {
  padding-left: .5rem;
  padding-right: .5rem;
-  font-size: 1.125rem;
-  line-height: 1.125rem;
+  font-size: 1rem;
 }

 .selectgroup-input:checked + .selectgroup-button {
--- a/dist/assets/css/dashboard.rtl.css
+++ b/dist/assets/css/dashboard.rtl.css
--- a/dist/assets/css/tabler.css
+++ b/dist/assets/css/tabler.css
--- a/dist/assets/css/tabler.rtl.css
+++ b/dist/assets/css/tabler.rtl.css
--- a/dist/assets/plugins/charts-c3/plugin.css
+++ b/dist/assets/plugins/charts-c3/plugin.css
@@ -1,8 +1,4 @@
 /*-- Chart --*/
-.c3 {
-  overflow: hidden;
-}
-
 .c3 svg {
  font: 10px sans-serif;
  -webkit-tap-highlight-color: transparent;
--- a/dist/assets/plugins/charts-c3/plugin.scss
+++ b/dist/assets/plugins/charts-c3/plugin.scss
@@ -1,2 +0,0 @@
-@import '../../scss/variables';
-@import 'scss/c3';
--- a/dist/assets/plugins/fullcalendar/plugin.scss
+++ b/dist/assets/plugins/fullcalendar/plugin.scss
@@ -1,2 +0,0 @@
-@import '../../scss/variables';
-@import 'scss/fullcalendar';
--- a/dist/assets/plugins/iconfonts/plugin.scss
+++ b/dist/assets/plugins/iconfonts/plugin.scss
@@ -1,4 +0,0 @@
-@import 'scss/themify';
-@import 'scss/weathericons';
-@import 'scss/materialdesignicons';
-@import 'scss/simple-line-icons';
--- a/dist/assets/plugins/maps-google/plugin.scss
+++ b/dist/assets/plugins/maps-google/plugin.scss
--- a/dist/assets/plugins/prismjs/plugin.scss
+++ b/dist/assets/plugins/prismjs/plugin.scss
@@ -1,227 +0,0 @@
-@import '../../scss/variables';
-
-/* 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
- */
-code[class*="language-"],
-pre[class*="language-"] {
-	//color: black;
-	//background: none;
-	//text-shadow: 0 1px white;
-	//font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-	//text-align: left;
-	//white-space: pre;
-	//word-spacing: normal;
-	//word-break: normal;
-	//word-wrap: normal;
-	//line-height: 1.5;
-	//
-	//-moz-tab-size: 4;
-	//-o-tab-size: 4;
-	//tab-size: 4;
-	//
-	//-webkit-hyphens: none;
-	//-moz-hyphens: none;
-	//-ms-hyphens: none;
-	//hyphens: none;
-}
-
-.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: hsla(0, 0%, 100%, .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;
-	//padding: 1em 0 1em 3em;
-}
-
-.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: hsla(24, 20%, 50%, .4);
-	color: hsl(24, 20%, 95%);
-	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 $border-color;
-
-	-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($text-muted, .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:hover > .toolbar {
-//	opacity: 1;
-//}
-
-pre.code-toolbar > .toolbar .toolbar-item {
-	display: inline-block;
-	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: $text-muted;
-	padding: 0 .5em;
-	font-family: $font-family-base;
-	font-size: px2rem(14px);
-}
-
--- a/dist/assets/scss/bundle.scss
+++ b/dist/assets/scss/bundle.scss
@@ -1,7 +0,0 @@
-/**
-Dashboard UI
- */
-
-@import 'variables';
-@import 'dashboard/bootstrap/bootstrap';
-@import 'dashboard/dashboard';
--- a/dist/assets/scss/dashboard/bootstrap/bootstrap-grid.scss
+++ b/dist/assets/scss/dashboard/bootstrap/bootstrap-grid.scss
@@ -1,32 +0,0 @@
-/*!
- * Bootstrap Grid v4.0.0 (https://getbootstrap.com)
- * Copyright 2011-2018 The Bootstrap Authors
- * Copyright 2011-2018 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-
-@at-root {
-  @-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix
-}
-
-html {
-  box-sizing: border-box;
-  -ms-overflow-style: scrollbar;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
-
-@import "functions";
-@import "variables";
-
-@import "mixins/breakpoints";
-@import "mixins/grid-framework";
-@import "mixins/grid";
-
-@import "grid";
-@import "utilities/display";
-@import "utilities/flex";
--- a/dist/assets/scss/dashboard/bootstrap/bootstrap-reboot.scss
+++ b/dist/assets/scss/dashboard/bootstrap/bootstrap-reboot.scss
@@ -1,12 +0,0 @@
-/*!
- * Bootstrap Reboot v4.0.0 (https://getbootstrap.com)
- * Copyright 2011-2018 The Bootstrap Authors
- * Copyright 2011-2018 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
- */
-
-@import "functions";
-@import "variables";
-@import "mixins";
-@import "reboot";
--- a/dist/assets/scss/dashboard/bootstrap/bootstrap.scss
+++ b/dist/assets/scss/dashboard/bootstrap/bootstrap.scss
@@ -1,42 +0,0 @@
-/*!
- * Bootstrap v4.0.0 (https://getbootstrap.com)
- * Copyright 2011-2018 The Bootstrap Authors
- * Copyright 2011-2018 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-
-@import "functions";
-@import "variables";
-@import "mixins";
-@import "root";
-@import "reboot";
-@import "type";
-@import "images";
-@import "code";
-@import "grid";
-@import "tables";
-@import "forms";
-@import "buttons";
-@import "transitions";
-@import "dropdown";
-@import "button-group";
-@import "input-group";
-@import "custom-forms";
-@import "nav";
-@import "navbar";
-@import "card";
-@import "breadcrumb";
-@import "pagination";
-@import "badge";
-@import "jumbotron";
-@import "alert";
-@import "progress";
-@import "media";
-@import "list-group";
-@import "close";
-@import "modal";
-@import "tooltip";
-@import "popover";
-@import "carousel";
-@import "utilities";
-@import "print";
--- a/dist/assets/scss/dashboard/dashboard.scss
+++ b/dist/assets/scss/dashboard/dashboard.scss
@@ -1,65 +0,0 @@
-//@import 'variables';
-//@import '../bootstrap/mixins';
-@import 'functions';
-
-@import 'core';
-@import 'type';
-@import 'grid';
-
-@import 'layout';
-@import 'aside';
-@import 'header';
-@import 'footer';
-@import 'colors';
-@import 'text';
-@import 'utilities';
-
-@import 'nav';
-@import 'button';
-@import 'alert';
-@import 'close';
-@import 'badge';
-@import 'tables';
-@import 'breadcrumb';
-@import 'pagination';
-@import 'cards';
-@import 'popover';
-@import 'dropdown';
-@import 'list';
-@import 'list-group';
-@import 'avatar';
-@import 'product';
-@import 'progress';
-@import 'icon';
-@import 'image';
-@import 'link';
-@import 'media';
-@import 'form';
-@import 'sparkline';
-@import 'social';
-@import 'maps';
-@import 'statuses';
-@import 'charts';
-@import 'chips';
-@import 'stamp';
-@import 'chat';
-@import 'example';
-@import 'tag';
-@import 'syntax';
-@import 'infobox';
-
-@import 'forms/custom-range';
-@import 'forms/custom-selectgroup';
-@import 'forms/custom-switch';
-@import 'forms/custom-imagecheck';
-@import 'forms/custom-colorinput';
-
-@import 'timeline';
-
-@import 'browser';
-@import 'flag';
-@import 'payments';
-@import 'jvectormap';
-@import 'selectize';
-
-@import 'fonts/feather';
--- 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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="./carousel.html" class="dropdown-item ">Carousel</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="./401.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 +181,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 +442,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="./carousel.html" class="dropdown-item ">Carousel</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="./401.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 +181,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">
@@ -366,8 +372,8 @@
                  <div class="card-header">
                    <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>
+                      <a href="#" class="btn btn-primary btn-sm">Action 1</a>
+                      <a href="#" class="btn btn-secondary btn-sm ml-2">Action 2</a>
                    </div>
                  </div>
                  <div class="card-body">
@@ -510,7 +516,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/carousel.html
+++ b/dist/carousel.html
@@ -0,0 +1,415 @@
+<!doctype html>
+<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">
+    <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-16 09:29:05 +0200 -->
+    <title>Carousel - 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.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 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 ">Blog</a>
+                      <a href="./carousel.html" class="dropdown-item active">Carousel</a>
+                    </div>
+                  </li>
+                  <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 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="row">
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Carousel</h3>
+                  </div>
+                  <div class="card-body">
+                    <div id="carousel-default" class="carousel slide" data-ride="carousel">
+                      <div class="carousel-inner">
+                        <div class="carousel-item active">
+                          <img class="d-block w-100" alt="" src="./demo/photos/adrian-infernus-281832-1500.jpg" data-holder-rendered="true">
+                        </div>
+                        <div class="carousel-item">
+                          <img class="d-block w-100" alt="" src="./demo/photos/ales-krivec-107499-1500.jpg" data-holder-rendered="true">
+                        </div>
+                        <div class="carousel-item">
+                          <img class="d-block w-100" alt="" src="./demo/photos/alex-bertha-316137-1500.jpg" data-holder-rendered="true">
+                        </div>
+                        <div class="carousel-item">
+                          <img class="d-block w-100" alt="" src="./demo/photos/anders-jilden-307322-1500.jpg" data-holder-rendered="true">
+                        </div>
+                        <div class="carousel-item">
+                          <img class="d-block w-100" alt="" src="./demo/photos/andrew-neel-141710-1500.jpg" data-holder-rendered="true">
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Carousel with indicators</h3>
+                  </div>
+                  <div class="card-body">
+                    <div id="carousel-indicators" class="carousel slide" data-ride="carousel">
+                      <ol class="carousel-indicators">
+                        <li data-target="#carousel-indicators" data-slide-to="0" class="active"></li>
+                        <li data-target="#carousel-indicators" data-slide-to="1" class=""></li>
+                        <li data-target="#carousel-indicators" data-slide-to="2" class=""></li>
+                        <li data-target="#carousel-indicators" data-slide-to="3" class=""></li>
+                        <li data-target="#carousel-indicators" data-slide-to="4" class=""></li>
+                      </ol>
+                      <div class="carousel-inner">
+                        <div class="carousel-item active">
+                          <img class="d-block w-100" alt="" src="./demo/photos/aneta-ivanova-776-1500.jpg" data-holder-rendered="true">
+                        </div>
+                        <div class="carousel-item">
+                          <img class="d-block w-100" alt="" src="./demo/photos/anthony-intraversato-257182-1500.jpg" data-holder-rendered="true">
+                        </div>
+                        <div class="carousel-item">
+                          <img class="d-block w-100" alt="" src="./demo/photos/artem-sapegin-229391-1500.jpg" data-holder-rendered="true">
+                        </div>
+                        <div class="carousel-item">
+                          <img class="d-block w-100" alt="" src="./demo/photos/bobby-burch-145906-1500.jpg" data-holder-rendered="true">
+                        </div>
+                        <div class="carousel-item">
+                          <img class="d-block w-100" alt="" src="./demo/photos/casey-horner-339165-1500.jpg" data-holder-rendered="true">
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Carousel with controls</h3>
+                  </div>
+                  <div class="card-body">
+                    <div id="carousel-controls" class="carousel slide" data-ride="carousel">
+                      <div class="carousel-inner">
+                        <div class="carousel-item active">
+                          <img class="d-block w-100" alt="" src="./demo/photos/christian-joudrey-96208-1500.jpg" data-holder-rendered="true">
+                        </div>
+                        <div class="carousel-item">
+                          <img class="d-block w-100" alt="" src="./demo/photos/christoph-bengtsson-lissalde-80291-1500.jpg" data-holder-rendered="true">
+                        </div>
+                        <div class="carousel-item">
+                          <img class="d-block w-100" alt="" src="./demo/photos/clarisse-meyer-122804-1500.jpg" data-holder-rendered="true">
+                        </div>
+                        <div class="carousel-item">
+                          <img class="d-block w-100" alt="" src="./demo/photos/cristina-gottardi-259243-1500.jpg" data-holder-rendered="true">
+                        </div>
+                        <div class="carousel-item">
+                          <img class="d-block w-100" alt="" src="./demo/photos/david-klaasen-54203-1500.jpg" data-holder-rendered="true">
+                        </div>
+                      </div>
+                      <a class="carousel-control-prev" href="#carousel-controls" role="button" data-slide="prev">
+                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                        <span class="sr-only">Previous</span>
+                      </a>
+                      <a class="carousel-control-next" href="#carousel-controls" role="button" data-slide="next">
+                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                        <span class="sr-only">Next</span>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-6">
+                <div class="card">
+                  <div class="card-header">
+                    <h3 class="card-title">Carousel with captions</h3>
+                  </div>
+                  <div class="card-body">
+                    <div id="carousel-captions" class="carousel slide" data-ride="carousel">
+                      <div class="carousel-inner">
+                        <div class="carousel-item active">
+                          <img class="d-block w-100" alt="" src="./demo/photos/david-marcu-114194-1500.jpg" data-holder-rendered="true">
+                          <div class="carousel-item-background d-none d-md-block"></div>
+                          <div class="carousel-caption d-none d-md-block">
+                            <h3>Slide label</h3>
+                            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+                          </div>
+                        </div>
+                        <div class="carousel-item">
+                          <img class="d-block w-100" alt="" src="./demo/photos/davide-cantelli-139887-1500.jpg" data-holder-rendered="true">
+                          <div class="carousel-item-background d-none d-md-block"></div>
+                          <div class="carousel-caption d-none d-md-block">
+                            <h3>Slide label</h3>
+                            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+                          </div>
+                        </div>
+                        <div class="carousel-item">
+                          <img class="d-block w-100" alt="" src="./demo/photos/dino-reichmuth-84359-1500.jpg" data-holder-rendered="true">
+                          <div class="carousel-item-background d-none d-md-block"></div>
+                          <div class="carousel-caption d-none d-md-block">
+                            <h3>Slide label</h3>
+                            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+                          </div>
+                        </div>
+                        <div class="carousel-item">
+                          <img class="d-block w-100" alt="" src="./demo/photos/eberhard-grossgasteiger-311213-1500.jpg" data-holder-rendered="true">
+                          <div class="carousel-item-background d-none d-md-block"></div>
+                          <div class="carousel-caption d-none d-md-block">
+                            <h3>Slide label</h3>
+                            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+                          </div>
+                        </div>
+                        <div class="carousel-item">
+                          <img class="d-block w-100" alt="" src="./demo/photos/geran-de-klerk-290418-1500.jpg" data-holder-rendered="true">
+                          <div class="carousel-item-background d-none d-md-block"></div>
+                          <div class="carousel-caption d-none d-md-block">
+                            <h3>Slide label</h3>
+                            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+                          </div>
+                        </div>
+                      </div>
+                      <a class="carousel-control-prev" href="#carousel-captions" role="button" data-slide="prev">
+                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                        <span class="sr-only">Previous</span>
+                      </a>
+                      <a class="carousel-control-next" href="#carousel-captions" role="button" data-slide="next">
+                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                        <span class="sr-only">Next</span>
+                      </a>
+                    </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/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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="./carousel.html" class="dropdown-item ">Carousel</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="./401.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 +181,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 +1070,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="./carousel.html" class="dropdown-item ">Carousel</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="./401.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 +181,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 +1450,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="../carousel.html" class="dropdown-item ">Carousel</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="../401.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 +181,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 +403,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="../carousel.html" class="dropdown-item ">Carousel</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="../401.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 +181,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 +428,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="../carousel.html" class="dropdown-item ">Carousel</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="../401.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 +181,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 +734,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="../carousel.html" class="dropdown-item ">Carousel</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="../401.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 +181,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">
@@ -247,8 +253,8 @@
                            <div class="card-header">
                              <h3 class="card-title">Card title</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>
+                                <a href="#" class="btn btn-primary btn-sm">Action 1</a>
+                                <a href="#" class="btn btn-secondary btn-sm ml-2">Action 2</a>
                              </div>
                            </div>
                            <div class="card-body">
@@ -265,8 +271,8 @@
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Card title<span class="nt">&lt;/h3&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-options"</span><span class="nt">&gt;</span>
-        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-sm"</span><span class="nt">&gt;</span>Action 1<span class="nt">&lt;/a&gt;</span>
-        <span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-sm ml-2"</span><span class="nt">&gt;</span>Action 2<span class="nt">&lt;/a&gt;</span>
+        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-sm"</span><span class="nt">&gt;</span>Action 1<span class="nt">&lt;/a&gt;</span>
+        <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-sm ml-2"</span><span class="nt">&gt;</span>Action 2<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
@@ -574,7 +580,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="../carousel.html" class="dropdown-item ">Carousel</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="../401.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 +181,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 +374,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="../carousel.html" class="dropdown-item ">Carousel</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="../401.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 +181,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 +683,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="../carousel.html" class="dropdown-item ">Carousel</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="../401.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 +181,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">
@@ -630,7 +636,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="../carousel.html" class="dropdown-item ">Carousel</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="../401.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 +181,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 +469,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="../carousel.html" class="dropdown-item ">Carousel</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="../401.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 +181,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 +292,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="../carousel.html" class="dropdown-item ">Carousel</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="../401.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 +181,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 +560,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="../carousel.html" class="dropdown-item ">Carousel</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="../401.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 +181,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 +356,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="./carousel.html" class="dropdown-item ">Carousel</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="./401.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 +181,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 +294,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="./carousel.html" class="dropdown-item ">Carousel</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="./401.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 +181,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 +227,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="./carousel.html" class="dropdown-item ">Carousel</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="./401.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 +181,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">
@@ -500,15 +506,23 @@
                        </div>
                      </div>
                      <div class="form-group">
-                        <label class="form-label">Icons input</label>
+                        <label class="form-label">Icon input</label>
                        <div class="selectgroup selectgroup-pills">
                          <label class="selectgroup-item">
                            <input type="radio" name="icon-input" value="1" class="selectgroup-input" checked="">
-                            <span class="selectgroup-button selectgroup-button-icon"><i class="fa fa-male"></i></span>
+                            <span class="selectgroup-button selectgroup-button-icon"><i class="fe fe-sun"></i></span>
                          </label>
                          <label class="selectgroup-item">
                            <input type="radio" name="icon-input" value="2" class="selectgroup-input">
-                            <span class="selectgroup-button selectgroup-button-icon"><i class="fa fa-female"></i></span>
+                            <span class="selectgroup-button selectgroup-button-icon"><i class="fe fe-moon"></i></span>
+                          </label>
+                          <label class="selectgroup-item">
+                            <input type="radio" name="icon-input" value="3" class="selectgroup-input">
+                            <span class="selectgroup-button selectgroup-button-icon"><i class="fe fe-cloud-rain"></i></span>
+                          </label>
+                          <label class="selectgroup-item">
+                            <input type="radio" name="icon-input" value="4" class="selectgroup-input">
+                            <span class="selectgroup-button selectgroup-button-icon"><i class="fe fe-cloud"></i></span>
                          </label>
                        </div>
                      </div>
@@ -617,15 +631,15 @@
                      <div class="form-group">
                        <div class="form-label">Inline Radios</div>
                        <div class="custom-controls-stacked">
-                          <label class="custom-control custom-radio">
+                          <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>
                          </label>
-                          <label class="custom-control custom-radio">
+                          <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>
                          </label>
-                          <label class="custom-control custom-radio">
+                          <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>
                          </label>
@@ -636,37 +650,36 @@
                        <div class="custom-controls-stacked">
                          <label 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>
+                            <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>
+                            <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>
+                            <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>
+                            <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">
-                          <label 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>
+                          <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">
+                          <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>
+                            <span class="custom-control-label">Option 2</span>
                          </label>
-                          <label class="custom-control custom-checkbox">
+                          <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>
+                            <span class="custom-control-label">Option 3</span>
                          </label>
                        </div>
                      </div>
@@ -1470,7 +1483,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="./carousel.html" class="dropdown-item ">Carousel</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="./401.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 +181,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">
@@ -202,7 +208,7 @@
              <div class="col-sm-6 col-lg-4">
                <div class="card p-3">
                  <a href="javascript:void(0)" class="mb-3">
-                    <img src="demo/photos/grant-ritchie-338179-500.jpg" alt="Photo by Nathan Guerrero" class="rounded">
+                    <img src="./demo/photos/grant-ritchie-338179-500.jpg" alt="Photo by Nathan Guerrero" class="rounded">
                  </a>
                  <div class="d-flex align-items-center px-2">
                    <div class="avatar avatar-md mr-3" style="background-image: url(demo/faces/male/41.jpg)"></div>
@@ -220,7 +226,7 @@
              <div class="col-sm-6 col-lg-4">
                <div class="card p-3">
                  <a href="javascript:void(0)" class="mb-3">
-                    <img src="demo/photos/ilnur-kalimullin-218996-500.jpg" alt="Photo by Alice Mason" class="rounded">
+                    <img src="./demo/photos/ilnur-kalimullin-218996-500.jpg" alt="Photo by Alice Mason" class="rounded">
                  </a>
                  <div class="d-flex align-items-center px-2">
                    <div class="avatar avatar-md mr-3" style="background-image: url(demo/faces/female/1.jpg)"></div>
@@ -238,7 +244,7 @@
              <div class="col-sm-6 col-lg-4">
                <div class="card p-3">
                  <a href="javascript:void(0)" class="mb-3">
-                    <img src="demo/photos/jakob-owens-224352-500.jpg" alt="Photo by Rose Bradley" class="rounded">
+                    <img src="./demo/photos/jakob-owens-224352-500.jpg" alt="Photo by Rose Bradley" class="rounded">
                  </a>
                  <div class="d-flex align-items-center px-2">
                    <div class="avatar avatar-md mr-3" style="background-image: url(demo/faces/female/18.jpg)"></div>
@@ -256,7 +262,7 @@
              <div class="col-sm-6 col-lg-4">
                <div class="card p-3">
                  <a href="javascript:void(0)" class="mb-3">
-                    <img src="demo/photos/jeremy-bishop-330225-500.jpg" alt="Photo by Peter Richards" class="rounded">
+                    <img src="./demo/photos/jeremy-bishop-330225-500.jpg" alt="Photo by Peter Richards" class="rounded">
                  </a>
                  <div class="d-flex align-items-center px-2">
                    <div class="avatar avatar-md mr-3" style="background-image: url(demo/faces/male/16.jpg)"></div>
@@ -274,7 +280,7 @@
              <div class="col-sm-6 col-lg-4">
                <div class="card p-3">
                  <a href="javascript:void(0)" class="mb-3">
-                    <img src="demo/photos/jonatan-pie-226191-500.jpg" alt="Photo by Wayne Holland" class="rounded">
+                    <img src="./demo/photos/jonatan-pie-226191-500.jpg" alt="Photo by Wayne Holland" class="rounded">
                  </a>
                  <div class="d-flex align-items-center px-2">
                    <div class="avatar avatar-md mr-3" style="background-image: url(demo/faces/male/26.jpg)"></div>
@@ -292,7 +298,7 @@
              <div class="col-sm-6 col-lg-4">
                <div class="card p-3">
                  <a href="javascript:void(0)" class="mb-3">
-                    <img src="demo/photos/josh-calabrese-66153-500.jpg" alt="Photo by Michelle Ross" class="rounded">
+                    <img src="./demo/photos/josh-calabrese-66153-500.jpg" alt="Photo by Michelle Ross" class="rounded">
                  </a>
                  <div class="d-flex align-items-center px-2">
                    <div class="avatar avatar-md mr-3" style="background-image: url(demo/faces/female/7.jpg)"></div>
@@ -310,7 +316,7 @@
              <div class="col-sm-6 col-lg-4">
                <div class="card p-3">
                  <a href="javascript:void(0)" class="mb-3">
-                    <img src="demo/photos/joshua-earle-157231-500.jpg" alt="Photo by Debra Beck" class="rounded">
+                    <img src="./demo/photos/joshua-earle-157231-500.jpg" alt="Photo by Debra Beck" class="rounded">
                  </a>
                  <div class="d-flex align-items-center px-2">
                    <div class="avatar avatar-md mr-3" style="background-image: url(demo/faces/female/17.jpg)"></div>
@@ -328,7 +334,7 @@
              <div class="col-sm-6 col-lg-4">
                <div class="card p-3">
                  <a href="javascript:void(0)" class="mb-3">
-                    <img src="demo/photos/mahkeo-222765-500.jpg" alt="Photo by Phillip Peters" class="rounded">
+                    <img src="./demo/photos/mahkeo-222765-500.jpg" alt="Photo by Phillip Peters" class="rounded">
                  </a>
                  <div class="d-flex align-items-center px-2">
                    <div class="avatar avatar-md mr-3" style="background-image: url(demo/faces/male/30.jpg)"></div>
@@ -346,7 +352,7 @@
              <div class="col-sm-6 col-lg-4">
                <div class="card p-3">
                  <a href="javascript:void(0)" class="mb-3">
-                    <img src="demo/photos/matt-barrett-339981-500.jpg" alt="Photo by Jack Ruiz" class="rounded">
+                    <img src="./demo/photos/matt-barrett-339981-500.jpg" alt="Photo by Jack Ruiz" class="rounded">
                  </a>
                  <div class="d-flex align-items-center px-2">
                    <div class="avatar avatar-md mr-3" style="background-image: url(demo/faces/male/32.jpg)"></div>
@@ -364,7 +370,7 @@
              <div class="col-sm-6 col-lg-4">
                <div class="card p-3">
                  <a href="javascript:void(0)" class="mb-3">
-                    <img src="demo/photos/nathan-anderson-297460-500.jpg" alt="Photo by Ronald Bradley" class="rounded">
+                    <img src="./demo/photos/nathan-anderson-297460-500.jpg" alt="Photo by Ronald Bradley" class="rounded">
                  </a>
                  <div class="d-flex align-items-center px-2">
                    <div class="avatar avatar-md mr-3" style="background-image: url(demo/faces/male/9.jpg)"></div>
@@ -382,7 +388,7 @@
              <div class="col-sm-6 col-lg-4">
                <div class="card p-3">
                  <a href="javascript:void(0)" class="mb-3">
-                    <img src="demo/photos/nathan-anderson-316188-500.jpg" alt="Photo by Kathleen Harper" class="rounded">
+                    <img src="./demo/photos/nathan-anderson-316188-500.jpg" alt="Photo by Kathleen Harper" class="rounded">
                  </a>
                  <div class="d-flex align-items-center px-2">
                    <div class="avatar avatar-md mr-3" style="background-image: url(demo/faces/female/8.jpg)"></div>
@@ -400,7 +406,7 @@
              <div class="col-sm-6 col-lg-4">
                <div class="card p-3">
                  <a href="javascript:void(0)" class="mb-3">
-                    <img src="demo/photos/nathan-dumlao-287713-500.jpg" alt="Photo by Bobby Knight" class="rounded">
+                    <img src="./demo/photos/nathan-dumlao-287713-500.jpg" alt="Photo by Bobby Knight" class="rounded">
                  </a>
                  <div class="d-flex align-items-center px-2">
                    <div class="avatar avatar-md mr-3" style="background-image: url(demo/faces/male/4.jpg)"></div>
@@ -459,7 +465,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="./carousel.html" class="dropdown-item ">Carousel</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="./401.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 +181,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 +1810,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
@@ -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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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 active"><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>
+                      <a href="./carousel.html" class="dropdown-item ">Carousel</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="./401.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 +181,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">
@@ -483,7 +489,7 @@
                      });
                    </script>
                  </div>
-                  <div class="col-sm-4">
+                  <div class="col-sm-6">
                    <div class="card">
                      <div class="card-body text-center">
                        <div class="h5">New feedback</div>
@@ -494,7 +500,7 @@
                      </div>
                    </div>
                  </div>
-                  <div class="col-sm-4">
+                  <div class="col-sm-6">
                    <div class="card">
                      <div class="card-body text-center">
                        <div class="h5">Today profit</div>
@@ -505,17 +511,6 @@
                      </div>
                    </div>
                  </div>
-                  <div class="col-sm-4">
-                    <div class="card">
-                      <div class="card-body text-center">
-                        <div class="h5">Users online</div>
-                        <div class="display-4 font-weight-bold mb-4">76</div>
-                        <div class="progress progress-sm">
-                          <div class="progress-bar bg-yellow" style="width: 34%"></div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
                </div>
              </div>
              <div class="col-sm-6 col-lg-3">
@@ -637,7 +632,7 @@
                          <td>
                            <div>Elizabeth Martin</div>
                            <div class="small text-muted">
-                              Registered: Mar 7, 2018
+                              Registered: Mar 19, 2018
                            </div>
                          </td>
                          <td>
@@ -688,7 +683,7 @@
                          <td>
                            <div>Michelle Schultz</div>
                            <div class="small text-muted">
-                              Registered: Feb 19, 2018
+                              Registered: Mar 2, 2018
                            </div>
                          </td>
                          <td>
@@ -739,7 +734,7 @@
                          <td>
                            <div>Crystal Austin</div>
                            <div class="small text-muted">
-                              Registered: Mar 26, 2018
+                              Registered: Apr 7, 2018
                            </div>
                          </td>
                          <td>
@@ -790,7 +785,7 @@
                          <td>
                            <div>Douglas Ray</div>
                            <div class="small text-muted">
-                              Registered: Jan 4, 2018
+                              Registered: Jan 15, 2018
                            </div>
                          </td>
                          <td>
@@ -841,7 +836,7 @@
                          <td>
                            <div>Teresa Reyes</div>
                            <div class="small text-muted">
-                              Registered: Feb 21, 2018
+                              Registered: Mar 4, 2018
                            </div>
                          </td>
                          <td>
@@ -892,7 +887,7 @@
                          <td>
                            <div>Emma Wade</div>
                            <div class="small text-muted">
-                              Registered: Mar 8, 2018
+                              Registered: Mar 20, 2018
                            </div>
                          </td>
                          <td>
@@ -943,7 +938,7 @@
                          <td>
                            <div>Carol Henderson</div>
                            <div class="small text-muted">
-                              Registered: Feb 10, 2018
+                              Registered: Feb 22, 2018
                            </div>
                          </td>
                          <td>
@@ -994,7 +989,7 @@
                          <td>
                            <div>Christopher Harvey</div>
                            <div class="small text-muted">
-                              Registered: Jan 10, 2018
+                              Registered: Jan 22, 2018
                            </div>
                          </td>
                          <td>
@@ -1291,7 +1286,7 @@
                  <div class="col-sm-6 col-lg-3">
                    <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>
@@ -1363,7 +1358,7 @@
                  <div class="col-sm-6 col-lg-3">
                    <div class="card">
                      <div class="card-body">
-                        <div class="card-value pull-right text-red">-3%</div>
+                        <div class="card-value float-right text-red">-3%</div>
                        <h3 class="mb-1">423</h3>
                        <div class="text-muted">Users online</div>
                      </div>
@@ -1435,7 +1430,7 @@
                  <div class="col-sm-6 col-lg-3">
                    <div class="card">
                      <div class="card-body">
-                        <div class="card-value pull-right text-green">-3%</div>
+                        <div class="card-value float-right text-green">-3%</div>
                        <h3 class="mb-1">423</h3>
                        <div class="text-muted">Users online</div>
                      </div>
@@ -1507,7 +1502,7 @@
                  <div class="col-sm-6 col-lg-3">
                    <div class="card">
                      <div class="card-body">
-                        <div class="card-value pull-right text-yellow">9%</div>
+                        <div class="card-value float-right text-yellow">9%</div>
                        <h3 class="mb-1">423</h3>
                        <div class="text-muted">Users online</div>
                      </div>
@@ -1816,7 +1811,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/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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="./carousel.html" class="dropdown-item ">Carousel</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="./401.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 +181,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 +323,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="./carousel.html" class="dropdown-item ">Carousel</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="./401.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 +181,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 +432,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="./carousel.html" class="dropdown-item ">Carousel</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="./401.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 +181,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 +543,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="./carousel.html" class="dropdown-item ">Carousel</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="./401.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 +181,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 +399,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="./carousel.html" class="dropdown-item ">Carousel</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="./401.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 +181,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">
@@ -186,7 +192,7 @@
              </h1>
            </div>
            <div class="row">
-              <div class="col-3">
+              <div class="col-sm-6 col-lg-3">
                <div class="card">
                  <div class="card-body text-center">
                    <div class="card-category">Free</div>
@@ -204,7 +210,7 @@
                  </div>
                </div>
              </div>
-              <div class="col-3">
+              <div class="col-sm-6 col-lg-3">
                <div class="card">
                  <div class="card-status bg-green"></div>
                  <div class="card-body text-center">
@@ -223,7 +229,7 @@
                  </div>
                </div>
              </div>
-              <div class="col-3">
+              <div class="col-sm-6 col-lg-3">
                <div class="card">
                  <div class="card-body text-center">
                    <div class="card-category">Enterprise</div>
@@ -241,7 +247,7 @@
                  </div>
                </div>
              </div>
-              <div class="col-3">
+              <div class="col-sm-6 col-lg-3">
                <div class="card">
                  <div class="card-body text-center">
                    <div class="card-category">Unlimited</div>
@@ -303,7 +309,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="./carousel.html" class="dropdown-item ">Carousel</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="./401.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 +181,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 +471,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,351 @@
+<!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-16 09:29:05 +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>
+                      <a href="./carousel.html" class="dropdown-item ">Carousel</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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="./carousel.html" class="dropdown-item ">Carousel</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="./401.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 +181,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 +218,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 +251,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 +286,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 +905,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>
@@ -1750,7 +1756,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>
@@ -1759,7 +1765,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>
@@ -1796,7 +1802,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>
@@ -1941,7 +1947,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">
@@ -1953,7 +1959,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>
@@ -2003,7 +2009,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>
@@ -2465,7 +2471,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>
@@ -2562,28 +2568,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>
@@ -2594,7 +2600,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">
@@ -2606,7 +2612,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>
@@ -3215,7 +3221,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>
@@ -3296,7 +3302,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="./carousel.html" class="dropdown-item ">Carousel</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="./401.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 +181,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">
@@ -385,7 +391,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-04-04 16:20:21 +0200 -->
+    <!-- Generated: 2018-04-16 09:29:05 +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,87 @@
                  </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>
+                      <a href="./carousel.html" class="dropdown-item ">Carousel</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="./401.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 +181,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 +557,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.21",
+  "version": "0.0.32",
  "keywords": [
    "css",
    "sass",
@@ -38,12 +38,15 @@
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^5.0.0",
    "gulp-rename": "^1.2.2",
+    "gulp-rtlcss": "^1.2.0",
    "gulp-sass": "^3.1.0",
+    "bootstrap": "^4.1.0",
    "npm-run-all": "^4.1.2"
  },
  "dependencies": {},
  "files": [
-    "dist/"
+    "dist/",
+    "src/"
  ],
  "browserslist": [
    "last 1 major version",
--- a/src/_data/menu.yml
+++ b/src/_data/menu.yml
@@ -27,24 +27,24 @@ components:
  subpages:
    maps:
      name: Maps
-      icon: fe fe-map-pin
      url: maps.html

    icons:
      name: Icons
-      icon: fe fe-heart
      url: icons.html

    store:
      name: Store
-      icon: fe fe-shopping-cart
      url: store.html

    blog:
      name: Blog
-      icon: fe fe-shopping-cart
      url: blog.html

+    carousel:
+      name: Carousel
+      url: carousel.html
+
 pages:
  name: Pages
  icon: fe fe-file
@@ -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
--- 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/card.html
+++ b/src/_includes/cards/card.html
@@ -20,8 +20,8 @@
 					</div>
 				</form>
 			{% elsif include.show-buttons %}
-				<a class="btn btn-secondary btn-sm">Action 1</a>
-				<a class="btn btn-secondary btn-sm ml-2">Action 2</a>
+				<a href="#" class="btn btn-primary btn-sm">Action 1</a>
+				<a href="#" class="btn btn-secondary btn-sm ml-2">Action 2</a>
 			{% elsif include.show-switch %}
 			<label class="custom-switch m-0">
 				<input type="checkbox" value="1" class="custom-switch-input" checked>
--- a/src/_includes/cards/carousel.html
+++ b/src/_includes/cards/carousel.html
@@ -0,0 +1,45 @@
+{% assign limit = include.limit | default: 5 %}
+{% assign offset = include.offset | default: 0 %}
+<div class="card">
+	<div class="card-header">
+		<h3 class="card-title">{{ include.title | default: 'Carousel' }}</h3>
+	</div>
+	<div class="card-body">
+		<div id="{{ include.id }}" class="carousel slide" data-ride="carousel">
+			{% if include.show-indicators %}
+			<ol class="carousel-indicators">
+				{% for i in (1..limit) %}
+				<li data-target="#{{ include.id }}" data-slide-to="{{ forloop.index | minus: 1 }}" class="{% if forloop.first %}active{% endif %}"></li>
+				{% endfor %}
+			</ol>
+			{% endif %}
+
+			<div class="carousel-inner">
+				{% for photo in site.data.photos limit: limit offset: offset %}
+				<div class="carousel-item{% if forloop.first %} active{% endif %}">
+					<img class="d-block w-100" alt="" src="{{ site.base }}/{{ photo.big }}" data-holder-rendered="true">
+
+					{% if include.show-captions %}
+					<div class="carousel-item-background d-none d-md-block"></div>
+					<div class="carousel-caption d-none d-md-block">
+						<h3>Slide label</h3>
+						<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+					</div>
+					{% endif %}
+				</div>
+				{% endfor %}
+			</div>
+
+			{% if include.show-controls %}
+			<a class="carousel-control-prev" href="#{{ include.id }}" role="button" data-slide="prev">
+				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
+				<span class="sr-only">Previous</span>
+			</a>
+			<a class="carousel-control-next" href="#{{ include.id }}" role="button" data-slide="next">
+				<span class="carousel-control-next-icon" aria-hidden="true"></span>
+				<span class="sr-only">Next</span>
+			</a>
+			{% endif %}
+		</div>
+	</div>
+</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/form-all-elements.html
+++ b/src/_includes/cards/form-all-elements.html
@@ -170,19 +170,29 @@
 						</label>
 					</div>
 				</div>
+
 				<div class="form-group">
-					<label class="form-label">Icons input</label>
+					<label class="form-label">Icon input</label>
 					<div class="selectgroup selectgroup-pills">
 						<label class="selectgroup-item">
 							<input type="radio" name="icon-input" value="1" class="selectgroup-input" checked="">
-							<span class="selectgroup-button selectgroup-button-icon"><i class="fa fa-male"></i></span>
+							<span class="selectgroup-button selectgroup-button-icon"><i class="fe fe-sun"></i></span>
 						</label>
 						<label class="selectgroup-item">
 							<input type="radio" name="icon-input" value="2" class="selectgroup-input">
-							<span class="selectgroup-button selectgroup-button-icon"><i class="fa fa-female"></i></span>
+							<span class="selectgroup-button selectgroup-button-icon"><i class="fe fe-moon"></i></span>
+						</label>
+						<label class="selectgroup-item">
+							<input type="radio" name="icon-input" value="3" class="selectgroup-input">
+							<span class="selectgroup-button selectgroup-button-icon"><i class="fe fe-cloud-rain"></i></span>
+						</label>
+						<label class="selectgroup-item">
+							<input type="radio" name="icon-input" value="4" class="selectgroup-input">
+							<span class="selectgroup-button selectgroup-button-icon"><i class="fe fe-cloud"></i></span>
 						</label>
 					</div>
 				</div>
+
 				<div class="form-group">
 					<label class="form-label">Your skills</label>
 					<div class="selectgroup selectgroup-pills">
@@ -255,15 +265,15 @@
 				<div class="form-group">
 					<div class="form-label">Inline Radios</div>
 					<div class="custom-controls-stacked">
-						<label class="custom-control custom-radio">
+						<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>
 						</label>
-						<label class="custom-control custom-radio">
+						<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>
 						</label>
-						<label class="custom-control custom-radio">
+						<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>
 						</label>
@@ -274,37 +284,36 @@
 					<div class="custom-controls-stacked">
 						<label 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>
+							<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>
+							<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>
+							<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>
+							<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">
-						<label 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>
+						<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">
+						<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>
+							<span class="custom-control-label">Option 2</span>
 						</label>
-						<label class="custom-control custom-checkbox">
+						<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>
+							<span class="custom-control-label">Option 3</span>
 						</label>
 					</div>
 				</div>
@@ -656,4 +665,4 @@
            });
        });
    });
-</script>
+</script>
--- 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/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/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/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -305,4 +305,7 @@ $thumbnail-bg: #fff;

 // Pagination
 $pagination-color: $body-color;
-$pagination-disabled-color: $gray-400;
+$pagination-disabled-color: $gray-400;
+
+// Navs
+$nav-tabs-link-active-bg: transparent;
--- 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/_cards.scss
+++ b/src/assets/scss/dashboard/_cards.scss
@@ -199,6 +199,7 @@
 .card-aside-column {
 	min-width: 5rem;
 	width: 30%;
+	flex: 0 0 30%;
 	border-top-left-radius: 3px;
 	border-bottom-left-radius: 3px;
 	background: no-repeat center/cover;
@@ -236,7 +237,7 @@
 	color: $text-muted;
 	align-self: center;

-	a {
+	a:not(.btn) {
 		margin-left: .5rem;
 		color: $text-muted;
 		display: inline-block;
--- a/src/assets/scss/dashboard/_carousel.scss
+++ b/src/assets/scss/dashboard/_carousel.scss
@@ -0,0 +1,9 @@
+.carousel-item-background {
+	content: '';
+	background: rgba(0, 0, 0, .5);
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+}
--- 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/_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/_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/_alert.scss
+++ b/src/assets/scss/dashboard/bootstrap/_alert.scss
@@ -1,51 +0,0 @@
-//
-// Base styles
-//
-
-.alert {
-  position: relative;
-  padding: $alert-padding-y $alert-padding-x;
-  margin-bottom: $alert-margin-bottom;
-  border: $alert-border-width solid transparent;
-  @include border-radius($alert-border-radius);
-}
-
-// Headings for larger alerts
-.alert-heading {
-  // Specified to prevent conflicts of changing $headings-color
-  color: inherit;
-}
-
-// Provide class for links that match alerts
-.alert-link {
-  font-weight: $alert-link-font-weight;
-}
-
-
-// Dismissible alerts
-//
-// Expand the right padding and account for the close button's positioning.
-
-.alert-dismissible {
-  padding-right: ($close-font-size + $alert-padding-x * 2);
-
-  // Adjust close link position
-  .close {
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: $alert-padding-y $alert-padding-x;
-    color: inherit;
-  }
-}
-
-
-// Alternate styles
-//
-// Generate contextual modifier classes for colorizing the alert.
-
-@each $color, $value in $theme-colors {
-  .alert-#{$color} {
-    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
-  }
-}
--- a/src/assets/scss/dashboard/bootstrap/_badge.scss
+++ b/src/assets/scss/dashboard/bootstrap/_badge.scss
@@ -1,47 +0,0 @@
-// Base class
-//
-// Requires one of the contextual, color modifier classes for `color` and
-// `background-color`.
-
-.badge {
-  display: inline-block;
-  padding: $badge-padding-y $badge-padding-x;
-  font-size: $badge-font-size;
-  font-weight: $badge-font-weight;
-  line-height: 1;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  @include border-radius($badge-border-radius);
-
-  // Empty badges collapse automatically
-  &:empty {
-    display: none;
-  }
-}
-
-// Quick fix for badges in buttons
-.btn .badge {
-  position: relative;
-  top: -1px;
-}
-
-// Pill badges
-//
-// Make them extra rounded with a modifier to replace v3's badges.
-
-.badge-pill {
-  padding-right: $badge-pill-padding-x;
-  padding-left: $badge-pill-padding-x;
-  @include border-radius($badge-pill-border-radius);
-}
-
-// Colors
-//
-// Contextual variations (linked badges get darker on :hover).
-
-@each $color, $value in $theme-colors {
-  .badge-#{$color} {
-    @include badge-variant($value);
-  }
-}
--- a/src/assets/scss/dashboard/bootstrap/_breadcrumb.scss
+++ b/src/assets/scss/dashboard/bootstrap/_breadcrumb.scss
@@ -1,38 +0,0 @@
-.breadcrumb {
-  display: flex;
-  flex-wrap: wrap;
-  padding: $breadcrumb-padding-y $breadcrumb-padding-x;
-  margin-bottom: $breadcrumb-margin-bottom;
-  list-style: none;
-  background-color: $breadcrumb-bg;
-  @include border-radius($border-radius);
-}
-
-.breadcrumb-item {
-  // The separator between breadcrumbs (by default, a forward-slash: "/")
-  + .breadcrumb-item::before {
-    display: inline-block; // Suppress underlining of the separator in modern browsers
-    padding-right: $breadcrumb-item-padding;
-    padding-left: $breadcrumb-item-padding;
-    color: $breadcrumb-divider-color;
-    content: "#{$breadcrumb-divider}";
-  }
-
-  // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
-  // without `<ul>`s. The `::before` pseudo-element generates an element
-  // *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
-  //
-  // To trick IE into suppressing the underline, we give the pseudo-element an
-  // underline and then immediately remove it.
-  + .breadcrumb-item:hover::before {
-    text-decoration: underline;
-  }
-  // stylelint-disable-next-line no-duplicate-selectors
-  + .breadcrumb-item:hover::before {
-    text-decoration: none;
-  }
-
-  &.active {
-    color: $breadcrumb-active-color;
-  }
-}
--- a/src/assets/scss/dashboard/bootstrap/_button-group.scss
+++ b/src/assets/scss/dashboard/bootstrap/_button-group.scss
@@ -1,166 +0,0 @@
-// stylelint-disable selector-no-qualifying-type
-
-// Make the div behave like a button
-.btn-group,
-.btn-group-vertical {
-  position: relative;
-  display: inline-flex;
-  vertical-align: middle; // match .btn alignment given font-size hack above
-
-  > .btn {
-    position: relative;
-    flex: 0 1 auto;
-
-    // Bring the hover, focused, and "active" buttons to the front to overlay
-    // the borders properly
-    @include hover {
-      z-index: 1;
-    }
-    &:focus,
-    &:active,
-    &.active {
-      z-index: 1;
-    }
-  }
-
-  // Prevent double borders when buttons are next to each other
-  .btn + .btn,
-  .btn + .btn-group,
-  .btn-group + .btn,
-  .btn-group + .btn-group {
-    margin-left: -$btn-border-width;
-  }
-}
-
-// Optional: Group multiple button groups together for a toolbar
-.btn-toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-
-  .input-group {
-    width: auto;
-  }
-}
-
-.btn-group {
-  > .btn:first-child {
-    margin-left: 0;
-  }
-
-  // Reset rounded corners
-  > .btn:not(:last-child):not(.dropdown-toggle),
-  > .btn-group:not(:last-child) > .btn {
-    @include border-right-radius(0);
-  }
-
-  > .btn:not(:first-child),
-  > .btn-group:not(:first-child) > .btn {
-    @include border-left-radius(0);
-  }
-}
-
-// Sizing
-//
-// Remix the default button sizing classes into new ones for easier manipulation.
-
-.btn-group-sm > .btn { @extend .btn-sm; }
-.btn-group-lg > .btn { @extend .btn-lg; }
-
-
-//
-// Split button dropdowns
-//
-
-.dropdown-toggle-split {
-  padding-right: $btn-padding-x * .75;
-  padding-left: $btn-padding-x * .75;
-
-  &::after {
-    margin-left: 0;
-  }
-}
-
-.btn-sm + .dropdown-toggle-split {
-  padding-right: $btn-padding-x-sm * .75;
-  padding-left: $btn-padding-x-sm * .75;
-}
-
-.btn-lg + .dropdown-toggle-split {
-  padding-right: $btn-padding-x-lg * .75;
-  padding-left: $btn-padding-x-lg * .75;
-}
-
-
-// The clickable button for toggling the menu
-// Set the same inset shadow as the :active state
-.btn-group.show .dropdown-toggle {
-  @include box-shadow($btn-active-box-shadow);
-
-  // Show no shadow for `.btn-link` since it has no other button styles.
-  &.btn-link {
-    @include box-shadow(none);
-  }
-}
-
-
-//
-// Vertical button groups
-//
-
-.btn-group-vertical {
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-
-  .btn,
-  .btn-group {
-    width: 100%;
-  }
-
-  > .btn + .btn,
-  > .btn + .btn-group,
-  > .btn-group + .btn,
-  > .btn-group + .btn-group {
-    margin-top: -$btn-border-width;
-    margin-left: 0;
-  }
-
-  // Reset rounded corners
-  > .btn:not(:last-child):not(.dropdown-toggle),
-  > .btn-group:not(:last-child) > .btn {
-    @include border-bottom-radius(0);
-  }
-
-  > .btn:not(:first-child),
-  > .btn-group:not(:first-child) > .btn {
-    @include border-top-radius(0);
-  }
-}
-
-
-// Checkbox and radio options
-//
-// In order to support the browser's form validation feedback, powered by the
-// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
-// `display: none;` or `visibility: hidden;` as that also hides the popover.
-// Simply visually hiding the inputs via `opacity` would leave them clickable in
-// certain cases which is prevented by using `clip` and `pointer-events`.
-// This way, we ensure a DOM element is visible to position the popover from.
-//
-// See https://github.com/twbs/bootstrap/pull/12794 and
-// https://github.com/twbs/bootstrap/pull/14559 for more information.
-
-.btn-group-toggle {
-  > .btn,
-  > .btn-group > .btn {
-    margin-bottom: 0; // Override default `<label>` value
-
-    input[type="radio"],
-    input[type="checkbox"] {
-      position: absolute;
-      clip: rect(0, 0, 0, 0);
-      pointer-events: none;
-    }
-  }
-}
--- a/src/assets/scss/dashboard/bootstrap/_buttons.scss
+++ b/src/assets/scss/dashboard/bootstrap/_buttons.scss
@@ -1,143 +0,0 @@
-// stylelint-disable selector-no-qualifying-type
-
-//
-// Base styles
-//
-
-.btn {
-  display: inline-block;
-  font-weight: $btn-font-weight;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  user-select: none;
-  border: $btn-border-width solid transparent;
-  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);
-  @include transition($btn-transition);
-
-  // Share hover and focus styles
-  @include hover-focus {
-    text-decoration: none;
-  }
-
-  &:focus,
-  &.focus {
-    outline: 0;
-    box-shadow: $btn-focus-box-shadow;
-  }
-
-  // Disabled comes first so active can properly restyle
-  &.disabled,
-  &:disabled {
-    opacity: $btn-disabled-opacity;
-    @include box-shadow(none);
-  }
-
-  // Opinionated: add "hand" cursor to non-disabled .btn elements
-  &:not(:disabled):not(.disabled) {
-    cursor: pointer;
-  }
-
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active {
-    background-image: none;
-    @include box-shadow($btn-active-box-shadow);
-
-    &:focus {
-      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
-    }
-  }
-}
-
-// Future-proof disabling of clicks on `<a>` elements
-a.btn.disabled,
-fieldset:disabled a.btn {
-  pointer-events: none;
-}
-
-
-//
-// Alternate buttons
-//
-
-@each $color, $value in $theme-colors {
-  .btn-#{$color} {
-    @include button-variant($value, $value);
-  }
-}
-
-@each $color, $value in $theme-colors {
-  .btn-outline-#{$color} {
-    @include button-outline-variant($value);
-  }
-}
-
-
-//
-// Link buttons
-//
-
-// Make a button look and behave like a link
-.btn-link {
-  font-weight: $font-weight-normal;
-  color: $link-color;
-  background-color: transparent;
-
-  @include hover {
-    color: $link-hover-color;
-    text-decoration: $link-hover-decoration;
-    background-color: transparent;
-    border-color: transparent;
-  }
-
-  &:focus,
-  &.focus {
-    text-decoration: $link-hover-decoration;
-    border-color: transparent;
-    box-shadow: none;
-  }
-
-  &:disabled,
-  &.disabled {
-    color: $btn-link-disabled-color;
-  }
-
-  // No need for an active state here
-}
-
-
-//
-// Button Sizes
-//
-
-.btn-lg {
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
-}
-
-.btn-sm {
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
-}
-
-
-//
-// Block button
-//
-
-.btn-block {
-  display: block;
-  width: 100%;
-
-  // Vertically space out multiple block buttons
-  + .btn-block {
-    margin-top: $btn-block-spacing-y;
-  }
-}
-
-// Specificity overrides
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
-  &.btn-block {
-    width: 100%;
-  }
-}
--- a/src/assets/scss/dashboard/bootstrap/_card.scss
+++ b/src/assets/scss/dashboard/bootstrap/_card.scss
@@ -1,299 +0,0 @@
-//
-// Base styles
-//
-
-.card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  word-wrap: break-word;
-  background-color: $card-bg;
-  background-clip: border-box;
-  border: $card-border-width solid $card-border-color;
-  @include border-radius($card-border-radius);
-
-  > hr {
-    margin-right: 0;
-    margin-left: 0;
-  }
-
-  > .list-group:first-child {
-    .list-group-item:first-child {
-      @include border-top-radius($card-border-radius);
-    }
-  }
-
-  > .list-group:last-child {
-    .list-group-item:last-child {
-      @include border-bottom-radius($card-border-radius);
-    }
-  }
-}
-
-.card-body {
-  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
-  // as much space as possible, ensuring footers are aligned to the bottom.
-  flex: 1 1 auto;
-  padding: $card-spacer-x;
-}
-
-.card-title {
-  margin-bottom: $card-spacer-y;
-}
-
-.card-subtitle {
-  margin-top: -($card-spacer-y / 2);
-  margin-bottom: 0;
-}
-
-.card-text:last-child {
-  margin-bottom: 0;
-}
-
-.card-link {
-  @include hover {
-    text-decoration: none;
-  }
-
-  + .card-link {
-    margin-left: $card-spacer-x;
-  }
-}
-
-//
-// Optional textual caps
-//
-
-.card-header {
-  padding: $card-spacer-y $card-spacer-x;
-  margin-bottom: 0; // Removes the default margin-bottom of <hN>
-  background-color: $card-cap-bg;
-  border-bottom: $card-border-width solid $card-border-color;
-
-  &:first-child {
-    @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
-  }
-
-  + .list-group {
-    .list-group-item:first-child {
-      border-top: 0;
-    }
-  }
-}
-
-.card-footer {
-  padding: $card-spacer-y $card-spacer-x;
-  background-color: $card-cap-bg;
-  border-top: $card-border-width solid $card-border-color;
-
-  &:last-child {
-    @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
-  }
-}
-
-
-//
-// Header navs
-//
-
-.card-header-tabs {
-  margin-right: -($card-spacer-x / 2);
-  margin-bottom: -$card-spacer-y;
-  margin-left: -($card-spacer-x / 2);
-  border-bottom: 0;
-}
-
-.card-header-pills {
-  margin-right: -($card-spacer-x / 2);
-  margin-left: -($card-spacer-x / 2);
-}
-
-// Card image
-.card-img-overlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  padding: $card-img-overlay-padding;
-}
-
-.card-img {
-  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
-  @include border-radius($card-inner-border-radius);
-}
-
-// Card image caps
-.card-img-top {
-  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
-  @include border-top-radius($card-inner-border-radius);
-}
-
-.card-img-bottom {
-  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
-  @include border-bottom-radius($card-inner-border-radius);
-}
-
-
-// Card deck
-
-.card-deck {
-  display: flex;
-  flex-direction: column;
-
-  .card {
-    margin-bottom: $card-deck-margin;
-  }
-
-  @include media-breakpoint-up(sm) {
-    flex-flow: row wrap;
-    margin-right: -$card-deck-margin;
-    margin-left: -$card-deck-margin;
-
-    .card {
-      display: flex;
-      // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
-      flex: 1 0 0%;
-      flex-direction: column;
-      margin-right: $card-deck-margin;
-      margin-bottom: 0; // Override the default
-      margin-left: $card-deck-margin;
-    }
-  }
-}
-
-
-//
-// Card groups
-//
-
-.card-group {
-  display: flex;
-  flex-direction: column;
-
-  // The child selector allows nested `.card` within `.card-group`
-  // to display properly.
-  > .card {
-    margin-bottom: $card-group-margin;
-  }
-
-  @include media-breakpoint-up(sm) {
-    flex-flow: row wrap;
-    // The child selector allows nested `.card` within `.card-group`
-    // to display properly.
-    > .card {
-      // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
-      flex: 1 0 0%;
-      margin-bottom: 0;
-
-      + .card {
-        margin-left: 0;
-        border-left: 0;
-      }
-
-      // Handle rounded corners
-      @if $enable-rounded {
-        &:first-child {
-          @include border-right-radius(0);
-
-          .card-img-top,
-          .card-header {
-            border-top-right-radius: 0;
-          }
-          .card-img-bottom,
-          .card-footer {
-            border-bottom-right-radius: 0;
-          }
-        }
-
-        &:last-child {
-          @include border-left-radius(0);
-
-          .card-img-top,
-          .card-header {
-            border-top-left-radius: 0;
-          }
-          .card-img-bottom,
-          .card-footer {
-            border-bottom-left-radius: 0;
-          }
-        }
-
-        &:only-child {
-          @include border-radius($card-border-radius);
-
-          .card-img-top,
-          .card-header {
-            @include border-top-radius($card-border-radius);
-          }
-          .card-img-bottom,
-          .card-footer {
-            @include border-bottom-radius($card-border-radius);
-          }
-        }
-
-        &:not(:first-child):not(:last-child):not(:only-child) {
-          @include border-radius(0);
-
-          .card-img-top,
-          .card-img-bottom,
-          .card-header,
-          .card-footer {
-            @include border-radius(0);
-          }
-        }
-      }
-    }
-  }
-}
-
-
-//
-// Columns
-//
-
-.card-columns {
-  .card {
-    margin-bottom: $card-columns-margin;
-  }
-
-  @include media-breakpoint-up(sm) {
-    column-count: $card-columns-count;
-    column-gap: $card-columns-gap;
-
-    .card {
-      display: inline-block; // Don't let them vertically span multiple columns
-      width: 100%; // Don't let their width change
-    }
-  }
-}
-
-
-//
-// Accordion
-//
-
-.accordion {
-  .card:not(:first-of-type):not(:last-of-type) {
-    border-bottom: 0;
-    border-radius: 0;
-  }
-
-  .card:not(:first-of-type) {
-    .card-header:first-child {
-      border-radius: 0;
-    }
-  }
-
-  .card:first-of-type {
-    border-bottom: 0;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  .card:last-of-type {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
chomik	a811ad1489	0.0.32	2018-04-16 09:29:07 +02:00
chomik	4746ff1dba	version 0.0.32	2018-04-16 09:29:07 +02:00
chomik	ebb80f6c8a	version 0.0.31	2018-04-16 09:28:18 +02:00
chomik	b81cd25812	#93	2018-04-16 09:14:01 +02:00
chomik	de8eb10ddf	update bootstrap to v4.1.0	2018-04-16 09:11:34 +02:00
Paweł Kuna	25c8db86f6	Merge pull request #82 from ibtjw/dev whitespace	2018-04-13 09:02:18 +02:00
TJ Walsh	cbe8406ccf	whitespace	2018-04-12 22:01:32 -05:00
Paweł Kuna	04b4df03a7	Update README.md	2018-04-12 16:55:23 +02:00
chomik	64249b0c4b	fix #78	2018-04-12 13:44:48 +02:00
chomik	442c766215	#37 new icons in ICON INPUT	2018-04-12 11:33:15 +02:00
Bram Borggreve	ec421867fd	Merge branch 'dev' of https://github.com/entoil/tabler into entoil-dev	2018-04-12 03:06:02 -05:00
Bram Borggreve	7b72154bc2	Merge pull request #73 from jamiebuilds/gender Add inclusive gender input options	2018-04-12 03:01:37 -05:00
Paweł Kuna	9299e62774	Merge pull request #76 from gruz0/fix-invalid-usage-of-blog-page Replace duplicate blog's menu items with carousel	2018-04-11 10:29:58 +02:00
Alexander Kadyrov	3a6a3457e1	Replace duplicate blog's menu items with carousel	2018-04-11 10:52:48 +03:00
entoil	776e762026	Change one of input icon demos to sun and moon	2018-04-10 20:57:12 -05:00
Jamie Kyle	1ea2449f1f	Add inclusive gender input options	2018-04-10 11:46:04 -07:00
codecalm	a449d3f019	carousel background	2018-04-09 22:55:47 +02:00
codecalm	bb9fc9a250	carousel component	2018-04-09 22:53:45 +02:00
codecalm	e0b1467471	Merge branch 'dev' of https://github.com/tabler/tabler into dev	2018-04-09 22:21:45 +02:00
codecalm	146b2f451d	homepage fixes	2018-04-09 22:18:59 +02:00
chomik	e80df81401	pricing cards fix #60	2018-04-06 16:38:51 +02:00
chomik	00f78ad823	0.0.31	2018-04-06 16:35:06 +02:00
chomik	962de8d053	menu fix	2018-04-06 16:33:20 +02:00
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	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	5296c523ac	Merge branches 'dev' and 'master' of https://github.com/tabler/tabler into dev	2018-04-04 12:45:16 +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
Git-Good	991316bfe0	Update README.md	2018-04-03 19:28:50 -07:00
Git-Good	4e8e8f2bf5	Edited for wordchoice, contractions	2018-04-03 18:03:22 -07: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