0.0.32

whitespace

.gitignore

@@ -1,18 +1,16 @@
 .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
 deploy-site
 /commits.sh
 /assets/css/
+/vendor/

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

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)

README.md

@@ -1,42 +1,32 @@
-<p align="center">
-  <a href="https://tabler.github.io/">
-    <img src="https://tabler.github.io/assets/images/logo-default.svg" alt="Tabler" width="72" height="72">
-  </a>
-</p>
+# Tabler 
 
-<h3 align="center">Tabler - Admin panel made simple</h3>
+<a href="https://buddy.works"><img src="https://assets.buddy.works/automated-dark.svg" alt="Automated by Buddy" align="right"></a>
 
-<p align="center">
-Premium and Open Source dashboard template with responsive and high quality UI. For Free!
-</p>
-
-<p align="center">
-	<strong>
-	  <a href="https://tabler.github.io/demo/">View Demo</a> | <a href="https://github.com/tabler/tabler/archive/master.zip">Download ZIP</a>
-	</strong>
-</p>
-
-<p align="center">
-    <a href="https://www.npmjs.com/package/tabler-ui"><img src="https://img.shields.io/npm/dt/tabler-ui.svg" alt="Total Downloads"></a>
-    <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler-ui.svg" alt="Latest Release"></a>
-    <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler-ui.svg" alt="License"></a>
-    <a href="https://david-dm.org/tabler/tabler?type=dev"><img src="https://img.shields.io/david/dev/tabler/tabler.svg" alt="devDependency Status"></a>
-</p>
+Premium and Open Source dashboard template with responsive and high quality UI.
 
+<strong><a href="https://tabler.github.io/demo/">View Demo</a> | <a href="https://github.com/tabler/tabler/archive/master.zip">Download ZIP</a> | <a href="https://goo.gl/zJP2dT">Join us on Slack</a></strong>
 
+<br><br>
 
 ![Tabler preview](https://tabler.github.io/assets/images/dashboard.png)
 
-----------
+## Features
 
-## About Tabler
+<img src="https://tabler.github.io/assets/images/features/features-2.png" width="400" align="right" style="max-width: 50%">
 
-We’ve created this admin panel for everyone who wants to create any templates based on our ready components. Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. The only requirement is a basic HTML and CSS knowledge—as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!
 
-After using many of different admin panels, no matter free or paid, we've noticed they all had a lot of defects—and the main one was resource intensity.
-They were loading loads of useless components that you wouldn't ever use, so we've decided to choose a different way. The whole system is plugin-based, what means that you have a control over what is needed and what not.
+We created this admin panel for everyone who wants to create any templates based on our pre-made components. Our mission is to deliver a user-friendly, clear and easy administration panel, that can be used by both, simple websites and sophisticated systems. The only requirement is a basic HTML and CSS knowledge—as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!
+
+* **Responsive:** With support for mobile, tablet and desktop it doesn’t matter what device you’re using. Tabler is responsive in all major browsers.
+* **Cross Browser:** Our theme works perfectly with: Latest Chrome, Firefox+, Latest Safari, Opera, Internet Explorer 10+ and mobile browsers. We work hard to continuously support them.
+* **HTML5 & CSS3:** We only use modern web technologies like HTML5 and CSS3. Our theme includes some subtile CSS3 animations so you will get anyone’s attention.
+* **Clean Code:** We strictly followed Bootstrap’s guidelines to make your integration as easy as possible. All code is handwritten and W3c valid.
+* **Demo pages**: Tabler features over 20 individual pages featuring various components, giving you the freedom of choosing and combining. All components can take variation in color and styling, that can easily be modified using Sass. The sky is the limit!
+
+## Status
+
+<a href="https://www.npmjs.com/package/tabler-ui"><img src="https://img.shields.io/npm/dt/tabler-ui.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler-ui.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler-ui.svg" alt="Latest Release"></a> <a href="https://david-dm.org/tabler/tabler?type=dev"><img src="https://img.shields.io/david/dev/tabler/tabler.svg" alt="devDependency Status"></a> [![buddy pipeline](https://app.buddy.works/codecalm/tabler/pipelines/pipeline/131922/badge.svg?token=1ab151000ecf8700a90dd4d0d7184945d439d2642679b257092d16e76a45dce4 "buddy pipeline")](https://app.buddy.works/codecalm/tabler/pipelines/pipeline/131922)
 
-To make the system works fast and reliable, we've converted most of the components to CSS. Thanks to this, you don't have to load a lot of unnecessary libraries into your browser what really boosts the overall speed.
 
 ## Documentation
 
@@ -52,15 +42,15 @@ git clone https://github.com/tabler/tabler.git
 
 ### Setup environment
 
-To use our build system and run our documentation locally, you'll need a copy of Tabler's source files and Node. Follow these steps:
+To use our build system and run documentation locally, you will need a copy of Tabler's source files and Node. Follow the steps below:
 
-1. [Download and install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
-2. Navigate to the root `/tabler` directory and run `npm install` to install our local dependencies listed in `package.json`.
+1. [Download and install Node.js](https://nodejs.org/download/), which is used to manage our dependencies.
+2. Navigate to the root `/tabler` directory and run `npm install` to install local dependencies listed in `package.json`.
 3. [Install Ruby](https://www.ruby-lang.org/en/documentation/installation/), install [Bundler](https://bundler.io/) with `gem install bundler`, and finally run `bundle install`. This will install all Ruby dependencies, such as Jekyll and plugins.
    
    **Windows users:** Read [this guide](https://jekyllrb.com/docs/windows/) to get Jekyll up and running without problems.
   
-When completed, you'll be able to run the various commands provided from the command line.
+When completed, you will be able to run the various commands provided in the command line.
 
 ### Build Tabler
 
@@ -70,6 +60,10 @@ When completed, you'll be able to run the various commands provided from the com
 
 **Warning!** all changes made in `_site/` folder would be overwritten on application build.
 
+## Development preview
+
+All changes made on `dev` branch are avaliable on 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).
@@ -77,8 +71,8 @@ Have a bug or a feature request? [Please open a new issue](https://github.com/ta
 ## Browser Support
 
 ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png)
---- | --- | --- | --- | --- | --- |
-Latest ✔ | Latest ✔ | Latest ✔ | 11+ ✔ | 9.1+ ✔ | Latest ✔ |
+--- | --- | --- | --- | --- | ---
+Latest ✔ | Latest ✔ | Latest ✔ | 11+ ✔ | 9.1+ ✔ | Latest ✔
 
 ## Creators
 

_config.yml

@@ -2,6 +2,7 @@ title: Tabler
 description: tabler.github.io - a responsive, flat and full featured admin template
 
 source: src
+host: 0.0.0.0
 
 plugins:
   - jekyll-tidy
@@ -24,10 +25,10 @@ exclude:
   - .DS_Store
   - .sass-cache/
   - .asset-cache/
-  - assets/scss/*
-  - assets/plugins/**/*.scss
   - push-to-repo.sh
   - commits.sh
+  - assets/scss/*
+  - assets/plugins/**/*.scss
 
 collections:
   docs:
@@ -73,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:

composer.json

@@ -0,0 +1,15 @@
+{
+    "name": "tabler/tabler",
+    "description": "Premium and Open Source dashboard template with responsive and high quality UI. For Free!",
+    "type": "library",
+    "license": "MIT",
+	"require": {},
+	"require-dev": {},
+	"autoload": {},
+	"authors": [
+		{
+			"name": "codecalm",
+			"email": "codecalm@gmail.com"
+		}
+	]
+}

dist-new-version.sh

@@ -0,0 +1,15 @@
+#!/usr/bin/env bash
+
+version=0.0.32
+
+echo "Version $version"
+
+npm run dist
+git add .
+git commit -am "version $version"
+npm version $version
+git push origin master && git push origin master --tags
+
+npm run publish-dist
+
+npm publish

dist/400.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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" />

dist/401.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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" />

dist/403.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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" />

dist/404.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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" />

dist/500.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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" />

dist/503.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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" />

dist/assets/js/core.js

@@ -1,97 +1,107 @@
-var hexToRgba = function(hex, opacity) {
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    var rgb = result ? {
-            r: parseInt(result[1], 16),
-            g: parseInt(result[2], 16),
-            b: parseInt(result[3], 16)
-        } : null;
+/**
+ *
+ */
+let hexToRgba = function(hex, opacity) {
+  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  let rgb = result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
 
-    return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', '+ opacity + ')';
+  return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + opacity + ')';
 };
 
-$(document).ready(function () {
+/**
+ *
+ */
+$(document).ready(function() {
+  /** Constant div card */
+  const DIV_CARD = 'div.card';
 
-    // Initialize tooltips
-    $('[data-toggle="tooltip"]').tooltip();
+  /** Initialize tooltips */
+  $('[data-toggle="tooltip"]').tooltip();
 
-    // Initialize popovers
-	$('[data-toggle="popover"]').popover({
-		html: true
-    });
+  /** Initialize popovers */
+  $('[data-toggle="popover"]').popover({
+    html: true
+  });
 
-    // Function for remove card
-    $('[data-toggle="card-remove"]').on('click', function (e) {
-        var $card = $(this).closest('div.card');
-        $card.remove();
+  /** Function for remove card */
+  $('[data-toggle="card-remove"]').on('click', function(e) {
+    let $card = $(this).closest(DIV_CARD);
 
-        e.preventDefault();
-        return false;
-    });
+    $card.remove();
 
-    // Function for collapse card
-    $('[data-toggle="card-collapse"]').on('click', function (e) {
-        var $this = $(this),
-            $card = $this.closest('div.card');
+    e.preventDefault();
+    return false;
+  });
 
-        $card.toggleClass('card-collapsed');
+  /** Function for collapse card */
+  $('[data-toggle="card-collapse"]').on('click', function(e) {
+    let $card = $(this).closest(DIV_CARD);
 
-        e.preventDefault();
-        return false;
-    });
+    $card.toggleClass('card-collapsed');
 
-    // Function for fullscreen card
-    $('[data-toggle="card-fullscreen"]').on('click', function(e) {
-        var $card = $(this).closest('div.card');
+    e.preventDefault();
+    return false;
+  });
 
-        $card.toggleClass('card-fullscreen').removeClass('card-collapsed');
+  /** Function for fullscreen card */
+  $('[data-toggle="card-fullscreen"]').on('click', function(e) {
+    let $card = $(this).closest(DIV_CARD);
 
-        e.preventDefault();
-        return false;
-    });
+    $card.toggleClass('card-fullscreen').removeClass('card-collapsed');
 
-    if($('[data-sparkline]').length) {
-        var generateSparkline = function($elem, data, params) {
-            $elem.sparkline(data, {
-                type: $elem.attr('data-sparkline-type'),
-                height: '100%',
-                barColor: params.color,
-                lineColor: params.color,
-                fillColor: 'transparent',
-                spotColor: params.color,
-                spotRadius: 0,
-                lineWidth: 2,
-                highlightColor: hexToRgba(params.color, .6),
-                highlightLineColor: '#666',
-                defaultPixelsPerValue: 5
-            });
-        };
+    e.preventDefault();
+    return false;
+  });
 
-        require(['sparkline'], function(){
-            $('[data-sparkline]').each(function(){
-                var $chart = $(this);
+  /**  */
+  if ($('[data-sparkline]').length) {
+    let generateSparkline = function($elem, data, params) {
+      $elem.sparkline(data, {
+        type: $elem.attr('data-sparkline-type'),
+        height: '100%',
+        barColor: params.color,
+        lineColor: params.color,
+        fillColor: 'transparent',
+        spotColor: params.color,
+        spotRadius: 0,
+        lineWidth: 2,
+        highlightColor: hexToRgba(params.color, .6),
+        highlightLineColor: '#666',
+        defaultPixelsPerValue: 5
+      });
+    };
 
-                generateSparkline($chart, JSON.parse($chart.attr('data-sparkline')), {
-                    color: $chart.attr('data-sparkline-color')
-                });
-            });
+    require(['sparkline'], function() {
+      $('[data-sparkline]').each(function() {
+        let $chart = $(this);
+
+        generateSparkline($chart, JSON.parse($chart.attr('data-sparkline')), {
+          color: $chart.attr('data-sparkline-color')
         });
-    }
+      });
+    });
+  }
 
+  /**  */
+  if ($('.chart-circle').length) {
+    require(['circle-progress'], function() {
+      $('.chart-circle').each(function() {
+        let $this = $(this);
 
-    if($('.chart-circle').length) {
-        require(['circle-progress'], function () {
-            $('.chart-circle').each(function () {
-                var $this = $(this);
-                $this.circleProgress({
-                    fill: {
-                        color: tabler.colors[$this.attr('data-color')] || tabler.colors.blue
-                    },
-                    size: $this.height(),
-                    startAngle: -Math.PI / 4 * 2,
-                    emptyFill: '#F4F4F4',
-                    lineCap: 'round'
-                });
-            });
+        $this.circleProgress({
+          fill: {
+            color: tabler.colors[$this.attr('data-color')] || tabler.colors.blue
+          },
+          size: $this.height(),
+          startAngle: -Math.PI / 4 * 2,
+          emptyFill: '#F4F4F4',
+          lineCap: 'round'
         });
-    }
+      });
+    });
+  }
 });

dist/assets/plugins/charts-c3/plugin.min.css

@@ -1,224 +0,0 @@
-/*-- Chart --*/
-.c3 svg {
-  font: 10px sans-serif;
-  -webkit-tap-highlight-color: transparent;
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-}
-
-.c3 path,
-.c3 line {
-  fill: none;
-  stroke: rgba(0, 40, 100, 0.12);
-}
-
-.c3 text {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  font-size: px2rem(12px);
-}
-
-.c3-legend-item-tile,
-.c3-xgrid-focus,
-.c3-ygrid,
-.c3-event-rect,
-.c3-bars path {
-  shape-rendering: crispEdges;
-}
-
-.c3-chart-arc path {
-  stroke: #fff;
-}
-
-.c3-chart-arc text {
-  fill: #fff;
-  font-size: 13px;
-}
-
-/*-- Axis --*/
-/*-- Grid --*/
-.c3-grid line {
-  stroke: #f0f0f0;
-}
-
-.c3-grid text {
-  fill: #aaa;
-}
-
-.c3-xgrid,
-.c3-ygrid {
-  stroke: #e6e6e6;
-  stroke-dasharray: 2 4;
-}
-
-/*-- Text on Chart --*/
-.c3-text {
-  font-size: 12px;
-}
-
-.c3-text.c3-empty {
-  fill: #808080;
-  font-size: 2em;
-}
-
-/*-- Line --*/
-.c3-line {
-  stroke-width: 2px;
-}
-
-/*-- Point --*/
-.c3-circle._expanded_ {
-  stroke-width: 2px;
-  stroke: white;
-}
-
-.c3-selected-circle {
-  fill: white;
-  stroke-width: 1.5px;
-}
-
-/*-- Bar --*/
-.c3-bar {
-  stroke-width: 0;
-}
-
-.c3-bar._expanded_ {
-  fill-opacity: 1;
-  fill-opacity: 0.75;
-}
-
-/*-- Focus --*/
-.c3-target.c3-focused {
-  opacity: 1;
-}
-
-.c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
-  stroke-width: 2px;
-}
-
-.c3-target.c3-defocused {
-  opacity: 0.3 !important;
-}
-
-/*-- Region --*/
-.c3-region {
-  fill: steelblue;
-  fill-opacity: .1;
-}
-
-/*-- Brush --*/
-.c3-brush .extent {
-  fill-opacity: .1;
-}
-
-/*-- Select - Drag --*/
-/*-- Legend --*/
-.c3-legend-item text {
-  fill: #545454;
-  font-size: 14px;
-}
-
-.c3-legend-item-hidden {
-  opacity: 0.15;
-}
-
-.c3-legend-background {
-  opacity: 0.75;
-  fill: white;
-  stroke: lightgray;
-  stroke-width: 1;
-}
-
-/*-- Title --*/
-.c3-title {
-  font: 14px sans-serif;
-}
-
-/*-- Tooltip --*/
-.c3-tooltip-container {
-  z-index: 10;
-}
-
-.c3-tooltip {
-  border-collapse: collapse;
-  border-spacing: 0;
-  empty-cells: show;
-  font-size: 11px;
-  line-height: 1;
-  font-weight: 700;
-  color: #fff;
-  border-radius: 3px;
-  background: #212529;
-  white-space: nowrap;
-}
-
-.c3-tooltip th {
-  padding: 6px 6px;
-  text-align: left;
-}
-
-.c3-tooltip td {
-  padding: 4px 6px;
-  font-weight: 400;
-}
-
-.c3-tooltip td > span {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  margin-right: 8px;
-  border-radius: 50%;
-  vertical-align: baseline;
-}
-
-.c3-tooltip td.value {
-  text-align: right;
-}
-
-/*-- Area --*/
-.c3-area {
-  stroke-width: 0;
-  opacity: 0.1;
-}
-
-/*-- Arc --*/
-.c3-chart-arcs-title {
-  dominant-baseline: middle;
-  font-size: 1.3em;
-}
-
-.c3-chart-arcs .c3-chart-arcs-background {
-  fill: #e0e0e0;
-  stroke: none;
-}
-
-.c3-chart-arcs .c3-chart-arcs-gauge-unit {
-  fill: #000;
-  font-size: 16px;
-}
-
-.c3-chart-arcs .c3-chart-arcs-gauge-max {
-  fill: #777;
-}
-
-.c3-chart-arcs .c3-chart-arcs-gauge-min {
-  fill: #777;
-}
-
-.c3-chart-arc .c3-gauge-value {
-  fill: #000;
-  /*  font-size: 28px !important;*/
-}
-
-.c3-chart-arc.c3-target g path {
-  opacity: 1;
-}
-
-.c3-chart-arc.c3-target.c3-focused g path {
-  opacity: 1;
-}
-
-.c3-axis {
-  fill: #868e96;
-}

dist/assets/plugins/prismjs/plugin.min.css

@@ -1,198 +0,0 @@
-@charset "UTF-8";
-/* PrismJS 1.9.0
-http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+ruby+json+less+php+python+jsx+sass+scss+sql&plugins=line-highlight+line-numbers */
-/**
- * prism.js default theme for JavaScript, CSS and HTML
- * Based on dabblet (http://dabblet.com)
- * @author Lea Verou
- */
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: slategray;
-}
-
-.token.punctuation {
-  color: #999;
-}
-
-.namespace {
-  opacity: .7;
-}
-
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: #905;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: #690;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-  color: #a67f59;
-  background: rgba(255, 255, 255, 0.5);
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-  color: #07a;
-}
-
-.token.function {
-  color: #dd4a68;
-}
-
-.token.regex,
-.token.important,
-.token.variable {
-  color: #e90;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-pre[data-line] {
-  position: relative;
-}
-
-.line-highlight {
-  position: absolute;
-  left: 0;
-  right: 0;
-  margin-top: 1em;
-  /* Same as .prism’s padding-top */
-  background: rgba(255, 255, 0, 0.1);
-  pointer-events: none;
-  line-height: inherit;
-  white-space: pre;
-}
-
-.line-highlight:before,
-.line-highlight[data-end]:after {
-  content: attr(data-start);
-  position: absolute;
-  top: .4em;
-  left: .6em;
-  min-width: 1em;
-  padding: 0 .5em;
-  background-color: rgba(153, 122, 102, 0.4);
-  color: #f5f2f0;
-  font: bold 65%/1.5 sans-serif;
-  text-align: center;
-  vertical-align: .3em;
-  border-radius: 999px;
-  text-shadow: none;
-  box-shadow: 0 1px white;
-}
-
-.line-highlight[data-end]:after {
-  content: attr(data-end);
-  top: auto;
-  bottom: .4em;
-}
-
-.line-numbers .line-highlight:before,
-.line-numbers .line-highlight:after {
-  content: none;
-}
-
-pre.line-numbers {
-  position: relative;
-  padding-left: 3.8em;
-  counter-reset: linenumber;
-}
-
-pre.line-numbers > code {
-  position: relative;
-  white-space: inherit;
-}
-
-.line-numbers .line-numbers-rows {
-  position: absolute;
-  pointer-events: none;
-  top: 0;
-  font-size: 100%;
-  left: -3.8em;
-  width: 3em;
-  /* works for line-numbers below 1000 lines */
-  letter-spacing: -1px;
-  border-right: 1px solid rgba(0, 40, 100, 0.12);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.line-numbers-rows > span {
-  pointer-events: none;
-  display: block;
-  counter-increment: linenumber;
-}
-
-.line-numbers-rows > span:before {
-  content: counter(linenumber);
-  color: rgba(134, 142, 150, 0.5);
-  display: block;
-  padding-right: 0.8em;
-  text-align: right;
-}
-
-pre.code-toolbar {
-  position: relative;
-}
-
-pre.code-toolbar > .toolbar {
-  position: absolute;
-  top: .3em;
-  right: .2em;
-  transition: opacity 0.3s ease-in-out;
-  opacity: 1;
-}
-
-pre.code-toolbar > .toolbar .toolbar-item {
-  display: inline-block;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-pre.code-toolbar > .toolbar a {
-  cursor: pointer;
-}
-
-pre.code-toolbar > .toolbar a,
-pre.code-toolbar > .toolbar button,
-pre.code-toolbar > .toolbar span {
-  color: #868e96;
-  padding: 0 .5em;
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-  font-size: px2rem(14px);
-}

dist/blog.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/cards.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">
@@ -364,10 +370,10 @@
               <div class="col-lg-6">
                 <div class="card">
                   <div class="card-header">
-                    <h3 class="card-title">Pannel with custom buttons</h3>
+                    <h3 class="card-title">Panel with custom buttons</h3>
                     <div class="card-options">
-                      <a class="btn btn-secondary btn-sm">Action 1</a>
-                      <a class="btn btn-secondary btn-sm ml-2">Action 2</a>
+                      <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">
@@ -424,7 +430,7 @@
                     </div>
                   </div>
                   <div class="card-alert alert alert-danger mb-0">
-                    Adding action was failed
+                    Adding action failed
                   </div>
                   <div class="card-body">
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!
@@ -510,7 +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">

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>

dist/charts.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/crypto-currencies.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/docs/alerts.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="../104.html" class="nav-item ">401 error</a>
-                      <a href="../403.html" class="nav-item ">403 error</a>
-                      <a href="../404.html" class="nav-item ">404 error</a>
-                      <a href="../500.html" class="nav-item ">500 error</a>
-                      <a href="../503.html" class="nav-item ">503 error</a>
-                      <a href="../email.html" class="nav-item ">Email</a>
-                      <a href="../empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../profile.html" class="dropdown-item ">Profile</a>
+                      <a href="../login.html" class="dropdown-item ">Login</a>
+                      <a href="../register.html" class="dropdown-item ">Register</a>
+                      <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="../400.html" class="dropdown-item ">400 error</a>
+                      <a href="../401.html" class="dropdown-item ">401 error</a>
+                      <a href="../403.html" class="dropdown-item ">403 error</a>
+                      <a href="../404.html" class="dropdown-item ">404 error</a>
+                      <a href="../500.html" class="dropdown-item ">500 error</a>
+                      <a href="../503.html" class="dropdown-item ">503 error</a>
+                      <a href="../email.html" class="dropdown-item ">Email</a>
+                      <a href="../empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="../rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/docs/avatars.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="../104.html" class="nav-item ">401 error</a>
-                      <a href="../403.html" class="nav-item ">403 error</a>
-                      <a href="../404.html" class="nav-item ">404 error</a>
-                      <a href="../500.html" class="nav-item ">500 error</a>
-                      <a href="../503.html" class="nav-item ">503 error</a>
-                      <a href="../email.html" class="nav-item ">Email</a>
-                      <a href="../empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../profile.html" class="dropdown-item ">Profile</a>
+                      <a href="../login.html" class="dropdown-item ">Login</a>
+                      <a href="../register.html" class="dropdown-item ">Register</a>
+                      <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="../400.html" class="dropdown-item ">400 error</a>
+                      <a href="../401.html" class="dropdown-item ">401 error</a>
+                      <a href="../403.html" class="dropdown-item ">403 error</a>
+                      <a href="../404.html" class="dropdown-item ">404 error</a>
+                      <a href="../500.html" class="dropdown-item ">500 error</a>
+                      <a href="../503.html" class="dropdown-item ">503 error</a>
+                      <a href="../email.html" class="dropdown-item ">Email</a>
+                      <a href="../empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="../rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/docs/buttons.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="../104.html" class="nav-item ">401 error</a>
-                      <a href="../403.html" class="nav-item ">403 error</a>
-                      <a href="../404.html" class="nav-item ">404 error</a>
-                      <a href="../500.html" class="nav-item ">500 error</a>
-                      <a href="../503.html" class="nav-item ">503 error</a>
-                      <a href="../email.html" class="nav-item ">Email</a>
-                      <a href="../empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../profile.html" class="dropdown-item ">Profile</a>
+                      <a href="../login.html" class="dropdown-item ">Login</a>
+                      <a href="../register.html" class="dropdown-item ">Register</a>
+                      <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="../400.html" class="dropdown-item ">400 error</a>
+                      <a href="../401.html" class="dropdown-item ">401 error</a>
+                      <a href="../403.html" class="dropdown-item ">403 error</a>
+                      <a href="../404.html" class="dropdown-item ">404 error</a>
+                      <a href="../500.html" class="dropdown-item ">500 error</a>
+                      <a href="../503.html" class="dropdown-item ">503 error</a>
+                      <a href="../email.html" class="dropdown-item ">Email</a>
+                      <a href="../empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="../rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/docs/cards.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="../104.html" class="nav-item ">401 error</a>
-                      <a href="../403.html" class="nav-item ">403 error</a>
-                      <a href="../404.html" class="nav-item ">404 error</a>
-                      <a href="../500.html" class="nav-item ">500 error</a>
-                      <a href="../503.html" class="nav-item ">503 error</a>
-                      <a href="../email.html" class="nav-item ">Email</a>
-                      <a href="../empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../profile.html" class="dropdown-item ">Profile</a>
+                      <a href="../login.html" class="dropdown-item ">Login</a>
+                      <a href="../register.html" class="dropdown-item ">Register</a>
+                      <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="../400.html" class="dropdown-item ">400 error</a>
+                      <a href="../401.html" class="dropdown-item ">401 error</a>
+                      <a href="../403.html" class="dropdown-item ">403 error</a>
+                      <a href="../404.html" class="dropdown-item ">404 error</a>
+                      <a href="../500.html" class="dropdown-item ">500 error</a>
+                      <a href="../503.html" class="dropdown-item ">503 error</a>
+                      <a href="../email.html" class="dropdown-item ">Email</a>
+                      <a href="../empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="../rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/docs/charts.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="../104.html" class="nav-item ">401 error</a>
-                      <a href="../403.html" class="nav-item ">403 error</a>
-                      <a href="../404.html" class="nav-item ">404 error</a>
-                      <a href="../500.html" class="nav-item ">500 error</a>
-                      <a href="../503.html" class="nav-item ">503 error</a>
-                      <a href="../email.html" class="nav-item ">Email</a>
-                      <a href="../empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../profile.html" class="dropdown-item ">Profile</a>
+                      <a href="../login.html" class="dropdown-item ">Login</a>
+                      <a href="../register.html" class="dropdown-item ">Register</a>
+                      <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="../400.html" class="dropdown-item ">400 error</a>
+                      <a href="../401.html" class="dropdown-item ">401 error</a>
+                      <a href="../403.html" class="dropdown-item ">403 error</a>
+                      <a href="../404.html" class="dropdown-item ">404 error</a>
+                      <a href="../500.html" class="dropdown-item ">500 error</a>
+                      <a href="../503.html" class="dropdown-item ">503 error</a>
+                      <a href="../email.html" class="dropdown-item ">Email</a>
+                      <a href="../empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="../rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/docs/colors.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="../104.html" class="nav-item ">401 error</a>
-                      <a href="../403.html" class="nav-item ">403 error</a>
-                      <a href="../404.html" class="nav-item ">404 error</a>
-                      <a href="../500.html" class="nav-item ">500 error</a>
-                      <a href="../503.html" class="nav-item ">503 error</a>
-                      <a href="../email.html" class="nav-item ">Email</a>
-                      <a href="../empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../profile.html" class="dropdown-item ">Profile</a>
+                      <a href="../login.html" class="dropdown-item ">Login</a>
+                      <a href="../register.html" class="dropdown-item ">Register</a>
+                      <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="../400.html" class="dropdown-item ">400 error</a>
+                      <a href="../401.html" class="dropdown-item ">401 error</a>
+                      <a href="../403.html" class="dropdown-item ">403 error</a>
+                      <a href="../404.html" class="dropdown-item ">404 error</a>
+                      <a href="../500.html" class="dropdown-item ">500 error</a>
+                      <a href="../503.html" class="dropdown-item ">503 error</a>
+                      <a href="../email.html" class="dropdown-item ">Email</a>
+                      <a href="../empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="../rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/docs/form-components.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="../104.html" class="nav-item ">401 error</a>
-                      <a href="../403.html" class="nav-item ">403 error</a>
-                      <a href="../404.html" class="nav-item ">404 error</a>
-                      <a href="../500.html" class="nav-item ">500 error</a>
-                      <a href="../503.html" class="nav-item ">503 error</a>
-                      <a href="../email.html" class="nav-item ">Email</a>
-                      <a href="../empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../profile.html" class="dropdown-item ">Profile</a>
+                      <a href="../login.html" class="dropdown-item ">Login</a>
+                      <a href="../register.html" class="dropdown-item ">Register</a>
+                      <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="../400.html" class="dropdown-item ">400 error</a>
+                      <a href="../401.html" class="dropdown-item ">401 error</a>
+                      <a href="../403.html" class="dropdown-item ">403 error</a>
+                      <a href="../404.html" class="dropdown-item ">404 error</a>
+                      <a href="../500.html" class="dropdown-item ">500 error</a>
+                      <a href="../503.html" class="dropdown-item ">503 error</a>
+                      <a href="../email.html" class="dropdown-item ">Email</a>
+                      <a href="../empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="../rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">
@@ -219,94 +225,134 @@
                       <div class="example">
                         <div class="form-group">
                           <label class="form-label">Color Input</label>
-                          <div class="d-flex">
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="azure" class="colorinput-input" />
-                              <span class="colorinput-color bg-azure"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="indigo" class="colorinput-input" checked="" />
-                              <span class="colorinput-color bg-indigo"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="purple" class="colorinput-input" />
-                              <span class="colorinput-color bg-purple"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="pink" class="colorinput-input" />
-                              <span class="colorinput-color bg-pink"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="red" class="colorinput-input" />
-                              <span class="colorinput-color bg-red"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="orange" class="colorinput-input" />
-                              <span class="colorinput-color bg-orange"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="yellow" class="colorinput-input" />
-                              <span class="colorinput-color bg-yellow"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="lime" class="colorinput-input" />
-                              <span class="colorinput-color bg-lime"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="green" class="colorinput-input" />
-                              <span class="colorinput-color bg-green"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="teal" class="colorinput-input" />
-                              <span class="colorinput-color bg-teal"></span>
-                            </label>
+                          <div class="row gutters-xs">
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="azure" class="colorinput-input" />
+                                <span class="colorinput-color bg-azure"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="indigo" class="colorinput-input" checked="" />
+                                <span class="colorinput-color bg-indigo"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="purple" class="colorinput-input" />
+                                <span class="colorinput-color bg-purple"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="pink" class="colorinput-input" />
+                                <span class="colorinput-color bg-pink"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="red" class="colorinput-input" />
+                                <span class="colorinput-color bg-red"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="orange" class="colorinput-input" />
+                                <span class="colorinput-color bg-orange"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="yellow" class="colorinput-input" />
+                                <span class="colorinput-color bg-yellow"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="lime" class="colorinput-input" />
+                                <span class="colorinput-color bg-lime"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="green" class="colorinput-input" />
+                                <span class="colorinput-color bg-green"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="teal" class="colorinput-input" />
+                                <span class="colorinput-color bg-teal"></span>
+                              </label>
+                            </div>
                           </div>
                         </div>
                       </div>
                       <div class="highlight">
                         <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
   <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Color Input<span class="nt">&lt;/label&gt;</span>
-  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex"</span><span class="nt">&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"azure"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-azure"</span><span class="nt">&gt;&lt;/span&gt;</span>
-    <span class="nt">&lt;/label&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"indigo"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-indigo"</span><span class="nt">&gt;&lt;/span&gt;</span>
-    <span class="nt">&lt;/label&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"purple"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-purple"</span><span class="nt">&gt;&lt;/span&gt;</span>
-    <span class="nt">&lt;/label&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"pink"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-pink"</span><span class="nt">&gt;&lt;/span&gt;</span>
-    <span class="nt">&lt;/label&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"red"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-red"</span><span class="nt">&gt;&lt;/span&gt;</span>
-    <span class="nt">&lt;/label&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"orange"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-orange"</span><span class="nt">&gt;&lt;/span&gt;</span>
-    <span class="nt">&lt;/label&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"yellow"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-yellow"</span><span class="nt">&gt;&lt;/span&gt;</span>
-    <span class="nt">&lt;/label&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"lime"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-lime"</span><span class="nt">&gt;&lt;/span&gt;</span>
-    <span class="nt">&lt;/label&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"green"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
-    <span class="nt">&lt;/label&gt;</span>
-    <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput mr-2"</span><span class="nt">&gt;</span>
-      <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"teal"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
-      <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-teal"</span><span class="nt">&gt;&lt;/span&gt;</span>
-    <span class="nt">&lt;/label&gt;</span>
+  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row gutters-xs"</span><span class="nt">&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"azure"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-azure"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"indigo"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span>  <span class="na">checked</span><span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-indigo"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"purple"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-purple"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"pink"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-pink"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"red"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-red"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"orange"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-orange"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"yellow"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-yellow"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"lime"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-lime"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"green"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-green"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
+    <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-auto"</span><span class="nt">&gt;</span>
+      <span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"colorinput"</span><span class="nt">&gt;</span>
+        <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"color"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"teal"</span> <span class="na">class=</span><span class="s">"colorinput-input"</span> <span class="nt">/&gt;</span>
+        <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"colorinput-color bg-teal"</span><span class="nt">&gt;&lt;/span&gt;</span>
+      <span class="nt">&lt;/label&gt;</span>
+    <span class="nt">&lt;/div&gt;</span>
   <span class="nt">&lt;/div&gt;</span>
 <span class="nt">&lt;/div&gt;</span></code></pre>
                       </div>
@@ -590,7 +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">

dist/docs/grid.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="../104.html" class="nav-item ">401 error</a>
-                      <a href="../403.html" class="nav-item ">403 error</a>
-                      <a href="../404.html" class="nav-item ">404 error</a>
-                      <a href="../500.html" class="nav-item ">500 error</a>
-                      <a href="../503.html" class="nav-item ">503 error</a>
-                      <a href="../email.html" class="nav-item ">Email</a>
-                      <a href="../empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../profile.html" class="dropdown-item ">Profile</a>
+                      <a href="../login.html" class="dropdown-item ">Login</a>
+                      <a href="../register.html" class="dropdown-item ">Register</a>
+                      <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="../400.html" class="dropdown-item ">400 error</a>
+                      <a href="../401.html" class="dropdown-item ">401 error</a>
+                      <a href="../403.html" class="dropdown-item ">403 error</a>
+                      <a href="../404.html" class="dropdown-item ">404 error</a>
+                      <a href="../500.html" class="dropdown-item ">500 error</a>
+                      <a href="../503.html" class="dropdown-item ">503 error</a>
+                      <a href="../email.html" class="dropdown-item ">Email</a>
+                      <a href="../empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="../rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/docs/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="../104.html" class="nav-item ">401 error</a>
-                      <a href="../403.html" class="nav-item ">403 error</a>
-                      <a href="../404.html" class="nav-item ">404 error</a>
-                      <a href="../500.html" class="nav-item ">500 error</a>
-                      <a href="../503.html" class="nav-item ">503 error</a>
-                      <a href="../email.html" class="nav-item ">Email</a>
-                      <a href="../empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../profile.html" class="dropdown-item ">Profile</a>
+                      <a href="../login.html" class="dropdown-item ">Login</a>
+                      <a href="../register.html" class="dropdown-item ">Register</a>
+                      <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="../400.html" class="dropdown-item ">400 error</a>
+                      <a href="../401.html" class="dropdown-item ">401 error</a>
+                      <a href="../403.html" class="dropdown-item ">403 error</a>
+                      <a href="../404.html" class="dropdown-item ">404 error</a>
+                      <a href="../500.html" class="dropdown-item ">500 error</a>
+                      <a href="../503.html" class="dropdown-item ">503 error</a>
+                      <a href="../email.html" class="dropdown-item ">Email</a>
+                      <a href="../empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="../rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/docs/tags.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="../104.html" class="nav-item ">401 error</a>
-                      <a href="../403.html" class="nav-item ">403 error</a>
-                      <a href="../404.html" class="nav-item ">404 error</a>
-                      <a href="../500.html" class="nav-item ">500 error</a>
-                      <a href="../503.html" class="nav-item ">503 error</a>
-                      <a href="../email.html" class="nav-item ">Email</a>
-                      <a href="../empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../profile.html" class="dropdown-item ">Profile</a>
+                      <a href="../login.html" class="dropdown-item ">Login</a>
+                      <a href="../register.html" class="dropdown-item ">Register</a>
+                      <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="../400.html" class="dropdown-item ">400 error</a>
+                      <a href="../401.html" class="dropdown-item ">401 error</a>
+                      <a href="../403.html" class="dropdown-item ">403 error</a>
+                      <a href="../404.html" class="dropdown-item ">404 error</a>
+                      <a href="../500.html" class="dropdown-item ">500 error</a>
+                      <a href="../503.html" class="dropdown-item ">503 error</a>
+                      <a href="../email.html" class="dropdown-item ">Email</a>
+                      <a href="../empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="../rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/docs/typography.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="../favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="../104.html" class="nav-item ">401 error</a>
-                      <a href="../403.html" class="nav-item ">403 error</a>
-                      <a href="../404.html" class="nav-item ">404 error</a>
-                      <a href="../500.html" class="nav-item ">500 error</a>
-                      <a href="../503.html" class="nav-item ">503 error</a>
-                      <a href="../email.html" class="nav-item ">Email</a>
-                      <a href="../empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="../profile.html" class="dropdown-item ">Profile</a>
+                      <a href="../login.html" class="dropdown-item ">Login</a>
+                      <a href="../register.html" class="dropdown-item ">Register</a>
+                      <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="../400.html" class="dropdown-item ">400 error</a>
+                      <a href="../401.html" class="dropdown-item ">401 error</a>
+                      <a href="../403.html" class="dropdown-item ">403 error</a>
+                      <a href="../404.html" class="dropdown-item ">404 error</a>
+                      <a href="../500.html" class="dropdown-item ">500 error</a>
+                      <a href="../503.html" class="dropdown-item ">503 error</a>
+                      <a href="../email.html" class="dropdown-item ">Email</a>
+                      <a href="../empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="../rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/email.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/empty.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link active" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item active">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/forgot-password.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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" />

dist/form-elements.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="./form-elements.html" class="nav-link active"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">
@@ -288,47 +294,67 @@
                         </div>
                         <div class="form-group">
                           <label class="form-label">Color Input</label>
-                          <div class="d-flex">
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="azure" class="colorinput-input" />
-                              <span class="colorinput-color bg-azure"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="indigo" class="colorinput-input"  checked/>
-                              <span class="colorinput-color bg-indigo"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="purple" class="colorinput-input" />
-                              <span class="colorinput-color bg-purple"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="pink" class="colorinput-input" />
-                              <span class="colorinput-color bg-pink"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="red" class="colorinput-input" />
-                              <span class="colorinput-color bg-red"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="orange" class="colorinput-input" />
-                              <span class="colorinput-color bg-orange"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="yellow" class="colorinput-input" />
-                              <span class="colorinput-color bg-yellow"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="lime" class="colorinput-input" />
-                              <span class="colorinput-color bg-lime"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="green" class="colorinput-input" />
-                              <span class="colorinput-color bg-green"></span>
-                            </label>
-                            <label class="colorinput mr-2">
-                              <input name="color" type="checkbox" value="teal" class="colorinput-input" />
-                              <span class="colorinput-color bg-teal"></span>
-                            </label>
+                          <div class="row gutters-xs">
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="azure" class="colorinput-input" />
+                                <span class="colorinput-color bg-azure"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="indigo" class="colorinput-input"  checked/>
+                                <span class="colorinput-color bg-indigo"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="purple" class="colorinput-input" />
+                                <span class="colorinput-color bg-purple"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="pink" class="colorinput-input" />
+                                <span class="colorinput-color bg-pink"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="red" class="colorinput-input" />
+                                <span class="colorinput-color bg-red"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="orange" class="colorinput-input" />
+                                <span class="colorinput-color bg-orange"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="yellow" class="colorinput-input" />
+                                <span class="colorinput-color bg-yellow"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="lime" class="colorinput-input" />
+                                <span class="colorinput-color bg-lime"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="green" class="colorinput-input" />
+                                <span class="colorinput-color bg-green"></span>
+                              </label>
+                            </div>
+                            <div class="col-auto">
+                              <label class="colorinput">
+                                <input name="color" type="checkbox" value="teal" class="colorinput-input" />
+                                <span class="colorinput-color bg-teal"></span>
+                              </label>
+                            </div>
                           </div>
                         </div>
                         <div class="form-group">
@@ -480,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>
@@ -574,10 +608,10 @@
                     </div>
                     <div class="col-md-6 col-lg-4">
                       <div class="form-group">
-                        <label class="form-label">Radios</label>
+                        <div class="form-label">Radios</div>
                         <div class="custom-controls-stacked">
                           <label class="custom-control custom-radio">
-                            <input type="radio" class="custom-control-input" name="example-radios" value="option1" checked="">
+                            <input type="radio" class="custom-control-input" name="example-radios" value="option1" checked>
                             <div class="custom-control-label">Option 1</div>
                           </label>
                           <label class="custom-control custom-radio">
@@ -597,57 +631,56 @@
                       <div class="form-group">
                         <div class="form-label">Inline Radios</div>
                         <div class="custom-controls-stacked">
-                          <div class="custom-control custom-radio">
-                            <input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked="">
+                          <label class="custom-control custom-radio custom-control-inline">
+                            <input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked>
                             <span class="custom-control-label">Option 1</span>
-                          </div>
-                          <div class="custom-control custom-radio">
+                          </label>
+                          <label class="custom-control custom-radio custom-control-inline">
                             <input type="radio" class="custom-control-input" name="example-inline-radios" value="option2">
                             <span class="custom-control-label">Option 2</span>
-                          </div>
-                          <div class="custom-control custom-radio">
+                          </label>
+                          <label class="custom-control custom-radio custom-control-inline">
                             <input type="radio" class="custom-control-input" name="example-inline-radios" value="option3">
                             <span class="custom-control-label">Option 3</span>
-                          </div>
+                          </label>
                         </div>
                       </div>
                       <div class="form-group">
-                        <label class="form-label">Checkboxes</label>
+                        <div class="form-label">Checkboxes</div>
                         <div class="custom-controls-stacked">
-                          <div class="custom-control custom-checkbox">
-                            <input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked="">
-                            <label class="custom-control-label">Option 1</label>
-                          </div>
-                          <div class="custom-control custom-checkbox">
+                          <label class="custom-control custom-checkbox">
+                            <input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked>
+                            <span class="custom-control-label">Option 1</span>
+                          </label>
+                          <label class="custom-control custom-checkbox">
                             <input type="checkbox" class="custom-control-input" name="example-checkbox2" value="option2">
-                            <label class="custom-control-label">Option 2</label>
-                          </div>
-                          <div class="custom-control custom-checkbox">
+                            <span class="custom-control-label">Option 2</span>
+                          </label>
+                          <label class="custom-control custom-checkbox">
                             <input type="checkbox" class="custom-control-input" name="example-checkbox3" value="option3" disabled>
-                            <label class="custom-control-label">Option Disabled</label>
-                          </div>
-                          <div class="custom-control custom-checkbox">
+                            <span class="custom-control-label">Option Disabled</span>
+                          </label>
+                          <label class="custom-control custom-checkbox">
                             <input type="checkbox" class="custom-control-input" name="example-checkbox4" value="option4" checked disabled>
-                            <label class="custom-control-label">Option Disabled Checked</label>
-                          </div>
+                            <span class="custom-control-label">Option Disabled Checked</span>
+                          </label>
                         </div>
                       </div>
                       <div class="form-group">
                         <div class="form-label">Inline Checkboxes</div>
-                        <div class="custom-controls-stacked">
-                          <div class="custom-control custom-checkbox">
-                            <input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1"
-								   checked="">
-                            <label class="custom-control-label">Option 1</label>
-                          </div>
-                          <div class="custom-control custom-checkbox">
+                        <div>
+                          <label class="custom-control custom-checkbox custom-control-inline">
+                            <input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1" checked>
+                            <span class="custom-control-label">Option 1</span>
+                          </label>
+                          <label class="custom-control custom-checkbox custom-control-inline">
                             <input type="checkbox" class="custom-control-input" name="example-inline-checkbox2" value="option2">
-                            <label class="custom-control-label">Option 2</label>
-                          </div>
-                          <div class="custom-control custom-checkbox">
+                            <span class="custom-control-label">Option 2</span>
+                          </label>
+                          <label class="custom-control custom-checkbox custom-control-inline">
                             <input type="checkbox" class="custom-control-input" name="example-inline-checkbox3" value="option3">
-                            <label class="custom-control-label">Option 3</label>
-                          </div>
+                            <span class="custom-control-label">Option 3</span>
+                          </label>
                         </div>
                       </div>
                       <div class="form-group">
@@ -1450,7 +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">

dist/gallery.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/icons.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/invoice.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/login.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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>

dist/lookup.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/maps.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/pagination.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/pricing-cards.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/profile.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link active" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item active">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

dist/register.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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" />

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>

dist/sample-cards.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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>
@@ -1044,12 +1050,8 @@
                           <th>Created</th>
                           <th>Status</th>
                           <th>Price</th>
-                          <th>
-                            <span class="sr-only">Actions</span>
-                          </th>
-                          <th>
-                            <span class="sr-only">Download</span>
-                          </th>
+                          <th></th>
+                          <th></th>
                         </tr>
                       </thead>
                       <tbody>
@@ -1754,7 +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>
@@ -1763,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>
@@ -1800,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>
@@ -1945,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">
@@ -1957,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>
@@ -2007,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>
@@ -2438,7 +2440,7 @@
                       <div class="col-6">
                         <div class="card">
                           <div class="card-body text-center">
-                            <div class="h5">New fedbacks</div>
+                            <div class="h5">New feedback</div>
                             <div class="display-4 font-weight-bold mb-4">62</div>
                             <div class="progress progress-sm">
                               <div class="progress-bar bg-red" style="width: 34%"></div>
@@ -2469,7 +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>
@@ -2566,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>
@@ -2598,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">
@@ -2610,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>
@@ -3219,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>
@@ -3300,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">

dist/store.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">
@@ -192,7 +198,7 @@
                     <div class="card">
                       <div class="card-body">
                         <div class="mb-4 text-center">
-                          <img src="assets/images/products/apple-iphone7-special.jpg" alt="Apple iPhone 7 128GB" class="img-fluid">
+                          <img src="demo/products/apple-iphone7-special.jpg" alt="Apple iPhone 7 128GB" class="img-fluid">
                         </div>
                         <h4 class="card-title"><a href="javascript:void(0)">Apple iPhone 7 Plus 256GB Red Special Edition</a></h4>
                         <div class="card-subtitle">
@@ -213,7 +219,7 @@
                     <div class="card">
                       <div class="card-body">
                         <div class="mb-4 text-center">
-                          <img src="assets/images/products/gopro-hero.jpg" alt="Apple iPhone 7 128GB" class="img-fluid">
+                          <img src="demo/products/gopro-hero.jpg" alt="Apple iPhone 7 128GB" class="img-fluid">
                         </div>
                         <h4 class="card-title"><a href="javascript:void(0)">GoPro HERO6 Black</a></h4>
                         <div class="card-subtitle">
@@ -236,7 +242,7 @@
                 <div class="card">
                   <table class="table card-table table-vcenter">
                     <tr>
-                      <td><img src="assets/images/products/apple-iphone7-special.jpg" alt="" class="h-8"></td>
+                      <td><img src="demo/products/apple-iphone7-special.jpg" alt="" class="h-8"></td>
                       <td>
                         Apple iPhone 7 Plus 256GB Red Special Edition
                       </td>
@@ -247,7 +253,7 @@
                       </td>
                     </tr>
                     <tr>
-                      <td><img src="assets/images/products/apple-macbook-pro.jpg" alt="" class="h-8"></td>
+                      <td><img src="demo/products/apple-macbook-pro.jpg" alt="" class="h-8"></td>
                       <td>
                         Apple MacBook Pro i7 3,1GHz/16/512/Radeon 560 Space Gray
                         <div class="badge badge-default badge-md">New</div>
@@ -259,7 +265,7 @@
                       </td>
                     </tr>
                     <tr>
-                      <td><img src="assets/images/products/apple-iphone7.jpg" alt="" class="h-8"></td>
+                      <td><img src="demo/products/apple-iphone7.jpg" alt="" class="h-8"></td>
                       <td>
                         Apple iPhone 7 32GB Jet Black
                       </td>
@@ -270,7 +276,7 @@
                       </td>
                     </tr>
                     <tr>
-                      <td><img src="assets/images/products/gopro-hero.jpg" alt="" class="h-8"></td>
+                      <td><img src="demo/products/gopro-hero.jpg" alt="" class="h-8"></td>
                       <td>
                         GoPro HERO6 Black
                         <div class="badge badge-default badge-md">New</div>
@@ -282,7 +288,7 @@
                       </td>
                     </tr>
                     <tr>
-                      <td><img src="assets/images/products/msi.jpg" alt="" class="h-8"></td>
+                      <td><img src="demo/products/msi.jpg" alt="" class="h-8"></td>
                       <td>
                         MSI GV62 i5-7300HQ/8GB/1TB/Win10X GTX1050
                       </td>
@@ -293,7 +299,7 @@
                       </td>
                     </tr>
                     <tr>
-                      <td><img src="assets/images/products/xiaomi-mi.jpg" alt="" class="h-8"></td>
+                      <td><img src="demo/products/xiaomi-mi.jpg" alt="" class="h-8"></td>
                       <td>
                         Xiaomi Mi A1 64GB Black
                         <div class="badge badge-default badge-md">New</div>
@@ -305,7 +311,7 @@
                       </td>
                     </tr>
                     <tr>
-                      <td><img src="assets/images/products/huawei-mate.jpg" alt="" class="h-8"></td>
+                      <td><img src="demo/products/huawei-mate.jpg" alt="" class="h-8"></td>
                       <td>
                         Huawei Mate 10 Pro Dual SIM Gray
                       </td>
@@ -316,7 +322,7 @@
                       </td>
                     </tr>
                     <tr>
-                      <td><img src="assets/images/products/sony-kd.jpg" alt="" class="h-8"></td>
+                      <td><img src="demo/products/sony-kd.jpg" alt="" class="h-8"></td>
                       <td>
                         Sony KD-49XE7005
                         <div class="badge badge-default badge-md">New</div>
@@ -328,7 +334,7 @@
                       </td>
                     </tr>
                     <tr>
-                      <td><img src="assets/images/products/samsung-galaxy.jpg" alt="" class="h-8"></td>
+                      <td><img src="demo/products/samsung-galaxy.jpg" alt="" class="h-8"></td>
                       <td>
                         Samsung Galaxy A5 A520F 2017 LTE Black Sky
                       </td>
@@ -385,7 +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">

dist/users-list.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" dir="ltr">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
@@ -14,7 +14,7 @@
     <meta name="MobileOptimized" content="320">
     <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-    <!-- Generated: 2018-03-26 17:42:19 +0200 -->
+    <!-- Generated: 2018-04-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="./104.html" class="nav-item ">401 error</a>
-                      <a href="./403.html" class="nav-item ">403 error</a>
-                      <a href="./404.html" class="nav-item ">404 error</a>
-                      <a href="./500.html" class="nav-item ">500 error</a>
-                      <a href="./503.html" class="nav-item ">503 error</a>
-                      <a href="./email.html" class="nav-item ">Email</a>
-                      <a href="./empty.html" class="nav-item ">Empty page</a>
+                  <li class="nav-item dropdown">
+                    <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
+                    <div class="dropdown-menu dropdown-menu-arrow">
+                      <a href="./profile.html" class="dropdown-item ">Profile</a>
+                      <a href="./login.html" class="dropdown-item ">Login</a>
+                      <a href="./register.html" class="dropdown-item ">Register</a>
+                      <a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
+                      <a href="./400.html" class="dropdown-item ">400 error</a>
+                      <a href="./401.html" class="dropdown-item ">401 error</a>
+                      <a href="./403.html" class="dropdown-item ">403 error</a>
+                      <a href="./404.html" class="dropdown-item ">404 error</a>
+                      <a href="./500.html" class="dropdown-item ">500 error</a>
+                      <a href="./503.html" class="dropdown-item ">503 error</a>
+                      <a href="./email.html" class="dropdown-item ">Email</a>
+                      <a href="./empty.html" class="dropdown-item ">Empty page</a>
+                      <a href="./rtl.html" class="dropdown-item ">RTL mode</a>
                     </div>
                   </li>
-                  <li class="nav-item">
+                  <li class="nav-item dropdown">
                     <a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
                   </li>
                   <li class="nav-item">
@@ -167,18 +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">

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/'));
 });
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tabler-ui",
   "description": "Premium and Open Source dashboard template with responsive and high quality UI. For Free!",
-  "version": "0.0.9",
+  "version": "0.0.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",

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
@@ -72,7 +72,7 @@ pages:
 
     401:
       name: 401 error
-      url: 104.html
+      url: 401.html
 
     403:
       name: 403 error
@@ -98,6 +98,10 @@ pages:
       name: Empty page
       url: empty.html
 
+    rtl:
+      name: RTL mode
+      url: rtl.html
+
 forms:
   name: Forms
   icon: fe fe-check-square
@@ -112,4 +116,4 @@ gallery:
 docs:
   name: Documentation
   icon: fe fe-file-text
-  url: docs/index.html
+  url: docs/index.html

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>

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>

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>

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>

src/_includes/cards/development-activity.html

@@ -31,7 +31,7 @@
 			<tr>
 				<td><span class="avatar" style="background-image: url({{ site.base }}/{{ site.data.users[16].photo }})"></span></td>
 				<td>{{ site.data.users[16].name }} {{ site.data.users[16].surname }}</td>
-				<td>Left sidebar adjusments</td>
+				<td>Left sidebar adjustments</td>
 				<td class="text-nowrap">April 15, 2018</td>
 				<td><a href="#" class="icon"><i class="fe fe-trash"></i></a></td>
 			</tr>
@@ -54,4 +54,4 @@
 	</div>
 </div>
 
-{% include js-charts.html id="chart-development-activity" data="development-activity" %}
+{% include js-charts.html id="chart-development-activity" data="development-activity" %}

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">
@@ -232,10 +242,10 @@
 			</div>
 			<div class="col-md-6 col-lg-4">
 				<div class="form-group">
-					<label class="form-label">Radios</label>
+					<div class="form-label">Radios</div>
 					<div class="custom-controls-stacked">
 						<label class="custom-control custom-radio">
-							<input type="radio" class="custom-control-input" name="example-radios" value="option1" checked="">
+							<input type="radio" class="custom-control-input" name="example-radios" value="option1" checked>
 							<div class="custom-control-label">Option 1</div>
 						</label>
 						<label class="custom-control custom-radio">
@@ -255,57 +265,56 @@
 				<div class="form-group">
 					<div class="form-label">Inline Radios</div>
 					<div class="custom-controls-stacked">
-						<div class="custom-control custom-radio">
-							<input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked="">
+						<label class="custom-control custom-radio custom-control-inline">
+							<input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked>
 							<span class="custom-control-label">Option 1</span>
-						</div>
-						<div class="custom-control custom-radio">
+						</label>
+						<label class="custom-control custom-radio custom-control-inline">
 							<input type="radio" class="custom-control-input" name="example-inline-radios" value="option2">
 							<span class="custom-control-label">Option 2</span>
-						</div>
-						<div class="custom-control custom-radio">
+						</label>
+						<label class="custom-control custom-radio custom-control-inline">
 							<input type="radio" class="custom-control-input" name="example-inline-radios" value="option3">
 							<span class="custom-control-label">Option 3</span>
-						</div>
+						</label>
 					</div>
 				</div>
 				<div class="form-group">
-					<label class="form-label">Checkboxes</label>
+					<div class="form-label">Checkboxes</div>
 					<div class="custom-controls-stacked">
-						<div class="custom-control custom-checkbox">
-							<input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked="">
-							<label class="custom-control-label">Option 1</label>
-						</div>
-						<div class="custom-control custom-checkbox">
+						<label class="custom-control custom-checkbox">
+							<input type="checkbox" class="custom-control-input" name="example-checkbox1" value="option1" checked>
+							<span class="custom-control-label">Option 1</span>
+						</label>
+						<label class="custom-control custom-checkbox">
 							<input type="checkbox" class="custom-control-input" name="example-checkbox2" value="option2">
-							<label class="custom-control-label">Option 2</label>
-						</div>
-						<div class="custom-control custom-checkbox">
+							<span class="custom-control-label">Option 2</span>
+						</label>
+						<label class="custom-control custom-checkbox">
 							<input type="checkbox" class="custom-control-input" name="example-checkbox3" value="option3" disabled>
-							<label class="custom-control-label">Option Disabled</label>
-						</div>
-						<div class="custom-control custom-checkbox">
+							<span class="custom-control-label">Option Disabled</span>
+						</label>
+						<label class="custom-control custom-checkbox">
 							<input type="checkbox" class="custom-control-input" name="example-checkbox4" value="option4" checked disabled>
-							<label class="custom-control-label">Option Disabled Checked</label>
-						</div>
+							<span class="custom-control-label">Option Disabled Checked</span>
+						</label>
 					</div>
 				</div>
 				<div class="form-group">
 					<div class="form-label">Inline Checkboxes</div>
-					<div class="custom-controls-stacked">
-						<div class="custom-control custom-checkbox">
-							<input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1"
-								   checked="">
-							<label class="custom-control-label">Option 1</label>
-						</div>
-						<div class="custom-control custom-checkbox">
+					<div>
+						<label class="custom-control custom-checkbox custom-control-inline">
+							<input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1" checked>
+							<span class="custom-control-label">Option 1</span>
+						</label>
+						<label class="custom-control custom-checkbox custom-control-inline">
 							<input type="checkbox" class="custom-control-input" name="example-inline-checkbox2" value="option2">
-							<label class="custom-control-label">Option 2</label>
-						</div>
-						<div class="custom-control custom-checkbox">
+							<span class="custom-control-label">Option 2</span>
+						</label>
+						<label class="custom-control custom-checkbox custom-control-inline">
 							<input type="checkbox" class="custom-control-input" name="example-inline-checkbox3" value="option3">
-							<label class="custom-control-label">Option 3</label>
-						</div>
+							<span class="custom-control-label">Option 3</span>
+						</label>
 					</div>
 				</div>
 				<div class="form-group">
@@ -656,4 +665,4 @@
             });
         });
     });
-</script>
+</script>

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>

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>

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 %}

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>

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>

src/_includes/cards/table-users.html

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

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.

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

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 %}

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>

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 %}

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

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

src/assets/js/core.js

@@ -1,97 +1,107 @@
-var hexToRgba = function(hex, opacity) {
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    var rgb = result ? {
-            r: parseInt(result[1], 16),
-            g: parseInt(result[2], 16),
-            b: parseInt(result[3], 16)
-        } : null;
+/**
+ *
+ */
+let hexToRgba = function(hex, opacity) {
+  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  let rgb = result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
 
-    return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', '+ opacity + ')';
+  return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + opacity + ')';
 };
 
-$(document).ready(function () {
+/**
+ *
+ */
+$(document).ready(function() {
+  /** Constant div card */
+  const DIV_CARD = 'div.card';
 
-    // Initialize tooltips
-    $('[data-toggle="tooltip"]').tooltip();
+  /** Initialize tooltips */
+  $('[data-toggle="tooltip"]').tooltip();
 
-    // Initialize popovers
-	$('[data-toggle="popover"]').popover({
-		html: true
-    });
+  /** Initialize popovers */
+  $('[data-toggle="popover"]').popover({
+    html: true
+  });
 
-    // Function for remove card
-    $('[data-toggle="card-remove"]').on('click', function (e) {
-        var $card = $(this).closest('div.card');
-        $card.remove();
+  /** Function for remove card */
+  $('[data-toggle="card-remove"]').on('click', function(e) {
+    let $card = $(this).closest(DIV_CARD);
 
-        e.preventDefault();
-        return false;
-    });
+    $card.remove();
 
-    // Function for collapse card
-    $('[data-toggle="card-collapse"]').on('click', function (e) {
-        var $this = $(this),
-            $card = $this.closest('div.card');
+    e.preventDefault();
+    return false;
+  });
 
-        $card.toggleClass('card-collapsed');
+  /** Function for collapse card */
+  $('[data-toggle="card-collapse"]').on('click', function(e) {
+    let $card = $(this).closest(DIV_CARD);
 
-        e.preventDefault();
-        return false;
-    });
+    $card.toggleClass('card-collapsed');
 
-    // Function for fullscreen card
-    $('[data-toggle="card-fullscreen"]').on('click', function(e) {
-        var $card = $(this).closest('div.card');
+    e.preventDefault();
+    return false;
+  });
 
-        $card.toggleClass('card-fullscreen').removeClass('card-collapsed');
+  /** Function for fullscreen card */
+  $('[data-toggle="card-fullscreen"]').on('click', function(e) {
+    let $card = $(this).closest(DIV_CARD);
 
-        e.preventDefault();
-        return false;
-    });
+    $card.toggleClass('card-fullscreen').removeClass('card-collapsed');
 
-    if($('[data-sparkline]').length) {
-        var generateSparkline = function($elem, data, params) {
-            $elem.sparkline(data, {
-                type: $elem.attr('data-sparkline-type'),
-                height: '100%',
-                barColor: params.color,
-                lineColor: params.color,
-                fillColor: 'transparent',
-                spotColor: params.color,
-                spotRadius: 0,
-                lineWidth: 2,
-                highlightColor: hexToRgba(params.color, .6),
-                highlightLineColor: '#666',
-                defaultPixelsPerValue: 5
-            });
-        };
+    e.preventDefault();
+    return false;
+  });
 
-        require(['sparkline'], function(){
-            $('[data-sparkline]').each(function(){
-                var $chart = $(this);
+  /**  */
+  if ($('[data-sparkline]').length) {
+    let generateSparkline = function($elem, data, params) {
+      $elem.sparkline(data, {
+        type: $elem.attr('data-sparkline-type'),
+        height: '100%',
+        barColor: params.color,
+        lineColor: params.color,
+        fillColor: 'transparent',
+        spotColor: params.color,
+        spotRadius: 0,
+        lineWidth: 2,
+        highlightColor: hexToRgba(params.color, .6),
+        highlightLineColor: '#666',
+        defaultPixelsPerValue: 5
+      });
+    };
 
-                generateSparkline($chart, JSON.parse($chart.attr('data-sparkline')), {
-                    color: $chart.attr('data-sparkline-color')
-                });
-            });
+    require(['sparkline'], function() {
+      $('[data-sparkline]').each(function() {
+        let $chart = $(this);
+
+        generateSparkline($chart, JSON.parse($chart.attr('data-sparkline')), {
+          color: $chart.attr('data-sparkline-color')
         });
-    }
+      });
+    });
+  }
 
+  /**  */
+  if ($('.chart-circle').length) {
+    require(['circle-progress'], function() {
+      $('.chart-circle').each(function() {
+        let $this = $(this);
 
-    if($('.chart-circle').length) {
-        require(['circle-progress'], function () {
-            $('.chart-circle').each(function () {
-                var $this = $(this);
-                $this.circleProgress({
-                    fill: {
-                        color: tabler.colors[$this.attr('data-color')] || tabler.colors.blue
-                    },
-                    size: $this.height(),
-                    startAngle: -Math.PI / 4 * 2,
-                    emptyFill: '#F4F4F4',
-                    lineCap: 'round'
-                });
-            });
+        $this.circleProgress({
+          fill: {
+            color: tabler.colors[$this.attr('data-color')] || tabler.colors.blue
+          },
+          size: $this.height(),
+          startAngle: -Math.PI / 4 * 2,
+          emptyFill: '#F4F4F4',
+          lineCap: 'round'
         });
-    }
+      });
+    });
+  }
 });

src/assets/plugins/charts-c3/scss/_c3.scss

@@ -1,6 +1,5 @@
 /*-- Chart --*/
 .c3 {
-	overflow: hidden;
 }
 
 .c3 svg {

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;

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';

src/assets/scss/dashboard/_aside.scss

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

src/assets/scss/dashboard/_cards.scss

@@ -15,7 +15,7 @@
 }
 
 .card-body {
-	flex: 1;
+	flex: 1 1 auto;
 	margin: 0;
 	padding: $card-spacer-y $card-spacer-x;
 	position: relative;
@@ -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;
@@ -322,7 +323,7 @@ Card tabs
 }
 
 .card-tabs-item {
-	flex: 1;
+	flex: 1 1 auto;
 	display: block;
 	padding: 1rem $card-spacer-x;
 	border-bottom: 1px solid $border-color;

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;
+}

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 {

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;

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 {

src/assets/scss/dashboard/_form.scss

@@ -34,7 +34,6 @@ textarea {
 
 .custom-control {
 	user-select: none;
-	margin: 0;
 }
 
 .custom-controls-stacked {

src/assets/scss/dashboard/_grid.scss

@@ -19,7 +19,7 @@
 		align-items: stretch;
 
 		.card {
-			flex: 1;
+			flex: 1 1 auto;
 		}
 	}
 }

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;
 }

src/assets/scss/dashboard/_layout.scss

@@ -16,7 +16,7 @@
 }
 
 .page-main {
-	flex: 1;
+	flex: 1 1 auto;
 }
 
 .page-content {
@@ -74,7 +74,7 @@
 }
 
 .page-single {
-	flex: 1;
+	flex: 1 1 auto;
 	display: flex;
 	align-items: center;
 	justify-content: center;

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;
 }

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));
-  }
-}

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);
-  }
-}

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;
-  }
-}

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;
-    }
-  }
-}