Update README.md

Sunset this library

.travis.yml

@@ -1,35 +1,32 @@
 language: node_js
 node_js:
-- '4'
-before_install:
-#- rvm install 2.2.2
-#- rvm use 2.2.2 --fuzzy
+  - '4'
 install:
-- gem install jekyll html-proofer
-- npm install -g grunt-cli
-- npm install
+  - gem install jekyll html-proofer
+  - npm install -g grunt-cli
+  - npm install
 env:
   matrix:
-  - TWBS_TEST=core
-  - TWBS_TEST=validate-html
+    - TWBS_TEST=core
+    - TWBS_TEST=validate-html
 matrix:
   fast_finish: true
 after_success:
-- grunt dist
-- cd dist;
-- zip -r jasny-bootstrap-${TRAVIS_TAG}.zip *
-- tar -zcvf jasny-bootstrap-${TRAVIS_TAG}.tar.gz *
-- ls
-- cd ..
-- git reset --hard
-- npm --no-git-tag-version version ${TRAVIS_TAG}
+  - grunt dist
+  - cd dist;
+  - zip -r jasny-bootstrap-${TRAVIS_TAG}.zip *
+  - tar -zcvf jasny-bootstrap-${TRAVIS_TAG}.tar.gz *
+  - ls
+  - cd ..
+  - git reset --hard
+  - npm --no-git-tag-version version ${TRAVIS_TAG}
 deploy:
   - provider: releases
     api_key:
-      secure: aQNPWNaAg4TaDJrYqtubvyFKFBIoRe08WLhusetTUIGlpmlRm9y+uzp1DzslKVQdoRg6frsvEClMMd4Rh6AMoY+XaTlCu7gKn8tfDfRNJg4BaEklOeZZO/nbSuzh9JRxtWsfZatpzFafgPqpxLCyj4THPu/iD3VquZjNnwnOaXBO9yGuEyGB6CKeBPMeWl2jYHqhROhXmDR5HkI1Kyu6wDXNCcWGkU5PPud1KFRa0HgDW/Ir01lc4wvxt/F3fcfbt6ZbfC4Dc9VkOSV6qJig5qFBDfyBSgcTa/vKsO3n71x1At+EpkUw4HGBqNqAE339ap4fTqR+nIM8b9fFUTtnUf5JngSsaAnWGaLmqK0QhIaeAe7tWny6T9K85pbyp68qJC7EXYswwlg+CIxNR0bQJ7LGJWphHk8TRVtCoGMNX6EZjSZr4E4tXA9BmlQUzRwF9ShABAPgbQq2SgnY7fEiif1xLSkL9sjsZSzjuRY5bkeStkxg3GaKebpvzqOnk1ml9zkDxZCvYoYaGBk+6oKfBrmX8Yef3E61FwpV9h19ZaUr9tv9vzWOiD88SCYDmU3nxIQ2CjZVDX3dg6NiuYeGzdjpwxI8g04jHp2pnwZqxL2Ci23yAX6fbBo+HgjwmNx3hyjDGWIdG0ZzOV86PCBLSO5YtHzag4LmaObu+0Gih+A=
+      secure: "utwXW5WGahq3fXq5q3x5ajdbbj6lUEpHgLW9GVZy5Mf+4MzU4CeZpB3SLfV6KDegzVMZFwd2C6MG/NZZ2Fnqoz9W22DBxMFTPHbmi69IKMd7lHG3/m0bU4Zj/AuS9+Lnky6ilf+j4BWCX4+2XbMxH4/O9oT87R8NGDQvArW2CBk="
     file: 
-    - dist/jasny-bootstrap-${TRAVIS_TAG}.zip
-    - dist/jasny-bootstrap-${TRAVIS_TAG}.tar.gz
+      - dist/jasny-bootstrap-${TRAVIS_TAG}.zip
+      - dist/jasny-bootstrap-${TRAVIS_TAG}.tar.gz
     skip_cleanup: true
     on:
       branch: master
@@ -38,9 +35,10 @@ deploy:
   - provider: npm
     email: arnold@jasny.net
     api_key:
-      secure: AguJesgWKARxL9bSfIYGCgAc7Itu8BL2HC/6TVQT7HpX+LexyvyEfkJYILGlzwnqw1KdmDC08NVt0gzIqn2PbN3TcPMnJywz9lZZqxSUdnrXj2L+cHEiMsnmV6E30R1eGPG76lRkCchzqLXjONZ6lQx8fWVAIbyeMx2+HiN74RQ=
+      secure: "JG2WD24x0TVSVcG5psFUAgdnWiGDdHeZS9PF+f9WuPzWHiwvMj5JePkPKQEbWuPFZWzpV7y6UGOkjxd87or5WmqVDWcQEn+94OzH1LBIUvlHJJtmyD4BxymEXhy6ftmJyeufTwhbDfNnuh5cDn9J0H5aRl1SZTzwKedGlCrjgiE="
     skip_cleanup: true
     on: 
       branch: master
       repo: jasny/bootstrap
       tags: true
+

Gruntfile.js

@@ -18,7 +18,6 @@ module.exports = function (grunt) {
   var fs = require('fs');
   var path = require('path');
   var BsLessdocParser = require('./grunt/bs-lessdoc-parser.js');
-  var generateRawFilesJs = require('./grunt/bs-raw-files-generator.js');
   var updateShrinkwrap = require('./grunt/shrinkwrap.js');
 
   // Project configuration.
@@ -37,8 +36,7 @@ module.exports = function (grunt) {
     clean: {
       dist: ['dist', 'docs/dist'],
       jekyll: ['_gh_pages'],
-      assets: ['assets/css/*.min.css', 'assets/js/*.min.js'],
-      jade: ['jade/*.jade']
+      assets: ['assets/css/*.min.css', 'assets/js/*.min.js']
     },
 
     jshint: {
@@ -58,7 +56,7 @@ module.exports = function (grunt) {
         src: 'js/tests/unit/*.js'
       },
       assets: {
-        src: ['docs/assets/js/application.js', 'docs/assets/js/customizer.js']
+        src: ['docs/assets/js/application.js']
       }
     },
 
@@ -76,7 +74,7 @@ module.exports = function (grunt) {
         src: 'js/tests/unit/*.js'
       },
       assets: {
-        src: ['docs/assets/js/application.js', 'docs/assets/js/customizer.js']
+        src: ['docs/assets/js/application.js']
       }
     },
 
@@ -119,21 +117,6 @@ module.exports = function (grunt) {
         src: '<%= concat.bootstrap.dest %>',
         dest: 'dist/js/<%= pkg.name %>.min.js'
       },
-      customize: {
-        options: {
-          preserveComments: 'some'
-        },
-        src: [
-          'docs/assets/js/vendor/less.min.js',
-          'docs/assets/js/vendor/jszip.min.js',
-          'docs/assets/js/vendor/uglify.min.js',
-          'docs/assets/js/vendor/blob.js',
-          'docs/assets/js/vendor/filesaver.js',
-          'docs/assets/js/raw-files.min.js',
-          'docs/assets/js/customizer.js'
-        ],
-        dest: 'docs/assets/js/customize.min.js'
-      },
       docsJs: {
         options: {
           preserveComments: 'some'
@@ -250,24 +233,6 @@ module.exports = function (grunt) {
       docs: {}
     },
 
-    jade: {
-      compile: {
-        options: {
-          pretty: true,
-          data: function () {
-            var filePath = path.join(__dirname, 'less/build/variables.less');
-            var fileContent = fs.readFileSync(filePath, { encoding: 'utf8' });
-            var parser = new BsLessdocParser(fileContent);
-            return { sections: parser.parseFile() };
-          }
-        },
-        files: {
-          'docs/_includes/customizer-variables.html': 'docs/jade/customizer-variables.jade',
-          'docs/_includes/nav-customize.html': 'docs/jade/customizer-nav.jade'
-        }
-      }
-    },
-
     validation: {
       options: {
         charset: 'utf-8',
@@ -346,7 +311,7 @@ module.exports = function (grunt) {
   var testSubtasks = [];
   // Skip core tests if running a different subset of the test suite
   if (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'core') {
-    testSubtasks = testSubtasks.concat(['dist-css', 'csslint', 'jshint', 'qunit', 'build-customizer-html']);
+    testSubtasks = testSubtasks.concat(['dist-css', 'csslint', 'jshint', 'qunit']);
   }
   // Skip HTML validation if running a different subset of the test suite
   if (!process.env.TWBS_TEST || process.env.TWBS_TEST === 'validate-html') {
@@ -374,7 +339,7 @@ module.exports = function (grunt) {
   grunt.registerTask('dist', ['clean:dist', 'dist-css', 'dist-js', 'dist-docs']);
 
   // Default task.
-  grunt.registerTask('default', ['dist', 'build-customizer']);
+  grunt.registerTask('default', ['dist']);
 
   // Documentation task.
   grunt.registerTask('docs', ['jekyll', 'dist-docs']);
@@ -384,14 +349,6 @@ module.exports = function (grunt) {
   // This can be overzealous, so its changes should always be manually reviewed!
   grunt.registerTask('change-version-number', 'replace');
 
-  // task for building customizer
-  grunt.registerTask('build-customizer', ['build-customizer-html', 'build-raw-files']);
-  grunt.registerTask('build-customizer-html', 'jade');
-  grunt.registerTask('build-raw-files', 'Add scripts/less files to customizer.', function () {
-    var banner = grunt.template.process('<%= banner %>');
-    generateRawFilesJs(banner);
-  });
-
   // Task for updating the npm packages used by the Travis build.
   grunt.registerTask('update-shrinkwrap', ['exec:npmUpdate', 'exec:npmShrinkWrap', '∆update-shrinkwrap']);
   grunt.registerTask('∆update-shrinkwrap', function () { updateShrinkwrap.call(this, grunt); });

README.md

@@ -1,13 +1,15 @@
+> This extension is for **Bootstrap 4**. Almost all of the components of this extension have been added to Bootstrap 5, making this library redundant.
+> Because Bootstrap 4 has reached its end of life, Jasny Bootstrap will no longer be updated.
+
 # [Jasny Bootstrap](http://jasny.github.io/bootstrap/)
 
 Jasny Bootstrap is an extension of the famous [Bootstrap](http://getbootstrap.com/), adding the following components:
 
-* [Button labels](http://jasny.github.io/bootstrap/css/#buttons-labels)
+* [Button labels](http://jasny.github.io/bootstrap/components/#buttons-labels)
 * [Off canvas navmenu](http://jasny.github.io/bootstrap/components/#navmenu)
 * [Fixed alerts](http://jasny.github.io/bootstrap/components/#alerts-fixed)
-* [Row link](http://jasny.github.io/bootstrap/javascript/#rowlink)
-* [Input mask](http://jasny.github.io/bootstrap/javascript/#inputmask)
-* [File input widget](http://jasny.github.io/bootstrap/javascript/#fileinput)
+* [Row link](http://jasny.github.io/bootstrap/components/#rowlink)
+* [File input widget](http://jasny.github.io/bootstrap/components/#fileinput)
 
 To get started, check out <http://jasny.github.io/bootstrap>!
 
@@ -16,9 +18,8 @@ To get started, check out <http://jasny.github.io/bootstrap>!
 
 Four quick start options are available:
 
-* [Download the latest release](https://github.com/jasny/bootstrap/releases/download/v3.1.3/jasny-bootstrap-3.1.3-dist.zip).
+* [Download the latest release](https://github.com/jasny/bootstrap/releases/download/v4.0.0/jasny-bootstrap-4.0.0-dist.zip).
 * Clone the repo: `git clone git://github.com/jasny/bootstrap.git`.
-* Install with [Bower](http://bower.io): `bower install jasny-bootstrap`.
 * Use [cdnjs](http://cdnjs.com/libraries/jasny-bootstrap).
 * Install with [Meteor](https://meteor.com): `meteor add jasny:bootstrap`.
 

_config.yml

@@ -19,13 +19,13 @@ exclude:
   - "vendor"
 
 # Custom vars
-current_version:  3.1.3
+current_version:  4.0.0
 repo:             https://github.com/jasny/bootstrap
 
 download:
-  source:         https://github.com/jasny/bootstrap/archive/v3.1.3.zip
-  dist:           https://github.com/jasny/bootstrap/releases/download/v3.1.3/jasny-bootstrap-3.1.3-dist.zip
+  source:         https://github.com/jasny/bootstrap/archive/v4.0.0.zip
+  dist:           https://github.com/jasny/bootstrap/releases/download/v4.0.0/jasny-bootstrap-v4.0.0.zip
 
 cdn:
-  css:            //cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css
-  js:             //cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js
+  css:            //cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/4.0.0/css/jasny-bootstrap.min.css
+  js:             //cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/4.0.0/js/jasny-bootstrap.min.js

bower.json

@@ -1,20 +0,0 @@
-{
-  "name": "jasny-bootstrap",
-  "main": [
-    "./dist/css/jasny-bootstrap.css",
-    "./dist/js/jasny-bootstrap.js"
-  ],
-  "ignore": [
-    "**/.*",
-    "_config.yml",
-    "CNAME",
-    "composer.json",
-    "CONTRIBUTING.md",
-    "docs",
-    "js/tests"
-  ],
-  "dependencies": { },
-  "devDependencies": {
-    "bootstrap": ">= 3.1.0"
-  }
-}

docs/_includes/ads.html

@@ -11,6 +11,6 @@
 
 
 <div id="carbonads-container">
-    <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=jansy" id="_carbonads_js"></script>
+    <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYIK277&placement=wwwjasnynet" id="_carbonads_js"></script>
 </div>
 

docs/_includes/customizer-variables.html

@@ -1,335 +0,0 @@
-
-<!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.-->
-<h2 id="components">Components</h2>
-<p>Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).</p>
-<div class="row">
-  <div class="bs-customizer-input">
-    <label for="input-@padding-base-vertical">@padding-base-vertical</label>
-    <input id="input-@padding-base-vertical" type="text" value="6px" data-var="@padding-base-vertical" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@padding-base-horizontal">@padding-base-horizontal</label>
-    <input id="input-@padding-base-horizontal" type="text" value="12px" data-var="@padding-base-horizontal" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@padding-large-vertical">@padding-large-vertical</label>
-    <input id="input-@padding-large-vertical" type="text" value="10px" data-var="@padding-large-vertical" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@padding-large-horizontal">@padding-large-horizontal</label>
-    <input id="input-@padding-large-horizontal" type="text" value="16px" data-var="@padding-large-horizontal" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@padding-small-vertical">@padding-small-vertical</label>
-    <input id="input-@padding-small-vertical" type="text" value="5px" data-var="@padding-small-vertical" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@padding-small-horizontal">@padding-small-horizontal</label>
-    <input id="input-@padding-small-horizontal" type="text" value="10px" data-var="@padding-small-horizontal" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@padding-xs-vertical">@padding-xs-vertical</label>
-    <input id="input-@padding-xs-vertical" type="text" value="1px" data-var="@padding-xs-vertical" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@padding-xs-horizontal">@padding-xs-horizontal</label>
-    <input id="input-@padding-xs-horizontal" type="text" value="5px" data-var="@padding-xs-horizontal" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@line-height-large">@line-height-large</label>
-    <input id="input-@line-height-large" type="text" value="1.33" data-var="@line-height-large" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@line-height-small">@line-height-small</label>
-    <input id="input-@line-height-small" type="text" value="1.5" data-var="@line-height-small" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@border-radius-base">@border-radius-base</label>
-    <input id="input-@border-radius-base" type="text" value="4px" data-var="@border-radius-base" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@border-radius-large">@border-radius-large</label>
-    <input id="input-@border-radius-large" type="text" value="6px" data-var="@border-radius-large" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@border-radius-small">@border-radius-small</label>
-    <input id="input-@border-radius-small" type="text" value="3px" data-var="@border-radius-small" class="form-control"/>
-  </div>
-</div>
-<h2 id="tables">Tables</h2>
-<p>Customizes the <code>.table</code> component with basic values, each used across all table variations.</p>
-<div class="row">
-  <div class="bs-customizer-input">
-    <label for="input-@table-bg-hover">@table-bg-hover</label>
-    <input id="input-@table-bg-hover" type="text" value="#f5f5f5" data-var="@table-bg-hover" class="form-control"/>
-    <p class="help-block">Background color used for <code>.table-hover</code>.</p>
-  </div>
-</div>
-<h2 id="media-queries-breakpoints">Media queries breakpoints</h2>
-<p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
-<div class="row">
-  <div class="bs-customizer-input">
-    <label for="input-@screen-xs">@screen-xs</label>
-    <input id="input-@screen-xs" type="text" value="480px" data-var="@screen-xs" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@screen-sm">@screen-sm</label>
-    <input id="input-@screen-sm" type="text" value="768px" data-var="@screen-sm" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@screen-md">@screen-md</label>
-    <input id="input-@screen-md" type="text" value="992px" data-var="@screen-md" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@screen-lg">@screen-lg</label>
-    <input id="input-@screen-lg" type="text" value="1200px" data-var="@screen-lg" class="form-control"/>
-  </div>
-</div>
-<h2 id="grid-system">Grid system</h2>
-<p>Define your custom responsive grid.</p>
-<div class="row">
-  <div class="bs-customizer-input">
-    <label for="input-@grid-gutter-width">@grid-gutter-width</label>
-    <input id="input-@grid-gutter-width" type="text" value="30px" data-var="@grid-gutter-width" class="form-control"/>
-    <p class="help-block">Padding between columns. Gets divided in half for the left and right.</p>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@grid-float-breakpoint">@grid-float-breakpoint</label>
-    <input id="input-@grid-float-breakpoint" type="text" value="768px" data-var="@grid-float-breakpoint" class="form-control"/>
-    <p class="help-block">Point at which the navbar becomes uncollapsed.</p>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@container-smooth">@container-smooth</label>
-    <input id="input-@container-smooth" type="text" value="@container-lg" data-var="@container-smooth" class="form-control"/>
-    <p class="help-block">Maximum with of a smooth container.</p>
-  </div>
-</div>
-<h2 id="navbar">Navbar</h2>
-<p></p>
-<div class="row">
-  <div class="bs-customizer-input">
-    <label for="input-@navbar-height">@navbar-height</label>
-    <input id="input-@navbar-height" type="text" value="50px" data-var="@navbar-height" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navbar-padding-horizontal">@navbar-padding-horizontal</label>
-    <input id="input-@navbar-padding-horizontal" type="text" value="floor((@grid-gutter-width / 2))" data-var="@navbar-padding-horizontal" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navbar-padding-vertical">@navbar-padding-vertical</label>
-    <input id="input-@navbar-padding-vertical" type="text" value="((@navbar-height - @line-height-computed) / 2)" data-var="@navbar-padding-vertical" class="form-control"/>
-  </div>
-</div>
-<h2 id="navmenu">Navmenu</h2>
-<p></p>
-<div class="row">
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-width">@navmenu-width</label>
-    <input id="input-@navmenu-width" type="text" value="300px" data-var="@navmenu-width" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-margin-vertical">@navmenu-margin-vertical</label>
-    <input id="input-@navmenu-margin-vertical" type="text" value="(0.5 * @line-height-computed)" data-var="@navmenu-margin-vertical" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-default-color">@navmenu-default-color</label>
-    <input id="input-@navmenu-default-color" type="text" value="#777" data-var="@navmenu-default-color" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-default-bg">@navmenu-default-bg</label>
-    <input id="input-@navmenu-default-bg" type="text" value="#f8f8f8" data-var="@navmenu-default-bg" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-default-border">@navmenu-default-border</label>
-    <input id="input-@navmenu-default-border" type="text" value="darken(@navmenu-default-bg, 6.5%)" data-var="@navmenu-default-border" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-default-link-color">@navmenu-default-link-color</label>
-    <input id="input-@navmenu-default-link-color" type="text" value="#777" data-var="@navmenu-default-link-color" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-default-link-hover-color">@navmenu-default-link-hover-color</label>
-    <input id="input-@navmenu-default-link-hover-color" type="text" value="#333" data-var="@navmenu-default-link-hover-color" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-default-link-hover-bg">@navmenu-default-link-hover-bg</label>
-    <input id="input-@navmenu-default-link-hover-bg" type="text" value="transparent" data-var="@navmenu-default-link-hover-bg" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-default-link-active-color">@navmenu-default-link-active-color</label>
-    <input id="input-@navmenu-default-link-active-color" type="text" value="#555" data-var="@navmenu-default-link-active-color" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-default-link-active-bg">@navmenu-default-link-active-bg</label>
-    <input id="input-@navmenu-default-link-active-bg" type="text" value="darken(@navmenu-default-bg, 6.5%)" data-var="@navmenu-default-link-active-bg" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-default-link-disabled-color">@navmenu-default-link-disabled-color</label>
-    <input id="input-@navmenu-default-link-disabled-color" type="text" value="#ccc" data-var="@navmenu-default-link-disabled-color" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-default-link-disabled-bg">@navmenu-default-link-disabled-bg</label>
-    <input id="input-@navmenu-default-link-disabled-bg" type="text" value="transparent" data-var="@navmenu-default-link-disabled-bg" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-default-brand-color">@navmenu-default-brand-color</label>
-    <input id="input-@navmenu-default-brand-color" type="text" value="@navmenu-default-link-color" data-var="@navmenu-default-brand-color" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-default-brand-hover-color">@navmenu-default-brand-hover-color</label>
-    <input id="input-@navmenu-default-brand-hover-color" type="text" value="darken(@navmenu-default-link-color, 10%)" data-var="@navmenu-default-brand-hover-color" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-default-brand-hover-bg">@navmenu-default-brand-hover-bg</label>
-    <input id="input-@navmenu-default-brand-hover-bg" type="text" value="transparent" data-var="@navmenu-default-brand-hover-bg" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-inverse-color">@navmenu-inverse-color</label>
-    <input id="input-@navmenu-inverse-color" type="text" value="@gray-light" data-var="@navmenu-inverse-color" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-inverse-bg">@navmenu-inverse-bg</label>
-    <input id="input-@navmenu-inverse-bg" type="text" value="#222" data-var="@navmenu-inverse-bg" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-inverse-border">@navmenu-inverse-border</label>
-    <input id="input-@navmenu-inverse-border" type="text" value="darken(@navmenu-inverse-bg, 10%)" data-var="@navmenu-inverse-border" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-inverse-link-color">@navmenu-inverse-link-color</label>
-    <input id="input-@navmenu-inverse-link-color" type="text" value="@gray-light" data-var="@navmenu-inverse-link-color" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-inverse-link-hover-color">@navmenu-inverse-link-hover-color</label>
-    <input id="input-@navmenu-inverse-link-hover-color" type="text" value="#fff" data-var="@navmenu-inverse-link-hover-color" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-inverse-link-hover-bg">@navmenu-inverse-link-hover-bg</label>
-    <input id="input-@navmenu-inverse-link-hover-bg" type="text" value="transparent" data-var="@navmenu-inverse-link-hover-bg" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-inverse-link-active-color">@navmenu-inverse-link-active-color</label>
-    <input id="input-@navmenu-inverse-link-active-color" type="text" value="@navmenu-inverse-link-hover-color" data-var="@navmenu-inverse-link-active-color" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-inverse-link-active-bg">@navmenu-inverse-link-active-bg</label>
-    <input id="input-@navmenu-inverse-link-active-bg" type="text" value="darken(@navmenu-inverse-bg, 10%)" data-var="@navmenu-inverse-link-active-bg" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-inverse-link-disabled-color">@navmenu-inverse-link-disabled-color</label>
-    <input id="input-@navmenu-inverse-link-disabled-color" type="text" value="#444" data-var="@navmenu-inverse-link-disabled-color" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-inverse-link-disabled-bg">@navmenu-inverse-link-disabled-bg</label>
-    <input id="input-@navmenu-inverse-link-disabled-bg" type="text" value="transparent" data-var="@navmenu-inverse-link-disabled-bg" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-inverse-brand-color">@navmenu-inverse-brand-color</label>
-    <input id="input-@navmenu-inverse-brand-color" type="text" value="@navmenu-inverse-link-color" data-var="@navmenu-inverse-brand-color" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-inverse-brand-hover-color">@navmenu-inverse-brand-hover-color</label>
-    <input id="input-@navmenu-inverse-brand-hover-color" type="text" value="#fff" data-var="@navmenu-inverse-brand-hover-color" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-inverse-brand-hover-bg">@navmenu-inverse-brand-hover-bg</label>
-    <input id="input-@navmenu-inverse-brand-hover-bg" type="text" value="transparent" data-var="@navmenu-inverse-brand-hover-bg" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-inverse-search-bg">@navmenu-inverse-search-bg</label>
-    <input id="input-@navmenu-inverse-search-bg" type="text" value="lighten(@navmenu-inverse-bg, 25%)" data-var="@navmenu-inverse-search-bg" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-inverse-search-bg-focus">@navmenu-inverse-search-bg-focus</label>
-    <input id="input-@navmenu-inverse-search-bg-focus" type="text" value="#fff" data-var="@navmenu-inverse-search-bg-focus" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-inverse-search-border">@navmenu-inverse-search-border</label>
-    <input id="input-@navmenu-inverse-search-border" type="text" value="@navmenu-inverse-bg" data-var="@navmenu-inverse-search-border" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@navmenu-inverse-search-placeholder-color">@navmenu-inverse-search-placeholder-color</label>
-    <input id="input-@navmenu-inverse-search-placeholder-color" type="text" value="#ccc" data-var="@navmenu-inverse-search-placeholder-color" class="form-control"/>
-  </div>
-</div>
-<h2 id="navs">Navs</h2>
-<p></p>
-<div class="row">
-  <div class="bs-customizer-input">
-    <label for="input-@nav-link-padding">@nav-link-padding</label>
-    <input id="input-@nav-link-padding" type="text" value="10px 15px" data-var="@nav-link-padding" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@nav-tabs-active-link-hover-border-color">@nav-tabs-active-link-hover-border-color</label>
-    <input id="input-@nav-tabs-active-link-hover-border-color" type="text" value="#ddd" data-var="@nav-tabs-active-link-hover-border-color" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@nav-tabs-border-color">@nav-tabs-border-color</label>
-    <input id="input-@nav-tabs-border-color" type="text" value="#ddd" data-var="@nav-tabs-border-color" class="form-control"/>
-  </div>
-</div>
-<h2 id="form-states-and-alerts">Form states and alerts</h2>
-<p>Define colors for form feedback states and, by default, alerts.</p>
-<div class="row">
-  <div class="bs-customizer-input">
-    <label for="input-@state-success-text">@state-success-text</label>
-    <input id="input-@state-success-text" type="text" value="#3c763d" data-var="@state-success-text" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@state-success-bg">@state-success-bg</label>
-    <input id="input-@state-success-bg" type="text" value="#dff0d8" data-var="@state-success-bg" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@state-success-border">@state-success-border</label>
-    <input id="input-@state-success-border" type="text" value="darken(spin(@state-success-bg, -10), 5%)" data-var="@state-success-border" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@state-info-text">@state-info-text</label>
-    <input id="input-@state-info-text" type="text" value="#31708f" data-var="@state-info-text" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@state-info-bg">@state-info-bg</label>
-    <input id="input-@state-info-bg" type="text" value="#d9edf7" data-var="@state-info-bg" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@state-info-border">@state-info-border</label>
-    <input id="input-@state-info-border" type="text" value="darken(spin(@state-info-bg, -10), 7%)" data-var="@state-info-border" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@state-warning-text">@state-warning-text</label>
-    <input id="input-@state-warning-text" type="text" value="#8a6d3b" data-var="@state-warning-text" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@state-warning-bg">@state-warning-bg</label>
-    <input id="input-@state-warning-bg" type="text" value="#fcf8e3" data-var="@state-warning-bg" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@state-warning-border">@state-warning-border</label>
-    <input id="input-@state-warning-border" type="text" value="darken(spin(@state-warning-bg, -10), 5%)" data-var="@state-warning-border" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@state-danger-text">@state-danger-text</label>
-    <input id="input-@state-danger-text" type="text" value="#a94442" data-var="@state-danger-text" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@state-danger-bg">@state-danger-bg</label>
-    <input id="input-@state-danger-bg" type="text" value="#f2dede" data-var="@state-danger-bg" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@state-danger-border">@state-danger-border</label>
-    <input id="input-@state-danger-border" type="text" value="darken(spin(@state-danger-bg, -10), 5%)" data-var="@state-danger-border" class="form-control"/>
-  </div>
-</div>
-<h2 id="alerts">Alerts</h2>
-<p>Define alert colors, border radius, and padding.</p>
-<div class="row">
-  <div class="bs-customizer-input">
-    <label for="input-@alert-border-radius">@alert-border-radius</label>
-    <input id="input-@alert-border-radius" type="text" value="@border-radius-base" data-var="@alert-border-radius" class="form-control"/>
-  </div>
-  <div class="bs-customizer-input">
-    <label for="input-@alert-fixed-width">@alert-fixed-width</label>
-    <input id="input-@alert-fixed-width" type="text" value="@screen-md" data-var="@alert-fixed-width" class="form-control"/>
-  </div>
-</div>
-<!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.-->

docs/_includes/footer.html

@@ -1,14 +1,11 @@
 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->
-<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
-<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+<script src="https://code.jquery.com/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 <script src="{{ page.base_url }}dist/js/jasny-bootstrap.min.js"></script>
 
 <script src="http://platform.twitter.com/widgets.js"></script>
 <script src="{{ page.base_url }}assets/js/docs.min.js"></script>
-
-{% if page.slug == "customize" %}
-<script src="../assets/js/customize.min.js"></script>
-{% endif %}
-

docs/_includes/header.html

@@ -13,8 +13,9 @@
 </title>
 
 <!-- Bootstrap core CSS -->
-<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
-<link href="{{ page.base_url }}dist/css/jasny-bootstrap.min.css" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
+<link rel="stylesheet" href="{{ page.base_url }}dist/css/jasny-bootstrap.min.css">
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 
 <!-- Documentation extras -->
 <link href="{{ page.base_url }}assets/css/docs.css" rel="stylesheet">

docs/_includes/nav-components.html

@@ -1,15 +1,43 @@
-<li>
-  <a href="#navmenu">Navmenu</a>
+<li class="nav-item">
+  <a class="nav-link" href="#navmenu">Navmenu</a>
   <ul class="nav">
-    <li><a href="#navmenu-default">Default navmenu</a></li>
-    <li><a href="#navmenu-fixed">Fixed to left or right</a></li>
-    <li><a href="#navmenu-offcanvas">Off canvas</a></li>
-    <li><a href="#navmenu-inverted">Inverted navmenu</a></li>
+    <li class="nav-item"><a class="nav-link" href="#navmenu-default">Default navmenu</a></li>
+    <li class="nav-item"><a class="nav-link" href="#navmenu-fixed">Fixed to left or right</a></li>
+    <li class="nav-item"><a class="nav-link" href="#navmenu-offcanvas">Off canvas</a></li>
+    <li class="nav-item"><a class="nav-link" href="#navmenu-inverted">Inverted navmenu</a></li>
   </ul>
 </li>
-<li>
-  <a href="#alerts">Alerts</a>
+<li class="nav-item">
+  <a class="nav-link" href="#alerts">Alerts</a>
   <ul class="nav">
-    <li><a href="#alerts-fixed">Fixed to top / bottom</a></li>
+    <li class="nav-item"><a class="nav-link" href="#alerts-fixed">Fixed to top / bottom</a></li>
   </ul>
 </li>
+<li class="nav-item">
+  <a class="nav-link" href="#buttons">Buttons</a>
+  <ul class="nav">
+    <li class="nav-item"><a class="nav-link" href="#buttons-labels">Labels</a></li>
+  </ul>
+</li>
+<li class="nav-item">
+  <a class="nav-link" href="#offcanvas">Off canvas</a>
+  <ul class="nav">
+    <li class="nav-item"><a class="nav-link" href="#offcanvas-examples">Examples</a></li>
+    <li class="nav-item"><a class="nav-link" href="#offcanvas-usage">Usage</a></li>
+  </ul>
+</li>
+<li class="nav-item">
+  <a class="nav-link" href="#rowlink">Row link</a>
+  <ul class="nav">
+    <li class="nav-item"><a class="nav-link" href="#rowlink-examples">Examples</a></li>
+    <li class="nav-item"><a class="nav-link" href="#rowlink-usage">Usage</a></li>
+  </ul>
+</li>
+<li class="nav-item">
+  <a class="nav-link" href="#fileinput">File input</a>
+  <ul class="nav">
+    <li class="nav-item"><a class="nav-link" href="#fileinput-examples">Examples</a></li>
+    <li class="nav-item"><a class="nav-link" href="#fileinput-usage">Usage</a></li>
+  </ul>
+</li>
+

docs/_includes/nav-css.html

@@ -1,12 +0,0 @@
-<li>
-  <a href="#overview">Overview</a>
-  <ul class="nav">
-    <li><a href="#overview-container">Containers</a></li>
-  </ul>
-</li>
-<li>
-  <a href="#buttons">Buttons</a>
-  <ul class="nav">
-    <li><a href="#buttons-labels">Labels</a></li>
-  </ul>
-</li>

docs/_includes/nav-customize.html

@@ -1,19 +0,0 @@
-
-<!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-nav.jade template.-->
-<li><a href="#less">Less components</a></li>
-<li><a href="#plugins">jQuery plugins</a></li>
-<li><a href="#less-variables">Less variables</a>
-  <ul class="nav">
-    <li><a href="#components">Components</a></li>
-    <li><a href="#tables">Tables</a></li>
-    <li><a href="#media-queries-breakpoints">Media queries breakpoints</a></li>
-    <li><a href="#grid-system">Grid system</a></li>
-    <li><a href="#navbar">Navbar</a></li>
-    <li><a href="#navmenu">Navmenu</a></li>
-    <li><a href="#navs">Navs</a></li>
-    <li><a href="#form-states-and-alerts">Form states and alerts</a></li>
-    <li><a href="#alerts">Alerts</a></li>
-  </ul>
-</li>
-<li><a href="#download">Download</a></li>
-<!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-nav.jade template.-->

docs/_includes/nav-getting-started.html

@@ -1,26 +1,49 @@
-<li>
-  <a href="#jasny-bootstrap">Jasny Bootstrap</a>
+<li class="nav-item">
+  <a class="nav-link" href="#jasny-bootstrap">Jasny Bootstrap</a>
 </li>
-<li>
-  <a href="#download">Download Jasny Bootstrap</a>
+<li class="nav-item">
+  <a class="nav-link" href="#download">Download Jasny Bootstrap</a>
   <ul class="nav">
-    <li><a href="#download-compiled">Compiled CSS, JS, and fonts</a></li>
-    <li><a href="#download-additional">Additional downloads</a></li>
-    <li><a href="#download-cdn">Bootstrap CDN</a></li>
+    <li class="nav-item"><a class="nav-link" href="#download-compiled">Compiled CSS, JS, and fonts</a></li>
+    <li class="nav-item"><a class="nav-link" href="#download-additional">Additional downloads</a></li>
+    <li class="nav-item"><a class="nav-link" href="#download-cdn">Bootstrap CDN</a></li>
   </ul>
 </li>
-<li>
-  <a href="#whats-included">What's included</a>
+<li class="nav-item">
+  <a class="nav-link" href="#whats-included">What's included</a>
 </li>
-<li>
-  <a href="#examples">Examples</a>
+<li class="nav-item">
+  <a class="nav-link" href="#template">Basic template</a>
 </li>
-<li>
-  <a href="#migration">Migrating from 2.x to 3.0</a>
+<li class="nav-item">
+  <a class="nav-link" href="#js-overview">Plugins</a>
   <ul class="nav">
-    <li><a href="#migration-classes">Major class changes</a></li>
-    <li><a href="#migration-new">What's new</a></li>
-    <li><a href="#migration-dropped">What's removed</a></li>
-    <li><a href="#migration-notes">Additional notes</a></li>
+    <li class="nav-item"><a class="nav-link" href="#js-individual-compiled">Individual or compiled</a></li>
+    <li class="nav-item"><a class="nav-link" href="#js-data-attrs">Data attributes</a></li>
+    <li class="nav-item"><a class="nav-link" href="#js-programmatic-api">Programmatic API</a></li>
+    <li class="nav-item"><a class="nav-link" href="#js-noconflict">No conflict</a></li>
+    <li class="nav-item"><a class="nav-link" href="#js-events">Events</a></li>
+  </ul>
+</li>
+<li class="nav-item">
+  <a class="nav-link" href="#containers">Containers</a>
+</li>
+<li class="nav-item">
+  <a class="nav-link" href="#examples">Examples</a>
+</li>
+<li class="nav-item">
+  <a class="nav-link" href="#migration-v4">Migrating from 3.x to 4.0</a>
+  <ul class="nav">
+    <li class="nav-item"><a class="nav-link" href="#migration-classes-v4">Major class changes</a></li>
+    <li class="nav-item"><a class="nav-link" href="#migration-dropped-v4">What's removed</a></li>
+  </ul>
+</li>
+<li class="nav-item">
+  <a class="nav-link" href="#migration-v3">Migrating from 2.x to 3.0</a>
+  <ul class="nav">
+    <li class="nav-item"><a class="nav-link" href="#migration-classes-v3">Major class changes</a></li>
+    <li class="nav-item"><a class="nav-link" href="#migration-new-v3">What's new</a></li>
+    <li class="nav-item"><a class="nav-link" href="#migration-dropped-v3">What's removed</a></li>
+    <li class="nav-item"><a class="nav-link" href="#migration-notes-v3">Additional notes</a></li>
   </ul>
 </li>

docs/_includes/nav-javascript.html

@@ -1,38 +0,0 @@
-<li>
-  <a href="#js-overview">Overview</a>
-  <ul class="nav">
-    <li><a href="#js-individual-compiled">Individual or compiled</a></li>
-    <li><a href="#js-data-attrs">Data attributes</a></li>
-    <li><a href="#js-programmatic-api">Programmatic API</a></li>
-    <li><a href="#js-noconflict">No conflict</a></li>
-    <li><a href="#js-events">Events</a></li>
-  </ul>
-</li>
-<li>
-  <a href="#offcanvas">Off canvas</a>
-  <ul class="nav">
-    <li><a href="#offcanvas-examples">Examples</a></li>
-    <li><a href="#offcanvas-usage">Usage</a></li>
-  </ul>
-</li>
-<li>
-  <a href="#rowlink">Row link</a>
-  <ul class="nav">
-    <li><a href="#rowlink-examples">Examples</a></li>
-    <li><a href="#rowlink-usage">Usage</a></li>
-  </ul>
-</li>
-<li>
-  <a href="#inputmask">Input mask</a>
-  <ul class="nav">
-    <li><a href="#inputmask-examples">Examples</a></li>
-    <li><a href="#inputmask-usage">Usage</a></li>
-  </ul>
-</li>
-<li>
-  <a href="#fileinput">File input</a>
-  <ul class="nav">
-    <li><a href="#fileinput-examples">Examples</a></li>
-    <li><a href="#fileinput-usage">Usage</a></li>
-  </ul>
-</li>

docs/_includes/nav-main.html

@@ -1,33 +1,22 @@
-<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
+<header class="navbar navbar-dark navbar-expand-lg navbar-inverse fixed-top bs-docs-nav" role="banner">
   <div class="container">
     <div class="navbar-header">
-      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
       <a href="{{ page.base_url }}" class="navbar-brand">Jasny Bootstrap</a>
     </div>
-    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavmenu">
+      <span class="sr-only">Toggle navigation</span>
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <nav class="collapse navbar-collapse" role="navigation" id="mainNavmenu">
       <ul class="nav navbar-nav">
-        <li{% if page.slug == "getting-started" %} class="active"{% endif %}>
-          <a href="{{ page.base_url }}getting-started">Getting started</a>
+        <li class="nav-item {% if page.slug == 'getting-started' %}active{% endif %}">
+          <a class="nav-link" href="{{ page.base_url }}getting-started">Getting started</a>
         </li>
-        <li{% if page.slug == "css" %} class="active"{% endif %}>
-          <a href="{{ page.base_url }}css">CSS</a>
-        </li>
-        <li{% if page.slug == "components" %} class="active"{% endif %}>
-          <a href="{{ page.base_url }}components">Components</a>
-        </li>
-        <li{% if page.slug == "js" %} class="active"{% endif %}>
-          <a href="{{ page.base_url }}javascript">JavaScript</a>
-        </li>
-        <li{% if page.slug == "customize" %} class="active"{% endif %}>
-          <a href="{{ page.base_url }}customize">Customize</a>
+        <li class="nav-item {% if page.slug == 'components' %}active{% endif %}">
+          <a class="nav-link" href="{{ page.base_url }}components">Components</a>
         </li>
       </ul>
-      <ul class="nav navbar-nav navbar-right">
+      <ul class="nav navbar-nav ml-auto">
         <li>
           <a href="http://www.jasny.net"><span class="hidden-sm">More by</span> Jasny</a>
         </li>

docs/_layouts/default.html

@@ -4,11 +4,11 @@
     <!-- Meta, title, CSS, favicons, etc. -->
     {% include header.html %}
   </head>
-  <body class="{% if page.slug == "customize" %}bs-twbs-show{% endif %}">
+  <body>
     <script type="text/javascript">
       if (localStorage && localStorage.hide_twbs === 'no') document.body.setAttribute('class', 'bs-twbs-show')
     </script>
-    
+
     <a class="sr-only" href="#content">Skip to main content</a>
 
     <!-- Docs master nav -->
@@ -27,17 +27,11 @@
       <div class="row">
         <div class="col-md-3">
           <div class="bs-sidebar hidden-print" role="complementary">
-            <ul class="nav bs-sidenav">
+            <ul class="nav bs-sidenav flex-column">
               {% if page.slug == "getting-started" %}
                 {% include nav-getting-started.html %}
-              {% elsif page.slug == "css" %}
-                {% include nav-css.html %}
               {% elsif page.slug == "components" %}
                 {% include nav-components.html %}
-              {% elsif page.slug == "js" %}
-                {% include nav-javascript.html %}
-              {% elsif page.slug == "customize" %}
-                {% include nav-customize.html %}
               {% elsif page.slug == "about" %}
                 {% include nav-about.html %}
               {% endif %}

docs/_layouts/home.html

@@ -23,7 +23,10 @@
           Currently v{{ site.current_version }}
         </li>
         <li>
-          <a href="{{ page.base_url }}2.3.1/">Bootstrap 2.3.1 docs</a>
+          <a href="{{ page.base_url }}3.2.0/">v3.2.0 docs</a>
+        </li>
+        <li>
+          <a href="{{ page.base_url }}2.3.1/">v2.3.1 docs</a>
         </li>
         <li>
           <a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>

docs/assets/css/docs.css

@@ -127,13 +127,13 @@ span.hidden-sm {
   background-color: #6B313B;
   background-color: rgba(255, 255, 255, 0.15);
 }
-.bs-docs-nav .navbar-toggle,
-.bs-docs-nav .navbar-toggle:focus {
+.bs-docs-nav .navbar-toggler,
+.bs-docs-nav .navbar-toggler:focus {
   border-color: #86555C;
   border-color: rgba(255, 255, 255, 0.3);
   background: transparent;
 }
-.bs-docs-nav .navbar-toggle:hover {
+.bs-docs-nav .navbar-toggler:hover {
   background-color: #63303A;
   background-color: rgba(255, 255, 255, 0.15);
   border-color: transparent;
@@ -580,14 +580,17 @@ span.hidden-sm {
  */
 
 /* By default it's not affixed in mobile views, so undo that */
+.bs-sidebar {
+  margin-top: 30px;
+  margin-bottom: 30px;
+}
+
 .bs-sidebar.affix {
   position: static;
 }
 
 /* First level of nav */
 .bs-sidenav {
-  margin-top: 30px;
-  margin-bottom: 30px;
   padding-top:    10px;
   padding-bottom: 10px;
   text-shadow: 0 1px 0 #fff;
@@ -607,9 +610,9 @@ span.hidden-sm {
   background-color: #e5e3e9;
   border-right: 1px solid #dbd8e0;
 }
-.bs-sidebar .nav > .active > a,
-.bs-sidebar .nav > .active:hover > a,
-.bs-sidebar .nav > .active:focus > a {
+.bs-sidebar .nav > li > a.active,
+.bs-sidebar .nav > li > a.active:hover,
+.bs-sidebar .nav > li > a.active:focus {
   font-weight: bold;
   color: #563d7c;
   background-color: transparent;
@@ -630,7 +633,7 @@ span.hidden-sm {
 
 /* Show and affix the side nav when space allows it */
 @media (min-width: 992px) {
-  .bs-sidebar .nav > .active > ul {
+  .bs-sidebar .nav > li > .active + ul {
     display: block;
   }
   /* Widen the fixed sidebar */
@@ -933,8 +936,8 @@ h2[id], h3[id] {
 .bs-navbar-bottom-example .navbar-header {
   margin-left: 0;
 }
-.bs-navbar-top-example .navbar-fixed-top,
-.bs-navbar-bottom-example .navbar-fixed-bottom {
+.bs-navbar-top-example .navbar.fixed-top,
+.bs-navbar-bottom-example .navbar.fixed-bottom {
   position: relative;
   margin-left: 0;
   margin-right: 0;
@@ -946,21 +949,21 @@ h2[id], h3[id] {
   top: auto;
   bottom: 15px;
 }
-.bs-navbar-top-example .navbar-fixed-top {
+.bs-navbar-top-example .navbar.fixed-top {
   top: -1px;
 }
 .bs-navbar-bottom-example {
   padding-top: 45px;
 }
-.bs-navbar-bottom-example .navbar-fixed-bottom {
+.bs-navbar-bottom-example .navbar.fixed-bottom {
   bottom: -1px;
 }
 .bs-navbar-bottom-example .navbar {
   margin-bottom: 0;
 }
 @media (min-width: 768px) {
-  .bs-navbar-top-example .navbar-fixed-top,
-  .bs-navbar-bottom-example .navbar-fixed-bottom {
+  .bs-navbar-top-example .navbar.fixed-top,
+  .bs-navbar-bottom-example .navbar.fixed-bottom {
     position: absolute;
   }
   .bs-navbar-top-example {
@@ -999,15 +1002,15 @@ h2[id], h3[id] {
 }
 .bs-navmenu-fixed-example .navmenu-fixed-left,
 .bs-navmenu-offcanvas-example .navmenu-fixed-left,
-.bs-navmenu-offcanvas-example .navbar-fixed-top {
+.bs-navmenu-offcanvas-example .navbar.fixed-top {
   position: absolute;
   z-index: 1;
 }
 .bs-navmenu-offcanvas-example .navmenu-fixed-left {
-  -webkit-transform: translate(-300px, 0);  
+  -webkit-transform: translate(-300px, 0);
   transform: translate(-300px, 0);
 }
-.bs-navmenu-offcanvas-example .navbar-toggle {
+.bs-navmenu-offcanvas-example .navbar-toggler {
   float: left;
   margin-left: 15px;
   display: block;
@@ -1122,7 +1125,9 @@ h2[id], h3[id] {
   margin-bottom: 0;
   background-color: transparent;
   border: 0;
-  white-space: nowrap;
+  white-space: pre-wrap;
+  word-break: break-all;
+  word-wrap: break-word;
 }
 .highlight pre code {
   font-size: inherit;
@@ -1218,99 +1223,6 @@ h2[id], h3[id] {
 }
 
 
-/*
- * Customizer
- *
- * Since this is so form control heavy, we have quite a few styles to customize
- * the display of inputs, headings, and more. Also included are all the download
- * buttons and actions.
- */
-
-.bs-customizer .toggle {
-  float: right;
-  margin-top: 80px;
-}
-
-/* Headings and form contrls */
-.bs-customizer label {
-  margin-top: 10px;
-  font-weight: 500;
-  color: #555;
-}
-.bs-customizer h2 {
-  margin-top: 0;
-  margin-bottom: 5px;
-  padding-top: 30px;
-}
-.bs-customizer h3 {
-  margin-bottom: 0;
-}
-.bs-customizer h4 {
-  margin-top: 15px;
-  margin-bottom: 0;
-}
-.bs-customizer .bs-callout h4 {
-  margin-top: 0; /* lame, but due to specificity we have to duplicate */
-  margin-bottom: 5px;
-}
-.bs-customizer input[type="text"] {
-  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-  background-color: #fafafa;
-}
-.bs-customizer .help-block {
-  font-size: 12px;
-  margin-bottom: 5px;
-}
-
-/* For the variables, use regular weight */
-#less-section label {
-  font-weight: normal;
-}
-
-.bs-customizer-input {
-  float: left;
-  width: 33.333333%;
-  padding-left: 15px;
-  padding-right: 15px;
-}
-
-/* Downloads */
-.bs-customize-download .btn-outline {
-  padding: 20px;
-}
-
-/* Error handling */
-.bs-customizer-alert {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1030;
-  padding: 15px 0;
-  color: #fff;
-  background-color: #d9534f;
-  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
-  border-bottom: 1px solid #b94441;
-}
-.bs-customizer-alert .close {
-  margin-top: -4px;
-  font-size: 24px;
-}
-.bs-customizer-alert p {
-  margin-bottom: 0;
-}
-.bs-customizer-alert .glyphicon {
-  margin-right: 5px;
-}
-.bs-customizer-alert pre {
-  margin: 10px 0 0;
-  color: #fff;
-  background-color: #a83c3a;
-  border-color: #973634;
-  box-shadow: inset 0 2px 4px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
-}
-
-
 /*
  * Miscellaneous
  *
@@ -1345,3 +1257,8 @@ h2[id], h3[id] {
   margin-top: 15px;
   margin-bottom: 5px;
 }
+
+a.thumbnail {
+  display: block;
+  margin-bottom: 10px;
+}

docs/assets/js/application.js

@@ -48,29 +48,10 @@
       e.preventDefault()
     })
 
-    // back to top
-    setTimeout(function () {
-      var $sideBar = $('.bs-sidebar')
-
-      $sideBar.affix({
-        offset: {
-          top: function () {
-            var offsetTop      = $sideBar.offset().top
-            var sideBarMargin  = parseInt($sideBar.children(0).css('margin-top'), 10)
-            var navOuterHeight = $('.bs-docs-nav').height()
-
-            return (this.top = offsetTop - navOuterHeight - sideBarMargin)
-          },
-          bottom: function () {
-            return (this.bottom = $('.bs-footer').outerHeight(true))
-          }
-        }
-      })
-    }, 100)
-
-    setTimeout(function () {
-      $('.bs-top').affix()
-    }, 100)
+    $('.bs-sidebar').stick_in_parent({
+      offset_top: 56,
+      spacer: false
+    });
   })
 
 }(jQuery)

docs/assets/js/customizer.js

@@ -1,341 +0,0 @@
-/*!
- * Bootstrap Customizer (http://getbootstrap.com/customize/)
- * Copyright 2011-2014 Twitter, Inc.
- *
- * Licensed under the Creative Commons Attribution 3.0 Unported License. For
- * details, see http://creativecommons.org/licenses/by/3.0/.
- */
-
-window.onload = function () { // wait for load in a dumb way because B-0
-  var cw = '/*!\n' +
-           ' * Jasny Bootstrap v3.1.0 (http://jasny.github.com/bootstrap)\n' +
-           ' * Copyright 2011-2014 Arnold Daniels.\n' +
-           ' * Licensed under Apache-2.0 (https://github.com/jasny/bootstrap/blob/master/LICENSE)\n' +
-           ' */\n\n'
-
-  function showError(msg, err) {
-    $('<div id="bsCustomizerAlert" class="bs-customizer-alert">' +
-        '<div class="container">' +
-          '<a href="#bsCustomizerAlert" data-dismiss="alert" class="close pull-right">&times;</a>' +
-          '<p class="bs-customizer-alert-text"><span class="glyphicon glyphicon-warning-sign"></span>' + msg + '</p>' +
-          (err.extract ? '<pre class="bs-customizer-alert-extract">' + err.extract.join('\n') + '</pre>' : '') +
-        '</div>' +
-      '</div>').appendTo('body').alert()
-    throw err
-  }
-
-  function showCallout(msg, showUpTop) {
-    var callout = $('<div class="bs-callout bs-callout-danger">' +
-       '<h4>Attention!</h4>' +
-      '<p>' + msg + '</p>' +
-    '</div>')
-
-    if (showUpTop) {
-      callout.appendTo('.bs-docs-container')
-    } else {
-      callout.insertAfter('.bs-customize-download')
-    }
-  }
-
-  function getQueryParam(key) {
-    key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, '\\$&') // escape RegEx meta chars
-    var match = location.search.match(new RegExp('[?&]' + key + '=([^&]+)(&|$)'))
-    return match && decodeURIComponent(match[1].replace(/\+/g, ' '))
-  }
-
-  function createGist(configJson) {
-    var data = {
-      'description': 'Bootstrap Customizer Config',
-      'public': true,
-      'files': {
-        'config.json': {
-          'content': configJson
-        }
-      }
-    }
-    $.ajax({
-      url: 'https://api.github.com/gists',
-      type: 'POST',
-      dataType: 'json',
-      data: JSON.stringify(data)
-    })
-    .success(function (result) {
-      var origin = window.location.protocol + '//' + window.location.host
-      history.replaceState(false, document.title, origin + window.location.pathname + '?id=' + result.id)
-    })
-    .error(function (err) {
-      showError('<strong>Ruh roh!</strong> Could not save gist file, configuration not saved.', err)
-    })
-  }
-
-  function getCustomizerData() {
-    var vars = {}
-
-    $('#less-variables-section input')
-        .each(function () {
-          $(this).val() && (vars[$(this).prev().text()] = $(this).val())
-        })
-
-    var data = {
-      vars: vars,
-      css: $('#less-section input:checked')  .map(function () { return this.value }).toArray(),
-      js:  $('#plugin-section input:checked').map(function () { return this.value }).toArray()
-    }
-
-    if ($.isEmptyObject(data.vars) && !data.css.length && !data.js.length) return
-
-    return data
-  }
-
-  function parseUrl() {
-    var id = getQueryParam('id')
-
-    if (!id) return
-
-    $.ajax({
-      url: 'https://api.github.com/gists/' + id,
-      type: 'GET',
-      dataType: 'json'
-    })
-    .success(function (result) {
-      var data = JSON.parse(result.files['config.json'].content)
-      if (data.js) {
-        $('#plugin-section input').each(function () {
-          $(this).prop('checked', ~$.inArray(this.value, data.js))
-        })
-      }
-      if (data.css) {
-        $('#less-section input').each(function () {
-          $(this).prop('checked', ~$.inArray(this.value, data.css))
-        })
-      }
-      if (data.vars) {
-        for (var i in data.vars) {
-          $('input[data-var="' + i + '"]').val(data.vars[i])
-        }
-      }
-    })
-    .error(function (err) {
-      showError('Error fetching bootstrap config file', err)
-    })
-  }
-
-  function generateZip(css, js, fonts, config, complete) {
-    if (!css && !js) return showError('<strong>Ruh roh!</strong> No Bootstrap files selected.', new Error('no Bootstrap'))
-
-    var zip = new JSZip()
-
-    if (css) {
-      var cssFolder = zip.folder('css')
-      for (var fileName in css) {
-        cssFolder.file(fileName, css[fileName])
-      }
-    }
-
-    if (js) {
-      var jsFolder = zip.folder('js')
-      for (var jsFileName in js) {
-        jsFolder.file(jsFileName, js[jsFileName])
-      }
-    }
-
-    if (fonts) {
-      var fontsFolder = zip.folder('fonts')
-      for (var fontsFileName in fonts) {
-        fontsFolder.file(fontsFileName, fonts[fontsFileName], {base64: true})
-      }
-    }
-
-    if (config) {
-      zip.file('config.json', config)
-    }
-
-    var content = zip.generate({ type: 'blob' })
-
-    complete(content)
-  }
-
-  function generateCustomCSS(vars) {
-    var result = ''
-
-    for (var key in vars) {
-      result += key + ': ' + vars[key] + ';\n'
-    }
-
-    return result + '\n\n'
-  }
-
-  function generateFonts() {
-    return false;
-  }
-
-  // Returns an Array of @import'd filenames in the order
-  // in which they appear in the file.
-  function includedLessFilenames(lessFilename) {
-    var IMPORT_REGEX = /^@import \"(.*?)\";$/
-    var lessLines = __less[lessFilename].split('\n')
-
-    for (var i = 0, imports = []; i < lessLines.length; i++) {
-      var match = IMPORT_REGEX.exec(lessLines[i])
-      if (match) imports.push(match[1])
-    }
-
-    return imports
-  }
-
-  function generateLESS(lessFilename, lessFileIncludes, vars, additionalLessFiles) {
-    var lessSource = __less[lessFilename]
-
-    // Additional imports files, not present in less file, but required to build
-    $.each(additionalLessFiles || [], function(index, filename) {
-      lessSource += __less[filename]
-    })
-
-    $.each(includedLessFilenames(lessFilename), function(index, filename) {
-      var fileInclude = lessFileIncludes[filename]
-
-      // Files not explicitly unchecked are compiled into the final stylesheet.
-      // Core stylesheets like 'normalize.less' are not included in the form
-      // since disabling them would wreck everything, and so their 'fileInclude'
-      // will be 'undefined'.
-      if (fileInclude || (fileInclude == null))    lessSource += __less[filename]
-
-      // Custom variables are added after Bootstrap variables so the custom
-      // ones take precedence.
-      if (('variables.less' === filename) && vars) lessSource += generateCustomCSS(vars)
-    })
-
-    lessSource = lessSource.replace(/@import[^\n]*/gi, '') //strip any imports
-    return lessSource
-  }
-
-  function compileLESS(lessSource, baseFilename, intoResult) {
-    var parser = new less.Parser({
-        optimization: 0,
-        filename: baseFilename + '.css'
-    }).parse(lessSource, function (err, tree) {
-      if (err) {
-        return showError('<strong>Ruh roh!</strong> Could not parse less files.', err)
-      }
-      intoResult[baseFilename + '.css']     = cw + tree.toCSS()
-      intoResult[baseFilename + '.min.css'] = cw + tree.toCSS({ compress: true })
-    })
-  }
-
-  function generateCSS() {
-    var oneChecked = false
-    var lessFileIncludes = {}
-    $('#less-section input').each(function() {
-      var $this = $(this)
-      var checked = $this.is(':checked')
-      lessFileIncludes[$this.val()] = checked
-
-      oneChecked = oneChecked || checked
-    })
-
-    if (!oneChecked) return false
-
-    var result = {}
-    var vars = {}
-
-    $('#less-variables-section input')
-        .each(function () {
-          $(this).val() && (vars[$(this).prev().text()] = $(this).val())
-        })
-
-    var bsLessSource    = generateLESS('jasny-bootstrap.less', lessFileIncludes, vars,
-        ['build/variables.less', 'build/mixins.less'])
-
-    try {
-      compileLESS(bsLessSource, 'jasny-bootstrap', result)
-    } catch (err) {
-      return showError('<strong>Ruh roh!</strong> Could not parse less files.', err)
-    }
-
-    return result
-  }
-
-  function generateJavascript() {
-    var $checked = $('#plugin-section input:checked')
-    if (!$checked.length) return false
-
-    var js = $checked
-      .map(function () { return __js[this.value] })
-      .toArray()
-      .join('\n')
-
-    return {
-      'jasny-bootstrap.js': js,
-      'jasny-bootstrap.min.js': cw + uglify(js)
-    }
-  }
-
-  var inputsComponent = $('#less-section input')
-  var inputsPlugin    = $('#plugin-section input')
-  var inputsVariables = $('#less-variables-section input')
-
-  $('#less-section .toggle').on('click', function (e) {
-    e.preventDefault()
-    inputsComponent.prop('checked', !inputsComponent.is(':checked'))
-  })
-
-  $('#plugin-section .toggle').on('click', function (e) {
-    e.preventDefault()
-    inputsPlugin.prop('checked', !inputsPlugin.is(':checked'))
-  })
-
-  $('[data-dependencies]').on('click', function () {
-    if (!$(this).is(':checked')) return
-    var dependencies = this.getAttribute('data-dependencies')
-    if (!dependencies) return
-    dependencies = dependencies.split(',')
-    for (var i = 0; i < dependencies.length; i++) {
-      var dependency = $('[value="' + dependencies[i] + '"]')
-      dependency && dependency.prop('checked', true)
-    }
-  })
-
-  $('[data-dependents]').on('click', function () {
-    if ($(this).is(':checked')) return
-    var dependents = this.getAttribute('data-dependents')
-    if (!dependents) return
-    dependents = dependents.split(',')
-    for (var i = 0; i < dependents.length; i++) {
-      var dependent = $('[value="' + dependents[i] + '"]')
-      dependent && dependent.prop('checked', false)
-    }
-  })
-
-  var $compileBtn = $('#btn-compile')
-  var $downloadBtn = $('#btn-download')
-
-  $compileBtn.on('click', function (e) {
-    var configData = getCustomizerData()
-    var configJson = JSON.stringify(configData, null, 2)
-
-    e.preventDefault()
-
-    $compileBtn.attr('disabled', 'disabled')
-
-    generateZip(generateCSS(), generateJavascript(), generateFonts(), configJson, function (blob) {
-      $compileBtn.removeAttr('disabled')
-      saveAs(blob, 'jasny-bootstrap.zip')
-      createGist(configJson)
-    })
-  })
-
-  // browser support alerts
-  if (!window.URL && navigator.userAgent.toLowerCase().indexOf('safari') != -1) {
-    showCallout('Looks like you\'re using safari, which sadly doesn\'t have the best support' +
-                 'for HTML5 blobs. Because of this your file will be downloaded with the name <code>"untitled"</code>.' +
-                 'However, if you check your downloads folder, just rename this <code>"untitled"</code> file' +
-                 'to <code>"jasny-bootstrap.zip"</code> and you should be good to go!')
-  } else if (!window.URL && !window.webkitURL) {
-    $('.bs-docs-section, .bs-docs-sidebar').css('display', 'none')
-
-    showCallout('Looks like your current browser doesn\'t support the Bootstrap Customizer. Please take a second' +
-                 'to <a href="https://www.google.com/intl/en/chrome/browser/">upgrade to a more modern browser</a>.', true)
-  }
-
-  parseUrl()
-}

docs/components.html

@@ -10,7 +10,7 @@ base_url: "../"
   <!-- Navmenu
   ================================================== -->
   <div class="bs-docs-section">
-    <div class="page-header">
+    <div class="pb-2 mt-4 mb-2 border-bottom">
       <h1 id="navmenu">Navmenu</h1>
     </div>
     <p>Navmenu is a vertical navigation component. By default it shares it look and feel with the navmenu component.</p>
@@ -26,17 +26,17 @@ base_url: "../"
       <nav class="navmenu navmenu-default" role="navigation">
         <a class="navmenu-brand" href="#">Brand</a>
 
-        <ul class="nav navmenu-nav">
-          <li class="active"><a href="#">Link</a></li>
-          <li><a href="#">Link</a></li>
-          <li class="dropdown">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+        <ul class="nav navmenu-nav flex-column">
+          <li class="nav-item active"><a class="nav-link" href="#">Link</a></li>
+          <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
+          <li class="nav-item dropdown">
+            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
             <ul class="dropdown-menu navmenu-nav" role="menu">
-              <li><a href="#">Action</a></li>
-              <li><a href="#">Another action</a></li>
-              <li><a href="#">Something else here</a></li>
-              <li><a href="#">Separated link</a></li>
-              <li><a href="#">One more separated link</a></li>
+              <li class="nav-item"><a class="nav-link" href="#">Action</a></li>
+              <li class="nav-item"><a class="nav-link" href="#">Another action</a></li>
+              <li class="nav-item"><a class="nav-link" href="#">Something else here</a></li>
+              <li class="nav-item"><a class="nav-link" href="#">Separated link</a></li>
+              <li class="nav-item"><a class="nav-link" href="#">One more separated link</a></li>
             </ul>
           </li>
         </ul>
@@ -46,17 +46,17 @@ base_url: "../"
 <nav class="navmenu navmenu-default" role="navigation">
   <a class="navmenu-brand" href="#">Brand</a>
 
-  <ul class="nav navmenu-nav">
-    <li class="active"><a href="#">Link</a></li>
-    <li><a href="#">Link</a></li>
-    <li class="dropdown">
-      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+  <ul class="nav navmenu-nav flex-column">
+    <li class="nav-item active"><a class="nav-link" href="#">Link</a></li>
+    <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
+    <li class="nav-item dropdown">
+      <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
       <ul class="dropdown-menu navmenu-nav" role="menu">
-        <li><a href="#">Action</a></li>
-        <li><a href="#">Another action</a></li>
-        <li><a href="#">Something else here</a></li>
-        <li><a href="#">Separated link</a></li>
-        <li><a href="#">One more separated link</a></li>
+        <li class="nav-item"><a class="nav-link" href="#">Action</a></li>
+        <li class="nav-item"><a class="nav-link" href="#">Another action</a></li>
+        <li class="nav-item"><a class="nav-link" href="#">Something else here</a></li>
+        <li class="nav-item"><a class="nav-link" href="#">Separated link</a></li>
+        <li class="nav-item"><a class="nav-link" href="#">One more separated link</a></li>
       </ul>
     </li>
   </ul>
@@ -74,10 +74,10 @@ base_url: "../"
     <div class="bs-example bs-navmenu-fixed-example">
       <nav class="navmenu navmenu-default navmenu-fixed-left" role="navigation">
         <a class="navmenu-brand" href="#">Brand</a>
-        <ul class="nav navmenu-nav">
-          <li class="active"><a href="#">Home</a></li>
-          <li><a href="#">Link</a></li>
-          <li><a href="#">Link</a></li>
+        <ul class="nav navmenu-nav list-group">
+          <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
+          <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
+          <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
         </ul>
       </nav>
     </div><!-- /example -->
@@ -102,54 +102,58 @@ base_url: "../"
 
 
     <h2 id="navmenu-offcanvas">Off canvas</h2>
-    <p>With the <a href="../javascript/#offcanvas">offcanvas plugin</a>, you can hide the navmenu off canvas. This is especially useful for screens with a small viewport.</p>
+    <p>With the <a href="../components/#offcanvas">offcanvas plugin</a>, you can hide the navmenu off canvas. This is especially useful for screens with a small viewport.</p>
+
     <div class="bs-example bs-navmenu-offcanvas-example">
       <div id="myNavmenuCanvas">
+
         <nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
           <a class="navmenu-brand" href="#">Brand</a>
-          <ul class="nav navmenu-nav">
-            <li class="active"><a href="#">Home</a></li>
-            <li><a href="#">Link</a></li>
-            <li><a href="#">Link</a></li>
+
+          <ul class="nav navmenu-nav list-group">
+            <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
           </ul>
         </nav>
-        <div class="navbar navbar-default navbar-fixed-top">
-          <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="#myNavmenuCanvas" data-placement="left">
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
+
+        <header class="navbar navbar-light bg-light fixed-top">
+          <button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="#myNavmenuCanvas" data-placement="left">
+            <span class="navbar-toggler-icon"></span>
           </button>
-        </div>
+        </header>
+
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.</p>
       </div>
     </div><!-- /example -->
+
 {% highlight html %}
 <nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
 ...
 </nav>
-<div class="navbar navbar-default navbar-fixed-top">
-  <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
-    <span class="icon-bar"></span>
-    <span class="icon-bar"></span>
-    <span class="icon-bar"></span>
+
+<header class="navbar navbar-light bg-light fixed-top">
+  <button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
+    <span class="navbar-toggler-icon"></span>
   </button>
-</div>
+</header>
 {% endhighlight %}
 
     <div class="bs-callout bs-callout-info">
       <h4>Examples</h4>
       <p>There is a full example for an <a href="../examples/navmenu-push/">off canvas push menu</a> as well as examples for an off canvas navmenu with an <a href="../examples/navmenu/">slide in</a> and <a href="../examples/navmenu-reveal/">reveal</a> effect.</p>
     </div>
-    
+
     <h2 id="navmenu-inverted">Inverted navmenu</h2>
     <p>Modify the look of the navmenu by adding <code>.navmenu-inverse</code>.</p>
+
     <div class="bs-example">
       <nav class="navmenu navmenu-inverse" role="navigation">
         <a class="navmenu-brand" href="#">Brand</a>
-        <ul class="nav navmenu-nav">
-          <li class="active"><a href="#">Home</a></li>
-          <li><a href="#">Link</a></li>
-          <li><a href="#">Link</a></li>
+        <ul class="nav navmenu-nav list-group">
+          <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
+          <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
+          <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
         </ul>
       </nav>
     </div><!-- /example -->
@@ -165,7 +169,7 @@ base_url: "../"
   <!-- Alerts
   ================================================== -->
   <div class="bs-docs-section">
-    <div class="page-header">
+    <div class="pb-2 mt-4 mb-2 border-bottom">
       <h1 id="alerts">Alerts</h1>
     </div>
 
@@ -183,3 +187,563 @@ base_url: "../"
 {% endhighlight %}
 
   </div>
+
+    <!-- Buttons
+  ================================================== -->
+  <div class="bs-docs-section">
+    <div class="pb-2 mt-4 mb-2 border-bottom">
+      <h1 id="buttons">Buttons</h1>
+    </div>
+
+    <div>
+      <h2 id="buttons-labels">Labels</h2>
+      <p>Give a button some extra style by adding a label. Add <code>.btn-labeled</code> to any button with a label.</p>
+      <div class="bs-example">
+        <button type="button" class="btn btn-labeled btn-secondary"><span class="btn-label"><i class="fa fa-arrow-left"></i></span>Left</button>
+        <button type="button" class="btn btn-labeled btn-secondary">Right<span class="btn-label btn-label-right"><i class="fa fa-arrow-right"></i></span></button>
+        <button type="button" class="btn btn-labeled btn-success"><span class="btn-label"><i class="fa fa-check"></i></span>Success</button>
+        <button type="button" class="btn btn-labeled btn-danger"><span class="btn-label"><i class="fa fa-times"></i></span>Danger</button>
+      </div>
+{% highlight html %}
+<!-- Standard button with label -->
+<button type="button" class="btn btn-labeled btn-secondary"><span class="btn-label"><i class="fa fa-arrow-left"></i></span>Left</button>
+
+<!-- Standard button with label on the right side -->
+<button type="button" class="btn btn-labeled btn-secondary">Right<span class="btn-label btn-label-right"><i class="fa fa-arrow-right"></i></span></button>
+
+<!-- Success button with label -->
+<button type="button" class="btn btn-labeled btn-success"><span class="btn-label"><i class="fa fa-check"></i></span>Success</button>
+
+<!-- Danger button with label -->
+<button type="button" class="btn btn-labeled btn-danger"><span class="btn-label"><i class="fa fa-times"></i></span>Danger</button>
+{% endhighlight %}
+    </div>
+  </div>
+
+
+
+  <!-- Off canvas
+  ================================================== -->
+  <div class="bs-docs-section">
+    <div class="pb-2 mt-4 mb-2 border-bottom">
+      <h1 id="offcanvas">Off canvas <small>offcanvas.js</small></h1>
+    </div>
+
+    <h2 id="offcanvas-examples">Example</h2>
+    <p>The offcanvas plugin allows you to hide an element from sight and than show it by moving either that or any other element. It's intended to be used for off canvas navigation, like push menus.</p>
+
+    <div class="bs-example bs-navmenu-offcanvas-example">
+      <div id="myNavmenuCanvas2">
+
+        <nav id="myNavmenu2" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
+          <a class="navmenu-brand" href="#">Brand</a>
+
+          <ul class="nav navmenu-nav flex-column">
+            <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
+          </ul>
+        </nav>
+
+        <header class="navbar navbar-light bg-light fixed-top">
+          <button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target="#myNavmenu2" data-canvas="#myNavmenuCanvas2" data-placement="left">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+        </header>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.</p>
+      </div>
+    </div><!-- /example -->
+
+{% highlight html %}
+<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
+  <a class="navmenu-brand" href="#">Brand</a>
+
+  <ul class="nav navmenu-nav flex-column">
+    <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
+    <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
+    <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
+  </ul>
+</nav>
+
+<header class="navbar navbar-light bg-light fixed-top">
+  <button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+</header>
+{% endhighlight %}
+
+    <div class="bs-callout bs-callout-info">
+      <h4>Examples</h4>
+      <p>For better understanding, have a look at the <a href="../examples/navmenu/">off canvas slide in menu</a>, <a href="../examples/navmenu-push/">off canvas push menu</a> and <a href="../examples/navmenu-reveal/">off canvas reveal menu</a> examples.</p>
+    </div>
+
+    <hr class="bs-docs-separator">
+
+    <h2 id="offcanvas-usage">Usage</h2>
+    <p>Add <code>.offcanvas</code> to hide an element. Alternatively add <code>.offcanvas-*</code> to hide an element up to a specific viewport width. Adding the <code>.offcanvas</code> class is not required. You may also hide an element by any other means.</p>
+    <p>The effect works best for elements positioned to the top, bottom, left or right of the window, either with absolute or fixed positioning.</p>
+    <p>When shown, the plugin adds <code>.canvas-slid</code> to the element that has slid.</p>
+
+    <h3>Via data attributes</h3>
+    <p>Add <code>data-toggle="offcanvas"</code> and a <code>data-target</code> to control, assigning it to show and hide the target element. The <code>data-target</code> attribute accepts a CSS selector to apply the collapse to.</p>
+    <p>Optionally add a <code>data-canvas</code> attribute to slide a canvas instead of only the target element. For a push menu set <code>data-canvas="body"</code>.
+
+    <h3>Via JavaScript</h3>
+    <p>Call the offcanvas via javascript:</p>
+{% highlight js %}
+$('.navmenu').offcanvas()
+{% endhighlight %}
+
+    <h3>Options</h3>
+
+    <p>Options can be placed both on control and on target menu element.</p>
+
+    <table class="table table-bordered table-striped">
+      <thead>
+        <tr>
+          <th style="width: 100px;">Name</th>
+          <th style="width: 50px;">type</th>
+          <th style="width: 100px;">default</th>
+          <th>description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>canvas</td>
+          <td>string</td>
+          <td>false</td>
+          <td>If set, the canvas will be moved on show and hide instead of the target element. This creates alternative effects.</td>
+        </tr>
+        <tr>
+          <td>toggle</td>
+          <td>boolean</td>
+          <td>true</td>
+          <td>Toggles the off canvas element on invocation</td>
+        </tr>
+        <tr>
+          <td>placement</td>
+          <td>string</td>
+          <td>'auto'</td>
+          <td>Where to position the element at the start of the animation. For example, if placement is "left", the element will slide from left to right. The default option "auto" guesses the placement based on position and dimension.</td>
+        </tr>
+        <tr>
+          <td>autohide</td>
+          <td>boolean</td>
+          <td>true</td>
+          <td>Hide the off canvas element if clicked anywhere other that the element.</td>
+        </tr>
+        <tr>
+          <td>recalc</td>
+          <td>boolean</td>
+          <td>true</td>
+          <td>Calculate if off canvas should be disabled for this viewport width on window resize. If your elements always gets hidden on window resize, try setting this to false.</td>
+        </tr>
+        <tr>
+          <td>exclude</td>
+          <td>string</td>
+          <td>null</td>
+          <td>Set css selectors for elements, that have fixed positioning and that should not be moved when showing\hiding menu.</td>
+        </tr>
+        <tr>
+          <td>disableScrolling</td>
+          <td>boolean</td>
+          <td>true</td>
+          <td>Disable scrolling when the off canvas element is shown, by setting overflow to hidden for the body.</td>
+        </tr>
+        <tr>
+          <td>backdrop</td>
+          <td>boolean</td>
+          <td>false</td>
+          <td>If backdrop should be shown when menu is opened, in modal-like style.</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div class="bs-callout bs-callout-danger">
+      <h4>Graceful degradation</h4>
+      <p>For browsers that don't support transform (mainly IE8), the <code>target</code> option is ignored. In that case, the plugin will always slide the target element. In that case <code>.canvas-slid</code> will be added to the target element instead.</p>
+    </div>
+
+    <h3>Two menus on the page</h3>
+
+    <p>If there are two (or more) menus on the page, there can be only one opened at a time. When menu attempts to be opened, already opened one will be closed first. It's almost fully automated, accept that <code>data-exclude</code> option should be set for each menu, holding references to other menus. For example, if we have two menus <code>#menu-left</code> and <code>#menu-right</code>, then they should have the following option set, correspondingly: <code>data-exclude="#menu-right"</code> and <code>data-exclude="#menu-left"</code>.</p>
+
+    <h3>Methods</h3>
+    <h4>.offcanvas(options)</h4>
+    <p>Initializes the off canvas element with an optional options.</p>
+    <h4>.offcanvas('toggle')</h4>
+    <p>Toggles an off canvas element to shown or hidden.</p>
+    <h4>.offcanvas('show')</h4>
+    <p>Shows an off canvas element.</p>
+    <h4>.offcanvas('hide')</h4>
+    <p>Hides an off canvas element.</p>
+
+    <h3>Events</h3>
+    <div class="table-responsive">
+      <table class="table table-bordered table-striped">
+        <thead>
+          <tr>
+            <th style="width: 150px;">Event Type</th>
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>show.bs.offcanvas</td>
+            <td>This event fires immediately when the show instance method is called.</td>
+          </tr>
+          <tr>
+            <td>shown.bs.offcanvas</td>
+            <td>This event is fired when the target has been made visible to the user (will wait for CSS transitions to complete).</td>
+          </tr>
+          <tr>
+            <td>hide.bs.offcanvas</td>
+            <td>This event is fired immediately when the hide instance method has been called.</td>
+          </tr>
+          <tr>
+            <td>hidden.bs.offcanvas</td>
+            <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
+          </tr>
+        </tbody>
+      </table>
+    </div><!-- ./bs-table-responsive -->
+  </div>
+
+
+  <!-- Row link
+  ================================================== -->
+  <div class="bs-docs-section bs-jasny">
+    <div class="pb-2 mt-4 mb-2 border-bottom">
+      <h1 id="rowlink">Row link <small>rowlink.js</small></h1>
+    </div>
+
+    <h2 id="rowlink-examples">Example</h2>
+    <p>This plugin turns a table row into a clickable link.</p>
+    <div class="bs-example">
+      <table class="table table-striped table-bordered table-hover">
+        <thead>
+          <tr><th>Name</th><th>Description</th><th>Actions</th></tr>
+        </thead>
+        <tbody data-link="row" class="rowlink">
+          <tr><td><a href="#fileinput">File input</a></td><td>The file input plugin allows you to create a visually appealing file widgets.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
+          <tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
+          <tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
+        </tbody>
+      </table>
+    </div>
+    <div id="rowlinkModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="rowlinkModalTitle" aria-hidden="true">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h4 class="modal-title" id="rowlinkModalTitle">Rowlink Modal</h4>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <p>This modal proves that JavaScript events are triggered correctly by rowlink.</p>
+          </div>
+        </div><!-- /.modal-content -->
+      </div><!-- /.modal-dialog -->
+    </div><!-- /.modal -->
+{% highlight html %}
+<table class="table table-striped table-bordered table-hover">
+  <thead>
+    <tr><th>Name</th><th>Description</th><th>Actions</th></tr>
+  </thead>
+  <tbody data-link="row" class="rowlink">
+    <tr><td><a href="#fileinput">File input</a></td><td>The file input plugin allows you to create a visually appealing file widgets.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
+    <tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
+    <tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
+  </tbody>
+</table>
+{% endhighlight %}
+
+    <hr class="bs-docs-separator">
+
+    <h2 id="rowlink-usage">Usage</h2>
+
+    <h3>Via data attributes</h3>
+    <p>Add class <code>.rowlink</code> and attribute <code>data-link="row"</code> to a <code>&lt;table&gt;</code> or <code>&lt;tbody&gt;</code> element. For other options append the name to <code>data-</code>, as in <code>data-target="a.mainlink"</code> A cell can be excluded by adding the <code>.rowlink-skip</code> class to the <code>&lt;td&gt;</code>.</p>
+
+    <h3>Via JavaScript</h3>
+    <p>Call the row link via javascript:</p>
+{% highlight js %}
+$('tbody.rowlink').rowlink()
+{% endhighlight %}
+
+    <h3>Options</h3>
+    <table class="table table-bordered table-striped">
+      <thead>
+        <tr>
+          <th style="width: 100px;">Name</th>
+          <th style="width: 50px;">type</th>
+          <th style="width: 100px;">default</th>
+          <th>description</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>target</td>
+          <td>string</td>
+          <td>'a'</td>
+          <td>A jquery selector string, to select the link element within each row.</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <h3>Methods</h3>
+    <h4>.rowlink(options)</h4>
+    <p>Makes the rows of a table or tbody clickable.</p>
+  </div>
+
+
+  <!-- File input
+  ================================================== -->
+  <div class="bs-docs-section bs-jasny">
+    <div class="pb-2 mt-4 mb-2 border-bottom">
+      <h1 id="fileinput">File input <small>fileinput.js</small></h1>
+    </div>
+
+    <h2 id="fileinput-examples">Examples</h2>
+    <p>The file input plugin allows you to create a visually appealing file or image input widgets.</p>
+
+    <p>
+      In first of the following examples one can easily add support for file icon, how it previously was, untill Bootstrap dropped Glyphicons. Include the link to iconic font on the page, and replace the following line
+    </p>
+
+    {% highlight html %}
+      <span class="fileinput-filename"></span>
+    {% endhighlight %}
+
+    <p>with the following (<code>glyphicon</code> classes should be changed to the ones that you use):</p>
+
+    {% highlight html %}
+      <i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename with-icon"></span>
+    {% endhighlight %}
+
+    <h3>File input widgets</h3>
+
+    <div class="bs-example">
+
+      <div class="fileinput fileinput-new input-group" data-provides="fileinput">
+        <div class="form-control" data-trigger="fileinput">
+          <span class="fileinput-filename"></span>
+        </div>
+        <span class="input-group-append">
+          <span class="input-group-text fileinput-exists" data-dismiss="fileinput">
+            Remove
+          </span>
+
+          <span class="input-group-text btn-file">
+            <span class="fileinput-new">Select file</span>
+            <span class="fileinput-exists">Change</span>
+            <input type="file" multiple>
+          </span>
+        </span>
+      </div>
+
+    </div>
+{% highlight html %}
+<div class="fileinput fileinput-new input-group" data-provides="fileinput">
+  <div class="form-control" data-trigger="fileinput">
+    <span class="fileinput-filename"></span>
+  </div>
+  <span class="input-group-append">
+    <span class="input-group-text fileinput-exists" data-dismiss="fileinput">
+      Remove
+    </span>
+
+    <span class="input-group-text btn-file">
+      <span class="fileinput-new">Select file</span>
+      <span class="fileinput-exists">Change</span>
+      <input type="file" name="..." multiple>
+    </span>
+  </span>
+</div>
+{% endhighlight %}
+
+    <div class="bs-example">
+
+      <div class="fileinput fileinput-new" data-provides="fileinput">
+        <span class="btn btn-outline-secondary btn-file">
+          <span class="fileinput-new">Select file</span>
+          <span class="fileinput-exists">Change</span>
+          <input type="file" multiple>
+        </span>
+        <span class="fileinput-filename"></span>
+        <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
+      </div>
+
+    </div>
+{% highlight html %}
+<div class="fileinput fileinput-new" data-provides="fileinput">
+  <span class="btn btn-outline-secondary btn-file">
+    <span class="fileinput-new">Select file</span>
+    <span class="fileinput-exists">Change</span>
+    <input type="file" name="..." multiple>
+  </span>
+  <span class="fileinput-filename"></span>
+  <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
+</div>
+{% endhighlight %}
+
+    <h3>Image upload widgets</h3>
+    <p>When uploading an image, it's possible to show a thumbnail instead of the filename.</p>
+    <div class="bs-example">
+
+      <div class="fileinput fileinput-new" data-provides="fileinput">
+        <div class="fileinput-preview img-thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
+        <div>
+          <span class="btn btn-outline-secondary btn-file">
+            <span class="fileinput-new">Select image</span>
+            <span class="fileinput-exists">Change</span>
+            <input type="file">
+          </span>
+          <a href="#" class="btn btn-outline-secondary fileinput-exists" data-dismiss="fileinput">Remove</a>
+        </div>
+      </div>
+
+    </div>
+{% highlight html %}
+<div class="fileinput fileinput-new" data-provides="fileinput">
+  <div class="fileinput-preview img-thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
+  <div>
+    <span class="btn btn-outline-secondary btn-file">
+      <span class="fileinput-new">Select image</span>
+      <span class="fileinput-exists">Change</span>
+      <input type="file" name="...">
+    </span>
+    <a href="#" class="btn btn-outline-secondary fileinput-exists" data-dismiss="fileinput">Remove</a>
+  </div>
+</div>
+{% endhighlight %}
+
+    <div class="bs-example">
+
+      <div class="fileinput fileinput-new" data-provides="fileinput">
+        <div class="fileinput-new img-thumbnail" style="width: 200px; height: 150px;">
+          <img data-src="holder.js/100%x100%"  alt="Generic placeholder thumbnail" src="data:image/png;base64,">
+        </div>
+        <div class="fileinput-preview fileinput-exists img-thumbnail" style="max-width: 200px; max-height: 150px;"></div>
+        <div>
+          <span class="btn btn-outline-secondary btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file"></span>
+          <a href="#" class="btn btn-outline-secondary fileinput-exists" data-dismiss="fileinput">Remove</a>
+        </div>
+      </div>
+
+    </div>
+{% highlight html %}
+<div class="fileinput fileinput-new" data-provides="fileinput">
+  <div class="fileinput-new img-thumbnail" style="width: 200px; height: 150px;">
+    <img data-src="holder.js/100%x100%"  alt="...">
+  </div>
+  <div class="fileinput-preview fileinput-exists img-thumbnail" style="max-width: 200px; max-height: 150px;"></div>
+  <div>
+    <span class="btn btn-outline-secondary btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
+    <a href="#" class="btn btn-outline-secondary fileinput-exists" data-dismiss="fileinput">Remove</a>
+  </div>
+</div>
+{% endhighlight %}
+
+    <div class="bs-callout bs-callout-warning">
+      <p>Image preview only works in IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+. In older browsers the filename is shown instead.</p>
+    </div>
+
+    <hr class="bs-docs-separator">
+
+
+    <h2 id="fileinput-usage">Usage</h2>
+    <p>Add <code>.fileinput</code> to the container. Elements inside the container with <code>.fileinput-new</code> and <code>.fileinput-exists</code> are shown or hidden based on the current state. A preview of the selected file is placed in <code>.fileinput-preview</code>. The text of <code>.fileinput-filename</code> gets set to the name of the selected file.</p>
+
+    <p>Multiple file uploads can be handled by adding <code>multiple</code> attribute to file input element. Names of files are shown in name preview, joined by comma. In image preview only the first image is shown.</p>
+
+    <p>The file input widget should be placed in a regular <code>&lt;form&gt;</code> replacing a standard <code>&lt;input type="file"&gt;</code>. The server side code should handle the file upload as normal.</p>
+
+    <h3>Via data attributes</h3>
+    <p>Add <code>data-provides="fileinput"</code> to the <code>.fileinput</code> element. Implement a button to clear the file with <code>data-dismiss="fileinput"</code>. Add <code>data-trigger="fileinput"</code> to any element within the <code>.fileinput</code> widget to trigger the file dialog.</p>
+
+    <h3>Via JavaScript</h3>
+    <pre class="prettyprint linenums">$('.fileinput').fileinput()</pre>
+
+    <h3>Layout</h3>
+    <p>Using the given elements, you can layout the upload widget the way you want, either with a fixed <code>width</code> and <code>height</code> or with <code>max-width</code> and <code>max-height</code>.</p>
+
+    <h3>Options</h3>
+    <div class="table-responsive">
+      <table class="table table-bordered table-striped">
+        <thead>
+          <tr>
+            <th style="width: 100px;">Name</th>
+            <th style="width: 50px;">type</th>
+            <th>description</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>name</td>
+            <td>string</td>
+            <td>Use this option instead of setting the <code>name</code> attribute on the <code>&lt;input&gt;</code> element to prevent it from being part of the post data when not changed.</td>
+          </tr>
+          <tr>
+            <td>clearName</td>
+            <td>boolean</td>
+            <td>Sets if file input name should be cleared when input is cleared. It's <code>true</code> by default, to tell the server the difference between pressing clear and submit without a change in a normal form.</td>
+          </tr>
+          <tr>
+            <td>maxSize</td>
+            <td>float</td>
+            <td>Use this option if you want to limit file upload size. It's in <code>MB</code> and should be set for <code>.fileinput</code> element. For ex. <code>data-max-size="3"</code> allows upload only for files with size <= 3MB. If several files are selected, and only one of them is greater then this option value, all files will be discarded. Event <code>max_size.bs.fileinput</code> is triggered on discard.</td>
+          </tr>
+          <tr>
+            <td>exif</td>
+            <td>bool</td>
+            <td>Enable this to rotate the image based on the orientation from the [Exif](https://en.wikipedia.org/wiki/Exif) meta data.</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <h3>Methods</h3>
+    <h4>.fileinput(options)</h4>
+    <p>Initializes a file upload widget.</p>
+    <h4>.fileinput('clear')</h4>
+    <p>Clear the selected file.</p>
+    <h4>.fileinput('reset')</h4>
+    <p>Reset the form element to the original value.</p>
+
+    <h3>Events</h3>
+    <div class="table-responsive">
+      <table class="table table-bordered table-striped">
+        <thead>
+          <tr>
+            <th style="width: 150px;">Event Type</th>
+            <th>Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>change.bs.fileinput</td>
+            <td>This event is fired after a file is selected.</td>
+          </tr>
+          <tr>
+            <td>clear.bs.fileinput</td>
+            <td>This event is fired when the file input is cleared.</td>
+          </tr>
+          <tr>
+            <td>reset.bs.fileinput</td>
+            <td>This event is fired before the file input is reset.</td>
+          </tr>
+          <tr>
+            <td>reseted.bs.fileinput</td>
+            <td>This event is fired after the file input is reset.</td>
+          </tr>
+          <tr>
+            <td>max_size.bs.fileinput</td>
+            <td>This event is fired, if at least one of selected files has size greater then <code>maxSize</code> option, before input is cleared.</td>
+          </tr>
+        </tbody>
+      </table>
+    </div><!-- ./bs-table-responsive -->
+  </div>

docs/css.html

@@ -1,52 +0,0 @@
----
-layout: default
-title: CSS
-slug: css
-lead: "Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system."
-base_url: "../"
----
-
-
-  <!-- Global Bootstrap settings
-  ================================================== -->
-  <div class="bs-docs-section">
-    <div class="page-header">
-      <h1 id="overview">Overview</h1>
-    </div>
-    
-    <h3 id="overview-container">Containers</h3>
-    <p>Added <code>.container-smooth</code> a container to use the same <code>max-width</code> for all viewport sizes. This means that the container size won't jump at media query breakpoints.</p>
-  </div>
-
-
-  <!-- Buttons
-  ================================================== -->
-  <div class="bs-docs-section">
-    <div class="page-header">
-      <h1 id="buttons">Buttons</h1>
-    </div>
-
-    <div>
-      <h2 id="buttons-labels">Labels</h2>
-      <p>Give a button some extra style by adding a label. Add <code>.btn-labeled</code> to any button with a label.</p>
-      <div class="bs-example">
-        <button type="button" class="btn btn-labeled btn-default"><span class="btn-label"><i class="glyphicon glyphicon-arrow-left"></i></span>Left</button>
-        <button type="button" class="btn btn-labeled btn-default">Right<span class="btn-label btn-label-right"><i class="glyphicon glyphicon-arrow-right"></i></span></button>
-        <button type="button" class="btn btn-labeled btn-success"><span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>Success</button>
-        <button type="button" class="btn btn-labeled btn-danger"><span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>Danger</button>
-      </div>
-{% highlight html %}
-<!-- Standard button with label -->
-<button type="button" class="btn btn-labeled btn-default"><span class="btn-label"><i class="glyphicon glyphicon-arrow-left"></i></span>Left</button>
-
-<!-- Standard button with label on the right side -->
-<button type="button" class="btn btn-labeled btn-default">Right<span class="btn-label btn-label-right"><i class="glyphicon glyphicon-arrow-right"></i></span></button>
-
-<!-- Success button with label -->
-<button type="button" class="btn btn-labeled btn-success"><span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>Success</button>
-
-<!-- Danger button with label -->
-<button type="button" class="btn btn-labeled btn-danger"><span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>Danger</button>
-{% endhighlight %}
-    </div>
-  </div>

docs/customize.html

@@ -1,170 +0,0 @@
----
-layout: default
-title: Customize and download
-slug: customize
-lead: Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.
-base_url: "../"
----
-
-<!-- Customizer form -->
-<form class="bs-customizer" role="form">
-  <div class="bs-docs-section" id="less-section">
-    <div class="page-header">
-      <button class="btn btn-default toggle" type="button">Toggle all</button>
-      <h1 id="less">Less files</h1>
-    </div>
-    
-    <p class="lead">Choose which Less files to compile into your custom build of Jasny Bootstrap. Not sure which files to use? Read through the <a href="../css/">CSS</a> and <a href="../components/">Components</a> pages in the docs.</p>
-
-    <div class="row">
-      <div class="col-xs-6 col-sm-4">
-        <h3>Common CSS</h3>
-        <div class="checkbox">
-          <label>
-            <input type="checkbox" checked value="grid-container-smooth.less">
-            Grid system
-          </label>
-        </div>
-        <div class="checkbox">
-          <label>
-            <input type="checkbox" checked value="button-labels.less">
-            Button labels
-          </label>
-        </div>
-      </div><!-- .col-xs-6 .col-sm-4 -->
-
-      <div class="col-xs-6 col-sm-4">
-        <h3>Components</h3>
-        <div class="checkbox">
-          <label>
-            <input type="checkbox" checked value="navmenu.less">
-            Navmenu
-          </label>
-        </div>
-        <div class="checkbox">
-          <label>
-            <input type="checkbox" checked value="alerts-fixed.less">
-            Alerts
-          </label>
-        </div>
-      </div><!-- .col-xs-6 .col-sm-4 -->
-
-      <div class="col-xs-6 col-sm-4">
-        <h3>JavaScript components</h3>
-        <div class="checkbox">
-          <label>
-            <input type="checkbox" checked value="offcanvas.less">
-            Off canvas
-          </label>
-        </div>
-        <div class="checkbox">
-          <label>
-            <input type="checkbox" checked value="rowlink.less">
-            Rowlink
-          </label>
-        </div>
-        <div class="checkbox">
-          <label>
-            <input type="checkbox" checked value="inputmask.less">
-            Input mask
-          </label>
-        </div>
-        <div class="checkbox">
-          <label>
-            <input type="checkbox" checked value="fileinput.less">
-            File input
-          </label>
-        </div>
-      </div><!-- .col-xs-6 .col-sm-4 -->
-    </div><!-- /.row -->
-    
-    <div class="bs-callout bs-callout-danger">
-      <h4>Vanilla Bootstrap required</h4>
-      <p>Jasny Bootstrap requires <a href="http://getbootstrap.com/" target="_blank">vanilla Bootstrap</a> to be included.</p>
-    </div>
-  </div>
-
-
-
-  <div class="bs-docs-section" id="plugin-section">
-    <div class="page-header">
-      <button class="btn btn-default toggle" type="button">Toggle all</button>
-      <h1 id="plugins">jQuery plugins</h1>
-    </div>
-    
-    <p class="lead">Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the <a href="../javascript/">JavaScript</a> page in the docs.</p>
-    <div class="row">
-      <div class="col-lg-6">
-        <h4>Linked to components</h4>
-        <div class="checkbox">
-          <label>
-            <input type="checkbox" checked value="rowlink.js">
-            Rowlink
-          </label>
-        </div>
-        <div class="checkbox">
-          <label>
-            <input type="checkbox" checked value="inputmask.js">
-            Input mask
-          </label>
-        </div>
-        <div class="checkbox">
-          <label>
-            <input type="checkbox" checked value="fileinput.js">
-            File input
-          </label>
-        </div>
-      </div>
-      <div class="col-lg-6">
-        <h4>Magic</h4>
-        <div class="checkbox">
-          <label>
-            <input type="checkbox" checked value="offcanvas.js">
-            Off canvas
-          </label>
-        </div>
-        <div class="checkbox">
-          <label>
-            <input type="checkbox" checked value="transition.js">
-            Transitions <small>(required for any kind of animation)</small>
-          </label>
-        </div>
-      </div>
-    </div>
-
-    <div class="bs-callout bs-callout-info">
-      <h4>Produces two files</h4>
-      <p>All checked plugins will be compiled into a readable <code>jasny-bootstrap.js</code> and a minified <code>jasny-bootstrap.min.js</code>. We recommend you use the minified version in production.</p>
-    </div>
-
-    <div class="bs-callout bs-callout-danger">
-      <h4>jQuery required</h4>
-      <p>All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
-    </div>
-  </div>
-
-
-
-  <div class="bs-docs-section" id="less-variables-section">
-    <div class="page-header">
-      <button class="btn btn-default toggle" type="reset">Reset to defaults</button>
-      <h1 id="less-variables">Less variables</h1>
-    </div>
-
-    <p class="lead">Customize Less variables to define colors, sizes and more inside your custom CSS stylesheets.</p>
-    {% include customizer-variables.html %}
-  </div>
-
-
-
-  <div class="bs-docs-section">
-    <div class="page-header">
-      <h1 id="download">Download</h1>
-    </div>
-    
-    <p class="lead">Hooray! Your custom version of Jasny Bootstrap is now ready to be compiled. Just click the button below to finish the process.</p>
-    <div class="bs-customize-download">
-      <button type="submit" id="btn-compile" class="btn btn-block btn-lg btn-outline" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Compile and Download</button>
-    </div>
-  </div><!-- /download -->
-</form>

docs/examples/navbar-offcanvas/index.html

@@ -34,7 +34,7 @@
       <!-- Static navbar -->
       <div class="navbar navbar-fixed-top navbar-default">
         <div class="navbar-header">
-          <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navbar-offcanvas" data-canvas="body">
+          <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navbar-offcanvas" data-canvas="body" data-placement="right">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>

docs/examples/navbar-offcanvas/navbar-offcanvas.css

@@ -1,10 +1,11 @@
 body {
+  left: auto!important;
   padding-top: 80px;
   padding-bottom: 20px;
-}
+  }
 
 @media (min-width: 992px) {
   .navbar {
     padding-right: 15px;
+    }
   }
-}

docs/examples/navmenu-push/index.html

@@ -10,7 +10,7 @@
     <title>Off Canvas Push Menu Template for Bootstrap</title>
 
     <!-- Bootstrap core CSS -->
-    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
     <link href="../../dist/css/jasny-bootstrap.min.css" rel="stylesheet">
 
     <!-- Custom styles for this template -->
@@ -29,38 +29,36 @@
   <body>
     <div class="navmenu navmenu-default navmenu-fixed-left offcanvas">
       <a class="navmenu-brand" href="#">Project name</a>
-      <ul class="nav navmenu-nav">
-        <li><a href="../navmenu/">Slide in</a></li>
-        <li class="active"><a href="./">Push</a></li>
-        <li><a href="../navmenu-reveal/">Reveal</a></li>
-        <li><a href="../navbar-offcanvas/">Off canvas navbar</a></li>
+      <ul class="nav navmenu-nav flex-column">
+        <li class="nav-item"><a class="nav-link" href="../navmenu/">Slide in</a></li>
+        <li class="nav-item active"><a class="nav-link" href="./">Push</a></li>
+        <li class="nav-item"><a class="nav-link" href="../navmenu-reveal/">Reveal</a></li>
+        <li class="nav-item"><a class="nav-link" href="../navbar-offcanvas/">Off canvas navbar</a></li>
       </ul>
-      <ul class="nav navmenu-nav">
-        <li><a href="#">Link</a></li>
-        <li><a href="#">Link</a></li>
-        <li><a href="#">Link</a></li>
-        <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+      <ul class="nav navmenu-nav flex-column">
+        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
+        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
+        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
+        <li class="nav-item dropdown">
+          <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
           <ul class="dropdown-menu navmenu-nav">
-            <li><a href="#">Action</a></li>
-            <li><a href="#">Another action</a></li>
-            <li><a href="#">Something else here</a></li>
-            <li class="divider"></li>
+            <li class="nav-item"><a class="nav-link" href="#">Action</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Another action</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Something else here</a></li>
+            <li class="dropdown-divider"></li>
             <li class="dropdown-header">Nav header</li>
-            <li><a href="#">Separated link</a></li>
-            <li><a href="#">One more separated link</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Separated link</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">One more separated link</a></li>
           </ul>
         </li>
       </ul>
     </div>
 
-    <div class="navbar navbar-default navbar-fixed-top">
-      <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
+    <header class="navbar navbar-light bg-light fixed-top">
+      <button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
+        <span class="navbar-toggler-icon"></span>
       </button>
-    </div>
+    </header>
 
     <div class="container">
       <div class="page-header">
@@ -74,8 +72,9 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
-    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <script src="https://code.jquery.com/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
     <script src="../../dist/js/jasny-bootstrap.min.js"></script>
     <script src="../../../js/offcanvas.js"></script>
   </body>

docs/examples/navmenu-push/navmenu-push.css

@@ -1,29 +1,29 @@
 html, body {
   height: 100%;
-}
+  }
 
 body {
-  padding: 50px 0 0 0;
-}
+  padding: 70px 0 0 0;
+  }
 
 .navbar-toggle {
   float: left;
   margin-left: 15px;
-}
+  }
 
 @media (min-width: 0) {
   .navbar-toggle {
     display: block; /* force showing the toggle */
+    }
   }
-}
 
 @media (min-width: 992px) {
   body {
     padding: 0;
-  }
+    }
   .navbar {
     right: auto;
     background: none;
     border: none;
+    }
   }
-}

docs/examples/navmenu-reveal/index.html

@@ -10,7 +10,7 @@
     <title>Off Canvas Reveal Menu Template for Bootstrap</title>
 
     <!-- Bootstrap core CSS -->
-    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
     <link href="../../dist/css/jasny-bootstrap.min.css" rel="stylesheet">
 
     <!-- Custom styles for this template -->
@@ -29,39 +29,37 @@
   <body>
     <div class="navmenu navmenu-default navmenu-fixed-left">
       <a class="navmenu-brand" href="#">Project name</a>
-      <ul class="nav navmenu-nav">
-        <li><a href="../navmenu/">Slide in</a></li>
-        <li><a href="../navmenu-push/">Push</a></li>
-        <li class="active"><a href="./">Reveal</a></li>
-        <li><a href="../navbar-offcanvas/">Off canvas navbar</a></li>
+      <ul class="nav navmenu-nav flex-column">
+        <li class="nav-item"><a class="nav-link" href="../navmenu/">Slide in</a></li>
+        <li class="nav-item"><a class="nav-link" href="../navmenu-push/">Push</a></li>
+        <li class="nav-item active"><a class="nav-link" href="../navmenu-reveal/">Reveal</a></li>
+        <li class="nav-item"><a class="nav-link" href="../navbar-offcanvas/">Off canvas navbar</a></li>
       </ul>
-      <ul class="nav navmenu-nav">
-        <li><a href="#">Link</a></li>
-        <li><a href="#">Link</a></li>
-        <li><a href="#">Link</a></li>
-        <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+      <ul class="nav navmenu-nav flex-column">
+        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
+        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
+        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
+        <li class="nav-item dropdown">
+          <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
           <ul class="dropdown-menu navmenu-nav">
-            <li><a href="#">Action</a></li>
-            <li><a href="#">Another action</a></li>
-            <li><a href="#">Something else here</a></li>
-            <li class="divider"></li>
+            <li class="nav-item"><a class="nav-link" href="#">Action</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Another action</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Something else here</a></li>
+            <li class="dropdown-divider"></li>
             <li class="dropdown-header">Nav header</li>
-            <li><a href="#">Separated link</a></li>
-            <li><a href="#">One more separated link</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Separated link</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">One more separated link</a></li>
           </ul>
         </li>
       </ul>
     </div>
 
     <div class="canvas">
-      <div class="navbar navbar-default navbar-fixed-top">
-        <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas">
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
-          <span class="icon-bar"></span>
+      <header class="navbar navbar-light bg-light fixed-top">
+        <button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target=".navmenu" data-recalc="false" data-canvas=".canvas">
+          <span class="navbar-toggler-icon"></span>
         </button>
-      </div>
+      </header>
 
       <div class="container">
         <div class="page-header">
@@ -79,8 +77,9 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
-    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <script src="https://code.jquery.com/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
     <script src="../../dist/js/jasny-bootstrap.min.js"></script>
   </body>
 </html>

docs/examples/navmenu-reveal/navmenu-reveal.css

@@ -1,15 +1,13 @@
 html, body {
   height: 100%;
-}
-
-.navbar-toggle {
-  float: left;
-  margin-left: 15px;
-}
+  }
+body {
+  padding: 20px 0 0 0;
+  }
 
 .navmenu {
   z-index: 1;
-}
+  }
 
 .canvas {
   position: relative;
@@ -18,24 +16,18 @@ html, body {
   min-height: 100%;
   padding: 50px 0 0 0;
   background: #fff;
-}
-
-@media (min-width: 0) {
-  .navbar-toggle {
-    display: block; /* force showing the toggle */
   }
-}
 
 @media (min-width: 992px) {
   body {
     padding: 0;
-  }
+    }
   .navbar {
     right: auto;
     background: none;
     border: none;
-  }
+    }
   .canvas {
     padding: 0;
+    }
   }
-}

docs/examples/navmenu/index.html

@@ -7,10 +7,10 @@
     <meta name="author" content="">
     <link rel="shortcut icon" href="../../assets/ico/favicon.png">
 
-    <title>Navmenu Template for Bootstrap</title>
+    <title>Off Canvas Slide-in Menu Template for Bootstrap</title>
 
     <!-- Bootstrap core CSS -->
-    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
     <link href="../../dist/css/jasny-bootstrap.min.css" rel="stylesheet">
 
     <!-- Custom styles for this template -->
@@ -28,44 +28,41 @@
 
   <body>
     <div class="navmenu navmenu-default navmenu-fixed-left offcanvas-sm">
-      <a class="navmenu-brand visible-md visible-lg" href="#">Project name</a>
-      <ul class="nav navmenu-nav">
-        <li class="active"><a href="./">Slide in</a></li>
-        <li><a href="../navmenu-push/">Push</a></li>
-        <li><a href="../navmenu-reveal/">Reveal</a></li>
-        <li><a href="../navbar-offcanvas/">Off canvas navbar</a></li>
+      <ul class="nav navmenu-nav flex-column">
+        <li class="nav-item active"><a class="nav-link" href="../navmenu/">Slide in</a></li>
+        <li class="nav-item"><a class="nav-link" href="../navmenu-push/">Push</a></li>
+        <li class="nav-item"><a class="nav-link" href="../navmenu-reveal/">Reveal</a></li>
+        <li class="nav-item"><a class="nav-link" href="../navbar-offcanvas/">Off canvas navbar</a></li>
       </ul>
-      <ul class="nav navmenu-nav">
-        <li><a href="#">Link</a></li>
-        <li><a href="#">Link</a></li>
-        <li><a href="#">Link</a></li>
-        <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+      <ul class="nav navmenu-nav flex-column">
+        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
+        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
+        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
+        <li class="nav-item dropdown">
+          <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
           <ul class="dropdown-menu navmenu-nav">
-            <li><a href="#">Action</a></li>
-            <li><a href="#">Another action</a></li>
-            <li><a href="#">Something else here</a></li>
-            <li class="divider"></li>
+            <li class="nav-item"><a class="nav-link" href="#">Action</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Another action</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Something else here</a></li>
+            <li class="dropdown-divider"></li>
             <li class="dropdown-header">Nav header</li>
-            <li><a href="#">Separated link</a></li>
-            <li><a href="#">One more separated link</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">Separated link</a></li>
+            <li class="nav-item"><a class="nav-link" href="#">One more separated link</a></li>
           </ul>
         </li>
       </ul>
     </div>
 
-    <div class="navbar navbar-default navbar-fixed-top hidden-md hidden-lg">
-      <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu">
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
+    <header class="navbar navbar-light bg-light fixed-top hidden-md hidden-lg">
+      <button class="navbar-toggler" type="button" data-toggle="offcanvas" data-target=".navmenu">
+        <span class="navbar-toggler-icon"></span>
       </button>
       <a class="navbar-brand" href="#">Project name</a>
-    </div>
+    </header>
 
     <div class="container">
       <div class="page-header">
-        <h1>Navmenu Template</h1>
+        <h1>Off Canvas Slide-in Menu Template</h1>
       </div>
       <p class="lead">This example shows the navmenu element. If the viewport is <b>less than 992px</b> the menu will be placed the off canvas and will be shown with a slide in effect.</p>
       <p>Also take a look at the examples for a navmenu with <a href="../navmenu-push">push effect</a> and <a href="../navmenu-reveal">reveal effect</a>.</p>
@@ -75,8 +72,9 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
-    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <script src="https://code.jquery.com/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
     <script src="../../dist/js/jasny-bootstrap.min.js"></script>
   </body>
 </html>

docs/examples/navmenu/navmenu.css

@@ -1,46 +1,45 @@
 html, body {
   height: 100%;
-}
+  }
 body {
-  padding: 50px 0 0 0;
-}
+  padding: 70px 0 0 0;
+  }
 
 .navmenu {
   padding-top: 50px;
-}
+  }
 
 .navbar {
   display: block;
   text-align: center;
-}
+  }
 .navbar-brand {
   display: inline-block;
   float: none;
-}
-.navbar-toggle {
+  }
+.navbar-toggler {
   position: absolute;
   float: left;
-  margin-left: 15px;
-}
+  }
 
 .container {
   max-width: 100%;
-}
+  }
 
 @media (min-width: 1px) {
-  .navbar-toggle {
+  .navbar-toggler {
     display: block !important;
+    }
   }
-}
 
 @media (min-width: 992px) {
   body {
     padding: 0 0 0 300px;
-  }
+    }
   .navmenu {
     padding-top: 0;
-  }
+    }
   .navbar {
     display: none !important; /* IE8 fix */
+    }
   }
-}

docs/examples/starter-template/index.html

@@ -11,7 +11,7 @@
     <title>Starter Template for Bootstrap</title>
 
     <!-- Bootstrap core CSS -->
-    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
     <link href="../../dist/css/jasny-bootstrap.min.css" rel="stylesheet">
 
     <!-- Custom styles for this template -->
@@ -29,21 +29,19 @@
 
   <body>
 
-    <div class="navbar navbar-inverse navbar-fixed-top">
+    <div class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
       <div class="container">
-        <div class="navbar-header">
-          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-          <a class="navbar-brand" href="#">Project name</a>
-        </div>
-        <div class="collapse navbar-collapse">
+
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse-menu">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <a class="navbar-brand" href="#">Project name</a>
+
+        <div class="collapse navbar-collapse" id="navbar-collapse-menu">
           <ul class="nav navbar-nav">
-            <li class="active"><a href="#">Home</a></li>
-            <li><a href="#about">About</a></li>
-            <li><a href="#contact">Contact</a></li>
+            <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
+            <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
+            <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
           </ul>
         </div><!--/.nav-collapse -->
       </div>
@@ -62,8 +60,9 @@
     <!-- Bootstrap core JavaScript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
-    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <script src="https://code.jquery.com/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
     <script src="../../dist/js/jasny-bootstrap.min.js"></script>
   </body>
 </html>

docs/examples/starter-template/starter-template.css

@@ -1,9 +1,9 @@
 body
 {
   padding-top: 50px;
-}
+  }
 .starter-template
 {
   padding: 40px 15px;
   text-align: center;
-}
+  }

docs/getting-started.html

@@ -9,12 +9,12 @@ base_url: "../"
   <!-- Getting started
   ================================================== -->
   <div class="bs-docs-section">
-    <div class="page-header">
+    <div class="pb-2 mt-4 mb-2 border-bottom">
       <h1 id="jasny-bootstrap">Jasny Bootstrap</h1>
     </div>
     <p class="lead">Jasny Bootstrap is an extension to <a href="http://getbootstrap.com">vanilla Bootstrap</a>, adding a number of features and components.</p>
     <p>The aim of Jasny Bootstrap is to provide all the required features for building highly interactive web applications for desktop and mobile.</p>
-    
+
     <div class="bs-callout bs-callout-warning">
       <h4>Delivered as extension only</h4>
       <p>As of version 3.1.0 Jasny Bootstrap is no longer bundled with vanilla Bootstrap. You should load vanilla Bootstrap's CSS before this extension.</p>
@@ -24,7 +24,7 @@ base_url: "../"
   <!-- Getting started
   ================================================== -->
   <div class="bs-docs-section">
-    <div class="page-header">
+    <div class="pb-2 mt-4 mb-2 border-bottom">
       <h1 id="download">Download</h1>
     </div>
     <p class="lead">Jasny Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>
@@ -32,7 +32,7 @@ base_url: "../"
     <h3 id="download-compiled">Compiled CSS and JS</h3>
     <p>The fastest way to get Jasny Bootstrap is to download the compiled and minified versions of our CSS and JavaScript. No documentation or original source files are included.</p>
     <p><a class="btn btn-lg btn-primary" href="{{ site.download.dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Jasny Bootstrap</a></p>
-  
+
     <h3 id="download-additional">Additional downloads</h3>
     <div class="bs-docs-dl-options">
       <h4>
@@ -43,11 +43,6 @@ base_url: "../"
         <a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'GitHub project']);">Clone or fork via GitHub</a>
       </h4>
       <p>Visit us on GitHub to clone or fork the Jasny Bootstrap project.</p>
-      <h4>
-        Install with <a href="http://bower.io">Bower</a>
-      </h4>
-      <p>Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using <a href="http://bower.io">Bower</a>.</p>
-      {% highlight bash %}$ bower install jasny-bootstrap{% endhighlight %}
     </div>
 
     <h3 id="download-cdn">Jasny Bootstrap @ cdnjs</h3>
@@ -70,7 +65,7 @@ base_url: "../"
   <!-- File structure
   ================================================== -->
   <div class="bs-docs-section bs-jasny">
-    <div class="page-header">
+    <div class="pb-2 mt-4 mb-2 border-bottom">
       <h1 id="whats-included">What's included</h1>
     </div>
     <p class="lead">Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
@@ -86,16 +81,16 @@ jasny-bootstrap/
 └── js/
     ├── jasny-bootstrap.js
     └── jasny-bootstrap.min.js
-    
+
 {% endhighlight %}
 
     <p>This is the most basic form of Jasny Bootstrap. We provide compiled CSS and JS (<code>jasny-bootstrap.*</code>), as well as compiled and minified CSS and JS (<code>jasny-bootstrap.min.*</code>).</p>
-    
+
     <p>The <code>jasny-bootstrap.*</code> files should be loaded in conjunction with the original vanilla Bootstrap files.</p>
-        
+
     <div class="bs-callout bs-callout-danger" id="jquery-required">
       <h4>jQuery required</h4>
-      <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>. <a href="{{ site.repo }}/blob/v{{ site.current_version }}/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
+      <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>.
     </div>
   </div>
 
@@ -103,7 +98,7 @@ jasny-bootstrap/
   <!-- Template
   ================================================== -->
   <div class="bs-docs-section">
-    <div class="page-header">
+    <div class="pb-2 mt-4 mb-2 border-bottom">
       <h1 id="template">Basic template</h1>
     </div>
     <p class="lead">Start with this basic HTML template, or modify <a href="../getting-started#examples">these examples</a>. We hope you'll customize our templates and examples, adapting them to suit your needs.</p>
@@ -140,25 +135,99 @@ jasny-bootstrap/
   </div>
 
 
+  <!-- Plugins
+  ================================================== -->
+  <div class="bs-docs-section">
+    <div class="pb-2 mt-4 mb-2 border-bottom">
+      <h1 id="js-overview">Plugins</h1>
+    </div>
+
+    <h3 id="js-individual-compiled">Individual or compiled</h3>
+    <p>Plugins can be included individually (using Jasny Bootstrap's individual <code>*.js</code> files), or all at once (using <code>jasny-bootstrap.js</code> or the minified <code>jasny-bootstrap.min.js</code>).</p>
+    <p>The Jasny Bootstrap plugins work with or without loading vanilla Bootstrap's <code>bootstrap.js</code>.</p>
+
+    <div class="bs-callout bs-callout-danger">
+      <h4>Do not attempt to include both.</h4>
+      <p>Both <code>jasny-bootstrap.js</code> and <code>jasny-bootstrap.min.js</code> contain all plugins in a single file.</p>
+    </div>
+
+    <h3 id="js-data-attrs">Data attributes</h3>
+    <p>You can use all Jasny Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.</p>
+
+    <p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with <code>data-api</code>. This looks like this:
+{% highlight js %}
+$(document).off('.data-api')
+{% endhighlight %}
+
+    <p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p>
+{% highlight js %}
+$(document).off('.alert.data-api')
+{% endhighlight %}
+
+    <h3 id="js-programmatic-api">Programmatic API</h3>
+    <p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p>
+{% highlight js %}
+$(".fileinput").fileinput().addClass("fat")
+{% endhighlight %}
+
+    <p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p>
+{% highlight js %}
+$("#myMenu").offcanvas()                      // initialized with defaults
+$("#myMenu").offcanvas({ autohide: false })   // initialized with no autohide
+$("#myMenu").offcanvas('show')                // initializes and invokes show immediately</p>
+{% endhighlight %}
+
+    <p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Offcanvas</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('.navmenu').data('offcanvas')</code>.</p>
+
+    <h3 id="js-noconflict">No conflict</h3>
+    <p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
+{% highlight js %}
+var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
+$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality
+{% endhighlight %}
+
+    <h3 id="js-events">Events</h3>
+    <p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
+    <p>As of 3.1.2, all Bootstrap events are namespaced.</p>
+    <p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p>
+{% highlight js %}
+$('#myMenu').on('show.bs.offcanvas', function (e) {
+  if (!data) return e.preventDefault() // stops menu from being shown
+})
+{% endhighlight %}
+  </div>
+
+
+  <!-- Containers
+  ================================================== -->
+  <div class="bs-docs-section">
+    <div class="pb-2 mt-4 mb-2 border-bottom">
+      <h1 id="containers">Containers</h1>
+    </div>
+
+    <p>Added <code>.container-smooth</code> a container to use the same <code>max-width</code> for all viewport sizes. This means that the container size won't jump at media query breakpoints.</p>
+  </div>
+
+
   <!-- Template
   ================================================== -->
   <div class="bs-docs-section">
-    <div class="page-header">
+    <div class="pb-2 mt-4 mb-2 border-bottom">
       <h1 id="examples">Examples</h1>
     </div>
-    <p class="lead">Create diverse and advanced user interfaces using Jasny's Bootstrap components. See also <a href="#customizing">Customizing Bootstrap</a> for tips on maintaining your own Bootstrap variants.</p>
-    
+    <p class="lead">Create diverse and advanced user interfaces using Jasny's Bootstrap components.</p>
+
     <div class="row bs-examples">
       <div class="col-xs-6 col-md-4">
         <a class="thumbnail" href="../examples/starter-template/">
-          <img src="../examples/screenshots/starter-template.jpg" alt="">
+          <img class="img-thumbnail" src="../examples/screenshots/starter-template.jpg" alt="">
         </a>
         <h4>Starter template</h4>
         <p>Nothing but the basics: compiled CSS and JavaScript along with a container.</p>
       </div>
       <div class="col-xs-6 col-md-4">
         <a class="thumbnail" href="../examples/navmenu/">
-          <img src="../examples/screenshots/navmenu.jpg" alt="">
+          <img class="img-thumbnail" src="../examples/screenshots/navmenu.jpg" alt="">
         </a>
         <h4>Navmenu</h4>
         <p>A basic template showing the navmenu element and demonstrates usage of the offcanvas plugin.</p>
@@ -166,7 +235,7 @@ jasny-bootstrap/
       <div class="clearfix visible-xs visible-sm"></div>
       <div class="col-xs-6 col-md-4">
         <a class="thumbnail" href="../examples/navmenu-push/">
-          <img src="../examples/screenshots/navmenu-push.jpg" alt="">
+          <img class="img-thumbnail" src="../examples/screenshots/navmenu-push.jpg" alt="">
         </a>
         <h4>Off Canvas Push Menu</h4>
         <p>A template demonstrating a push effect for the off canvas navmenu.</p>
@@ -174,14 +243,14 @@ jasny-bootstrap/
       <div class="clearfix visible-md visible-lg"></div>
       <div class="col-xs-6 col-md-4">
         <a class="thumbnail" href="../examples/navmenu-reveal/">
-          <img src="../examples/screenshots/navmenu-reveal.jpg" alt="">
+          <img class="img-thumbnail" src="../examples/screenshots/navmenu-reveal.jpg" alt="">
         </a>
         <h4>Off Canvas Reveal Menu</h4>
         <p>A template demonstrating a reveal effect by placing the navmenu under the content.</p>
       </div>
       <div class="col-xs-6 col-md-4">
         <a class="thumbnail" href="../examples/navbar-offcanvas/">
-          <img src="../examples/screenshots/navbar-offcanvas.jpg" alt="">
+          <img class="img-thumbnail" src="../examples/screenshots/navbar-offcanvas.jpg" alt="">
         </a>
         <h4>Off canvas navbar</h4>
         <p>A template using offcanvas for mobile view of the navbar.</p>
@@ -189,16 +258,40 @@ jasny-bootstrap/
     </div>
   </div>
 
-
-  <!-- Migration
+  <!-- Migration from 3.x to 4.0
   ================================================== -->
   <div class="bs-docs-section">
-    <div class="page-header">
-      <h1 id="migration">Migrating from 2.x to 3.0</h1>
+    <div class="pb-2 mt-4 mb-2 border-bottom">
+      <h1 id="migration-v4">Migrating from 3.x to 4.0</h1>
+    </div>
+    <p class="lead">There are not many changes in this migration, as it mostly deals with moving to Bootstrap 4 support.</p>
+
+    <h2 id="migration-classes-v4">Major class changes</h2>
+    <p>Bootsrtap 4 release introduced some new classes, so we also switched to using them. There're no other new classes in this version of Jasny Bootstrap.</p>
+    <ul>
+      <li>Introduced <code>.nav-item</code>, <code>.nav-link</code>, <code>.flex-column</code> classes, that are used in nav-menu.</li>
+      <li><code>.navbar-fixed-top</code> is changed to <code>.fixed-top</code>.</li>
+    </ul>
+
+    <h2 id="migration-dropped-v4">What's removed</h2>
+    <ul>
+      <li>Starting from this version Jasny Bootstrap is no longer published on Bower.</li>
+      <li>Inputmask plugin has been removed.</li>
+      <li>Removed variables customization page in documentation.</li>
+      <li>By default file icon is removed from file input, though it can be easily added. See <a href="../components#fileinput-examples">Fielinput examples</a>.</li>
+      <li>As Glyphicons were excluded from Bootstrap 4 bundle, icons now should be explicitly loaded to be used. For button labels we switched to <a href="https://fontawesome.com/">Font Awasome icons</a>. For them to work, you should include the link to them on the page, like the following: <code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"&gt;</code></li>
+    </ul>
+  </div>
+
+  <!-- Migration from 2.x to 3.0
+  ================================================== -->
+  <div class="bs-docs-section">
+    <div class="pb-2 mt-4 mb-2 border-bottom">
+      <h1 id="migration-v3">Migrating from 2.x to 3.0</h1>
     </div>
     <p class="lead">Folks looking to upgrade to v3 should use this section as a general upgrade guide. We've outlined some of the major changes and provided tables that highlight key changes.</p>
 
-    <h2 id="migration-classes">Major class changes</h2>
+    <h2 id="migration-classes-v3">Major class changes</h2>
     <p>This table shows the style changes between v2.x and v3.0.</p>
     <div class="table-responsive">
       <table class="table table-bordered table-striped">
@@ -221,7 +314,7 @@ jasny-bootstrap/
       </table>
     </div><!-- /.table-responsive -->
 
-    <h2 id="migration-new">What's new</h2>
+    <h2 id="migration-new-v3">What's new</h2>
     <p>We've added new elements and changed some existing ones. Here are the new or updated styles.</p>
     <div class="table-responsive">
       <table class="table table-bordered table-striped">
@@ -249,7 +342,7 @@ jasny-bootstrap/
     </div><!-- /.table-responsive -->
 
 
-    <h2 id="migration-dropped">What's removed</h2>
+    <h2 id="migration-dropped-v3">What's removed</h2>
     <p>The following elements have been dropped or changed in v3.0.</p>
     <div class="table-responsive">
       <table class="table table-bordered table-striped">
@@ -301,7 +394,7 @@ jasny-bootstrap/
     </div><!-- /.table-responsive -->
 
 
-    <h2 id="migration-notes">Additional notes</h2>
+    <h2 id="migration-notes-v3">Additional notes</h2>
     <p>Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our <em>mobile first</em> approach. Here's a partial list:</p>
     <ul>
       <li>The fileupload plugin has been renamed to fileinput. File upload was poorly chosen, since the plugin allows the creation of a styled file input element. It has nothing to do with how the file is uploaded.</li>

docs/javascript.html

@@ -1,605 +0,0 @@
----
-layout: default
-title: JavaScript
-slug: js
-lead: "Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one."
-base_url: "../"
----
-
-
-  <!-- Overview
-  ================================================== -->
-  <div class="bs-docs-section">
-    <div class="page-header">
-      <h1 id="js-overview">Overview</h1>
-    </div>
-
-    <h3 id="js-individual-compiled">Individual or compiled</h3>
-    <p>Plugins can be included individually (using Jasny Bootstrap's individual <code>*.js</code> files), or all at once (using <code>jasny-bootstrap.js</code> or the minified <code>jasny-bootstrap.min.js</code>).</p>
-    <p>The Jasny Bootstrap plugins work with or without loading vanilla Bootstrap's <code>bootstrap.js</code>.</p>
-
-    <div class="bs-callout bs-callout-danger">
-      <h4>Do not attempt to include both.</h4>
-      <p>Both <code>jasny-bootstrap.js</code> and <code>jasny-bootstrap.min.js</code> contain all plugins in a single file.</p>
-    </div>
-
-    <h3 id="js-data-attrs">Data attributes</h3>
-    <p>You can use all Jasny Bootstrap plugins purely through the markup API without writing a single line of JavaScript. This is Bootstrap's first-class API and should be your first consideration when using a plugin.</p>
-
-    <p>That said, in some situations it may be desirable to turn this functionality off. Therefore, we also provide the ability to disable the data attribute API by unbinding all events on the document namespaced with <code>data-api</code>. This looks like this:
-{% highlight js %}
-$(document).off('.data-api')
-{% endhighlight %}
-
-    <p>Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:</p>
-{% highlight js %}
-$(document).off('.alert.data-api')
-{% endhighlight %}
-
-    <h3 id="js-programmatic-api">Programmatic API</h3>
-    <p>We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.</p>
-{% highlight js %}
-$(".fileinput").fileinput().addClass("fat")
-{% endhighlight %}
-
-    <p>All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):</p>
-{% highlight js %}
-$("#myMenu").offcanvas()                      // initialized with defaults
-$("#myMenu").offcanvas({ autohide: false })   // initialized with no autohide
-$("#myMenu").offcanvas('show')                // initializes and invokes show immediately</p>
-{% endhighlight %}
-
-    <p>Each plugin also exposes its raw constructor on a <code>Constructor</code> property: <code>$.fn.popover.Offcanvas</code>. If you'd like to get a particular plugin instance, retrieve it directly from an element: <code>$('.navmenu').data('offcanvas')</code>.</p>
-
-    <h3 id="js-noconflict">No conflict</h3>
-    <p>Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call <code>.noConflict</code> on the plugin you wish to revert the value of.</p>
-{% highlight js %}
-var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
-$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality
-{% endhighlight %}
-
-    <h3 id="js-events">Events</h3>
-    <p>Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. <code>show</code>) is triggered at the start of an event, and its past participle form (ex. <code>shown</code>) is trigger on the completion of an action.</p>
-    <p>As of 3.1.2, all Bootstrap events are namespaced.</p>
-    <p>All infinitive events provide <code>preventDefault</code> functionality. This provides the ability to stop the execution of an action before it starts.</p>
-{% highlight js %}
-$('#myMenu').on('show.bs.offcanvas', function (e) {
-  if (!data) return e.preventDefault() // stops menu from being shown
-})
-{% endhighlight %}
-  </div>
-
-
-  <!-- Off canvas
-  ================================================== -->
-  <div class="bs-docs-section">
-    <div class="page-header">
-      <h1 id="offcanvas">Off canvas <small>offcanvas.js</small></h1>
-    </div>
-
-    <h2 id="offcanvas-examples">Example</h2>
-    <p>The offcanvas plugin allows you to hide an element from sight and than show it by moving either that or any other element. It's intended to be used for off canvas navigation, like push menus.</p>
-    <div class="bs-example bs-navmenu-offcanvas-example">
-      <div id="myNavmenuCanvas">
-        <nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
-          <a class="navmenu-brand" href="#">Brand</a>
-          <ul class="nav navmenu-nav">
-            <li class="active"><a href="#">Home</a></li>
-            <li><a href="#">Link</a></li>
-            <li><a href="#">Link</a></li>
-          </ul>
-        </nav>
-        <div class="navbar navbar-default navbar-fixed-top">
-          <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="#myNavmenuCanvas" data-placement="left">
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-        </div>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in aliquet nisl. Praesent sed leo congue, fringilla eros eu, tempus metus. Nam mollis odio ipsum, non vehicula ipsum accumsan sodales. Morbi varius vitae elit euismod cursus. Donec a dapibus justo, in facilisis nisi. Suspendisse ut turpis dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui risus, tincidunt at odio ut, ultrices dignissim ipsum. Cras ultrices erat nec leo luctus varius. Nulla sollicitudin tincidunt nulla, ut porta mauris volutpat vitae. Suspendisse ornare dolor sit amet massa venenatis pulvinar.</p>
-      </div>
-    </div><!-- /example -->
-{% highlight html %}
-<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left offcanvas" role="navigation">
-  <a class="navmenu-brand" href="#">Brand</a>
-  <ul class="nav navmenu-nav">
-    <li class="active"><a href="#">Home</a></li>
-    <li><a href="#">Link</a></li>
-    <li><a href="#">Link</a></li>
-  </ul>
-</nav>
-<div class="navbar navbar-default navbar-fixed-top">
-  <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
-    <span class="icon-bar"></span>
-    <span class="icon-bar"></span>
-    <span class="icon-bar"></span>
-  </button>
-</div>
-{% endhighlight %}
-
-    <div class="bs-callout bs-callout-info">
-      <h4>Examples</h4>
-      <p>For better understanding, have a look at the <a href="../examples/navmenu/">off canvas slide in menu</a>, <a href="../examples/navmenu-push/">off canvas push menu</a> and <a href="../examples/navmenu-reveal/">off canvas reveal menu</a> examples.</p>
-    </div>
-
-    <hr class="bs-docs-separator">
-
-    <h2 id="offcanvas-usage">Usage</h2>
-    <p>Add <code>.offcanvas</code> to hide an element. Alternatively add <code>.offcanvas-*</code> to hide an element up to a specific viewport width. Adding the <code>.offcanvas</code> class is not required. You may also hide an element by any other means.</p>
-    <p>The effect works best for elements positioned to the top, bottom, left or right of the window, either with absolute or fixed positioning.</p>
-    <p>When shown, the plugin adds <code>.canvas-slid</code> to the element that has slid.</p>
-
-    <h3>Via data attributes</h3>
-    <p>Add <code>data-toggle="offcanvas"</code> and a <code>data-target</code> to control, assigning it to show and hide the target element. The <code>data-target</code> attribute accepts a CSS selector to apply the collapse to.</p>
-    <p>Optionally add a <code>data-canvas</code> attribute to slide a canvas instead of only the target element. For a push menu set <code>data-canvas="body"</code>.
-
-    <h3>Via JavaScript</h3>
-    <p>Call the input mask via javascript:</p>
-{% highlight js %}
-$('.navmenu').offcanvas()
-{% endhighlight %}
-
-    <h3>Options</h3>
-    <table class="table table-bordered table-striped">
-      <thead>
-        <tr>
-          <th style="width: 100px;">Name</th>
-          <th style="width: 50px;">type</th>
-          <th style="width: 100px;">default</th>
-          <th>description</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>canvas</td>
-          <td>string</td>
-          <td>false</td>
-          <td>If set, the canvas will be moved on show and hide instead of the target element. This creates alternative effects.</td>
-        </tr>
-        <tr>
-          <td>toggle</td>
-          <td>boolean</td>
-          <td>true</td>
-          <td>Toggles the off canvas element on invocation</td>
-        </tr>
-        <tr>
-          <td>placement</td>
-          <td>string</td>
-          <td>'auto'</td>
-          <td>Where to position the element at the start of the animation. For example, if placement is "left", the element will slide from left to right. The default option "auto" guesses the placement based on position and dimension.</td>
-        </tr>
-        <tr>
-          <td>autohide</td>
-          <td>boolean</td>
-          <td>true</td>
-          <td>Hide the off canvas element if clicked anywhere other that the element.</td>
-        </tr>
-        <tr>
-          <td>recalc</td>
-          <td>boolean</td>
-          <td>true</td>
-          <td>Calculate if off canvas should be disabled for this viewport width on window resize. If your elements always gets hidden on window resize, try setting this to false.</td>
-        </tr>
-        <tr>
-          <td>exclude</td>
-          <td>string</td>
-          <td>null</td>
-          <td>Set css selectors for elements, that have fixed positioning and that should not be moved when showing\hiding menu.</td>
-        </tr>
-        <tr>
-          <td>disableScrolling</td>
-          <td>boolean</td>
-          <td>true</td>
-          <td>Disable scrolling when the off canvas element is shown, by setting overflow to hidden for the body.</td>
-        </tr>
-      </tbody>
-    </table>
-
-    <div class="bs-callout bs-callout-danger">
-      <h4>Graceful degradation</h4>
-      <p>For browsers that don't support transform (mainly IE8), the <code>target</code> option is ignored. In that case, the plugin will always slide the target element. In that case <code>.canvas-slid</code> will be added to the target element instead.</p>
-    </div>
-
-    <h3>Two menus on the page</h3>
-
-    <p>If there are two (or more) menus on the page, there can be only one opened at a time. When menu attempts to be opened, already opened one will be closed first. It's almost fully automated, accept that <code>data-exclude</code> option should be set for each menu, holding references to other menus. For example, if we have two menus <code>#menu-left</code> and <code>#menu-right</code>, then they should have the following option set, correspondingly: <code>data-exclude="#menu-right"</code> and <code>data-exclude="#menu-left"</code>.</p>
-
-    <h3>Methods</h3>
-    <h4>.offcanvas(options)</h4>
-    <p>Initializes the off canvas element with an optional options.</p>
-    <h4>.offcanvas('toggle')</h4>
-    <p>Toggles an off canvas element to shown or hidden.</p>
-    <h4>.offcanvas('show')</h4>
-    <p>Shows an off canvas element.</p>
-    <h4>.offcanvas('hide')</h4>
-    <p>Hides an off canvas element.</p>
-
-    <h3>Events</h3>
-    <div class="table-responsive">
-      <table class="table table-bordered table-striped">
-        <thead>
-          <tr>
-            <th style="width: 150px;">Event Type</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>show.bs.offcanvas</td>
-            <td>This event fires immediately when the show instance method is called.</td>
-          </tr>
-          <tr>
-            <td>shown.bs.offcanvas</td>
-            <td>This event is fired when the target has been made visible to the user (will wait for CSS transitions to complete).</td>
-          </tr>
-          <tr>
-            <td>hide.bs.offcanvas</td>
-            <td>This event is fired immediately when the hide instance method has been called.</td>
-          </tr>
-          <tr>
-            <td>hidden.bs.offcanvas</td>
-            <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
-          </tr>
-        </tbody>
-      </table>
-    </div><!-- ./bs-table-responsive -->
-  </div>
-
-
-  <!-- Row link
-  ================================================== -->
-  <div class="bs-docs-section bs-jasny">
-    <div class="page-header">
-      <h1 id="rowlink">Row link <small>rowlink.js</small></h1>
-    </div>
-
-    <h2 id="rowlink-examples">Example</h2>
-    <p>This plugin turns a table row into a clickable link.</p>
-    <div class="bs-example">
-      <table class="table table-striped table-bordered table-hover">
-        <thead>
-          <tr><th>Name</th><th>Description</th><th>Actions</th></tr>
-        </thead>
-        <tbody data-link="row" class="rowlink">
-          <tr><td><a href="#inputmask">Input mask</a></td><td>Input masks can be used to force the user to enter data conform a specific format.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
-          <tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
-          <tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
-        </tbody>
-      </table>
-    </div>
-    <div id="rowlinkModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
-      <div class="modal-dialog">
-        <div class="modal-content">
-          <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-            <h4 class="modal-title">Rowlink Modal</h4>
-          </div>
-          <div class="modal-body">
-            <p>This modal proves that JavaScript events are triggered correctly by rowlink.</p>
-          </div>
-        </div><!-- /.modal-content -->
-      </div><!-- /.modal-dialog -->
-    </div><!-- /.modal -->
-{% highlight html %}
-<table class="table table-striped table-bordered table-hover">
-  <thead>
-    <tr><th>Name</th><th>Description</th><th>Actions</th></tr>
-  </thead>
-  <tbody data-link="row" class="rowlink">
-    <tr><td><a href="#inputmask">Input mask</a></td><td>Input masks can be used to force the user to enter data conform a specific format.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
-    <tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
-    <tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
-  </tbody>
-</table>
-{% endhighlight %}
-
-    <hr class="bs-docs-separator">
-
-    <h2 id="rowlink-usage">Usage</h2>
-
-    <h3>Via data attributes</h3>
-    <p>Add class <code>.rowlink</code> and attribute <code>data-link="row"</code> to a <code>&lt;table&gt;</code> or <code>&lt;tbody&gt;</code> element. For other options append the name to <code>data-</code>, as in <code>data-target="a.mainlink"</code> A cell can be excluded by adding the <code>.rowlink-skip</code> class to the <code>&lt;td&gt;</code>.</p>
-
-    <h3>Via JavaScript</h3>
-    <p>Call the input mask via javascript:</p>
-{% highlight js %}
-$('tbody.rowlink').rowlink()
-{% endhighlight %}
-
-    <h3>Options</h3>
-    <table class="table table-bordered table-striped">
-      <thead>
-        <tr>
-          <th style="width: 100px;">Name</th>
-          <th style="width: 50px;">type</th>
-          <th style="width: 100px;">default</th>
-          <th>description</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>target</td>
-          <td>string</td>
-          <td>'a'</td>
-          <td>A jquery selector string, to select the link element within each row.</td>
-        </tr>
-      </tbody>
-    </table>
-
-    <h3>Methods</h3>
-    <h4>.rowlink(options)</h4>
-    <p>Makes the rows of a table or tbody clickable.</p>
-  </div>
-
-
-  <!-- Input mask
-  ================================================== -->
-  <div class="bs-docs-section bs-jasny">
-    <div class="page-header">
-      <h1 id="inputmask">Input mask <small>inputmask.js</small></h1>
-    </div>
-
-    <h2 id="inputmask-examples">Example</h2>
-    <p>Input masks can be used to force the user to enter data conform a specific format. Unlike validation, the user can't enter any other key than the ones specified by the mask.</p>
-
-    <div class="bs-example">
-      <input type="text" class="form-control" data-mask="999-99-999-9999-9" placeholder="ISBN">
-    </div>
-{% highlight html %}
-<input type="text" class="form-control" data-mask="999-99-999-9999-9" placeholder="ISBN">
-{% endhighlight %}
-
-    <hr class="bs-docs-separator">
-
-    <h2 id="inputmask-usage">Usage</h2>
-
-    <h3>Via data attributes</h3>
-    <p>Add data attributes to register an element with inputmask functionality as shown in the example above.</p>
-
-    <h3>Via JavaScript</h3>
-    <p>Call the input mask via javascript:</p>
-{% highlight js %}
-$('.inputmask').inputmask({
-  mask: '999-99-999-9999-9'
-})
-{% endhighlight %}
-
-    <h3>Options</h3>
-    <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-mask="999-99-999-9999-9"</code>.</p>
-
-    <div class="table-responsive">
-      <table class="table table-bordered table-striped">
-        <thead>
-          <tr>
-            <th style="width: 100px;">Name</th>
-            <th style="width: 50px;">type</th>
-            <th style="width: 100px;">default</th>
-            <th>description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>mask</td>
-            <td>string</td>
-            <td>''</td>
-            <td>A string of formatting and literal characters, defining the input mask (see below).</td>
-          </tr>
-          <tr>
-            <td>placeholder</td>
-            <td>string</td>
-            <td>'_'</td>
-            <td>The character that is displayed where something needs to be typed.</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <h3>Format</h3>
-    <p>Each typed character needs to match exactly one character in the <code>mask</code> option.</p>
-
-    <div class="table-responsive">
-      <table class="table table-bordered table-striped">
-        <thead>
-          <tr><th>Character</th><th>Description</th></tr>
-        </thead>
-        <tbody>
-          <tr><td>9</td><td>Number</td></tr>
-          <tr><td>a</td><td>Letter</td></tr>
-          <tr><td>w</td><td>Alphanumeric</td></tr>
-          <tr><td>*</td><td>Any character</td></tr>
-          <tr><td>?</td><td>Optional - any characters following will become optional</td></tr>
-        </tbody>
-      </table>
-    </div>
-
-    <h3>Methods</h3>
-
-    <h4>.inputmask(options)</h4>
-    <p>Initializes an input element with an input mask.</p>
-  </div>
-
-
-
-  <!-- File input
-  ================================================== -->
-  <div class="bs-docs-section bs-jasny">
-    <div class="page-header">
-      <h1 id="fileinput">File input <small>fileinput.js</small></h1>
-    </div>
-
-    <h2 id="fileinput-examples">Examples</h2>
-    <p>The file input plugin allows you to create a visually appealing file or image input widgets.</p>
-
-    <h3>File input widgets</h3>
-    <div class="bs-example">
-      <div class="fileinput fileinput-new input-group" data-provides="fileinput">
-        <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
-        <span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" multiple></span>
-        <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
-      </div>
-    </div>
-{% highlight html %}
-<div class="fileinput fileinput-new input-group" data-provides="fileinput">
-  <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
-  <span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" name="..." multiple></span>
-  <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
-</div>
-{% endhighlight %}
-
-    <div class="bs-example">
-      <div class="fileinput fileinput-new" data-provides="fileinput">
-        <span class="btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" multiple></span>
-        <span class="fileinput-filename"></span>
-        <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
-      </div>
-    </div>
-{% highlight html %}
-<div class="fileinput fileinput-new" data-provides="fileinput">
-  <span class="btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" name="..." multiple></span>
-  <span class="fileinput-filename"></span>
-  <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
-</div>
-{% endhighlight %}
-
-    <h3>Image upload widgets</h3>
-    <p>When uploading an image, it's possible to show a thumbnail instead of the filename.</p>
-    <div class="bs-example">
-      <div class="fileinput fileinput-new" data-provides="fileinput">
-        <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
-        <div>
-          <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file"></span>
-          <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
-        </div>
-      </div>
-    </div>
-{% highlight html %}
-<div class="fileinput fileinput-new" data-provides="fileinput">
-  <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
-  <div>
-    <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
-    <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
-  </div>
-</div>
-{% endhighlight %}
-
-    <div class="bs-example">
-      <div class="fileinput fileinput-new" data-provides="fileinput">
-        <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
-          <img data-src="holder.js/100%x100%" alt="Generic placeholder thumbnail" src="data:image/png;base64,">
-        </div>
-        <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
-        <div>
-          <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file"></span>
-          <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
-        </div>
-      </div>
-    </div>
-{% highlight html %}
-<div class="fileinput fileinput-new" data-provides="fileinput">
-  <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
-    <img data-src="holder.js/100%x100%" alt="...">
-  </div>
-  <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
-  <div>
-    <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
-    <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
-  </div>
-</div>
-{% endhighlight %}
-
-    <div class="bs-callout bs-callout-warning">
-      <p>Image preview only works in IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+. In older browsers the filename is shown instead.</p>
-    </div>
-
-    <hr class="bs-docs-separator">
-
-
-    <h2 id="fileinput-usage">Usage</h2>
-    <p>Add <code>.fileinput</code> to the container. Elements inside the container with <code>.fileinput-new</code> and <code>.fileinput-exists</code> are shown or hidden based on the current state. A preview of the selected file is placed in <code>.fileinput-preview</code>. The text of <code>.fileinput-filename</code> gets set to the name of the selected file.</p>
-
-    <p>Multiple file uploads can be handled by adding <code>multiple</code> attribute to file input element. Names of files are shown in name preview, joined by comma. In image preview only the first image is shown.</p>
-
-    <p>The file input widget should be placed in a regular <code>&lt;form&gt;</code> replacing a standard <code>&lt;input type="file"&gt;</code>. The server side code should handle the file upload as normal.</p>
-
-    <h3>Via data attributes</h3>
-    <p>Add <code>data-provides="fileinput"</code> to the <code>.fileinput</code> element. Implement a button to clear the file with <code>data-dismiss="fileinput"</code>. Add <code>data-trigger="fileinput"</code> to any element within the <code>.fileinput</code> widget to trigger the file dialog.</p>
-
-    <h3>Via JavaScript</h3>
-    <pre class="prettyprint linenums">$('.fileinput').fileinput()</pre>
-
-    <h3>Layout</h3>
-    <p>Using the given elements, you can layout the upload widget the way you want, either with a fixed <code>width</code> and <code>height</code> or with <code>max-width</code> and <code>max-height</code>.</p>
-
-    <h3>Options</h3>
-    <div class="table-responsive">
-      <table class="table table-bordered table-striped">
-        <thead>
-          <tr>
-            <th style="width: 100px;">Name</th>
-            <th style="width: 50px;">type</th>
-            <th>description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>name</td>
-            <td>string</td>
-            <td>Use this option instead of setting the <code>name</code> attribute on the <code>&lt;input&gt;</code> element to prevent it from being part of the post data when not changed.</td>
-          </tr>
-          <tr>
-            <td>clearName</td>
-            <td>boolean</td>
-            <td>Sets if file input name should be cleared when input is cleared. It's <code>true</code> by default, to tell the server the difference between pressing clear and submit without a change in a normal form.</td>
-          </tr>
-          <tr>
-            <td>maxSize</td>
-            <td>float</td>
-            <td>Use this option if you want to limit file upload size. It's in <code>MB</code> and should be set for <code>.fileinput</code> element. For ex. <code>data-max-size="3"</code> allows upload only for files with size <= 3MB. If several files are selected, and only one of them is greater then this option value, all files will be discarded. Event <code>max_size.bs.fileinput</code> is triggered on discard.</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <h3>Methods</h3>
-    <h4>.fileinput(options)</h4>
-    <p>Initializes a file upload widget.</p>
-    <h4>.fileinput('clear')</h4>
-    <p>Clear the selected file.</p>
-    <h4>.fileinput('reset')</h4>
-    <p>Reset the form element to the original value.</p>
-
-    <h3>Events</h3>
-    <div class="table-responsive">
-      <table class="table table-bordered table-striped">
-        <thead>
-          <tr>
-            <th style="width: 150px;">Event Type</th>
-            <th>Description</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>change.bs.fileinput</td>
-            <td>This event is fired after a file is selected.</td>
-          </tr>
-          <tr>
-            <td>clear.bs.fileinput</td>
-            <td>This event is fired when the file input is cleared.</td>
-          </tr>
-          <tr>
-            <td>reset.bs.fileinput</td>
-            <td>This event is fired before the file input is reset.</td>
-          </tr>
-          <tr>
-            <td>reseted.bs.fileinput</td>
-            <td>This event is fired after the file input is reset.</td>
-          </tr>
-          <tr>
-            <td>max_size.bs.fileinput</td>
-            <td>This event is fired, if at least one of selected files has size greater then <code>maxSize</code> option, before input is cleared.</td>
-          </tr>
-        </tbody>
-      </table>
-    </div><!-- ./bs-table-responsive -->
-  </div>
-

js/fileinput.js

@@ -1,5 +1,5 @@
 /* ===========================================================
- * Bootstrap: fileinput.js v3.1.3
+ * Bootstrap: fileinput.js v4.0.0
  * http://jasny.github.com/bootstrap/javascript/#fileinput
  * ===========================================================
  * Copyright 2012-2014 Arnold Daniels
@@ -176,15 +176,15 @@
   }
 
   Fileinput.prototype.getImageExif = function(view) {
-    if (view.getUint16(0, false) != 0xFFD8) { 
+    if (view.getUint16(0, false) != 0xFFD8) {
       return -2;
-    }    
+    }
     var length = view.byteLength, offset = 2;
     while (offset < length) {
       var marker = view.getUint16(offset, false);
           offset += 2;
       if (marker == 0xFFE1) {
-        if (view.getUint32(offset += 2, false) != 0x45786966) { 
+        if (view.getUint32(offset += 2, false) != 0x45786966) {
           return -1;
         }
         var little = view.getUint16(offset += 6, false) == 0x4949;
@@ -193,7 +193,7 @@
             offset += 2;
         for (var i = 0; i < tags; i++)   {
           if (view.getUint16(offset + (i * 12), little) == 0x0112) {
-            return view.getUint16(offset + (i * 12) + 8, little); 
+            return view.getUint16(offset + (i * 12) + 8, little);
           }
         }
       }
@@ -201,15 +201,15 @@
          break;
       } else {
         offset += view.getUint16(offset, false);
-      } 
+      }
     }
 
     return -1;
   }
 
   Fileinput.prototype.resetOrientation = function($img, transform) {
-  var img = new Image();    
-  
+  var img = new Image();
+
   img.onload = function() {
     var width = img.width,
         height = img.height,
@@ -224,7 +224,7 @@
       canvas.width = width;
       canvas.height = height;
     }
-    
+
     // transform context before drawing image
     switch (transform) {
       case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;

js/inputmask.js

@@ -1,363 +0,0 @@
-/* ===========================================================
- * Bootstrap: inputmask.js v3.1.0
- * http://jasny.github.io/bootstrap/javascript/#inputmask
- *
- * Based on Masked Input plugin by Josh Bush (digitalbush.com)
- * ===========================================================
- * Copyright 2012-2014 Arnold Daniels
- *
- * Licensed under the Apache License, Version 2.0 (the "License")
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ========================================================== */
-
-+function ($) { "use strict";
-
-  var isIphone = (window.orientation !== undefined)
-  var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1
-  var isIE = window.navigator.appName == 'Microsoft Internet Explorer'
-
-  // INPUTMASK PUBLIC CLASS DEFINITION
-  // =================================
-
-  var Inputmask = function (element, options) {
-    if (isAndroid) return // No support because caret positioning doesn't work on Android
-
-    this.$element = $(element)
-    this.options = $.extend({}, Inputmask.DEFAULTS, options)
-    this.mask = String(this.options.mask)
-
-    this.init()
-    this.listen()
-
-    this.checkVal() //Perform initial check for existing values
-  }
-
-  Inputmask.DEFAULTS = {
-    mask: "",
-    placeholder: "_",
-    definitions: {
-      '9': "[0-9]",
-      'a': "[A-Za-z]",
-      'w': "[A-Za-z0-9]",
-      'h': "[A-Fa-f0-9]",
-      '*': "."
-    }
-  }
-
-  Inputmask.prototype.init = function() {
-    var defs = this.options.definitions
-    var len = this.mask.length
-
-    this.tests = []
-    this.partialPosition = this.mask.length
-    this.firstNonMaskPos = null
-
-    $.each(this.mask.split(""), $.proxy(function(i, c) {
-      if (c == '?') {
-        len--
-        this.partialPosition = i
-      } else if (defs[c]) {
-        this.tests.push(new RegExp(defs[c]))
-        if (this.firstNonMaskPos === null)
-          this.firstNonMaskPos =  this.tests.length - 1
-      } else {
-        this.tests.push(null)
-      }
-    }, this))
-
-    this.buffer = $.map(this.mask.split(""), $.proxy(function(c, i) {
-      if (c != '?') return defs[c] ? this.options.placeholder : c
-    }, this))
-
-    this.focusText = this.$element.val()
-
-    this.$element.data("rawMaskFn", $.proxy(function() {
-      return $.map(this.buffer, function(c, i) {
-        return this.tests[i] && c != this.options.placeholder ? c : null
-      }).join('')
-    }, this))
-  }
-
-  Inputmask.prototype.listen = function() {
-    if (this.$element.attr("readonly")) return
-
-    var pasteEventName = (isIE ? 'paste' : 'input') + ".bs.inputmask"
-
-    this.$element
-      .on("unmask.bs.inputmask", $.proxy(this.unmask, this))
-
-      .on("focus.bs.inputmask", $.proxy(this.focusEvent, this))
-      .on("blur.bs.inputmask", $.proxy(this.blurEvent, this))
-
-      .on("keydown.bs.inputmask", $.proxy(this.keydownEvent, this))
-      .on("keypress.bs.inputmask", $.proxy(this.keypressEvent, this))
-
-      .on(pasteEventName, $.proxy(this.pasteEvent, this))
-  }
-
-  //Helper Function for Caret positioning
-  Inputmask.prototype.caret = function(begin, end) {
-    if (this.$element.length === 0) return
-    if (typeof begin == 'number') {
-      end = (typeof end == 'number') ? end : begin
-      return this.$element.each(function() {
-        if (this.setSelectionRange) {
-          this.setSelectionRange(begin, end)
-        } else if (this.createTextRange) {
-          var range = this.createTextRange()
-          range.collapse(true)
-          range.moveEnd('character', end)
-          range.moveStart('character', begin)
-          range.select()
-        }
-      })
-    } else {
-      if (this.$element[0].setSelectionRange) {
-        begin = this.$element[0].selectionStart
-        end = this.$element[0].selectionEnd
-      } else if (document.selection && document.selection.createRange) {
-        var range = document.selection.createRange()
-        begin = 0 - range.duplicate().moveStart('character', -100000)
-        end = begin + range.text.length
-      }
-      return {
-        begin: begin,
-        end: end
-      }
-    }
-  }
-
-  Inputmask.prototype.seekNext = function(pos) {
-    var len = this.mask.length
-    while (++pos <= len && !this.tests[pos]);
-
-    return pos
-  }
-
-  Inputmask.prototype.seekPrev = function(pos) {
-    while (--pos >= 0 && !this.tests[pos]);
-
-    return pos
-  }
-
-  Inputmask.prototype.shiftL = function(begin,end) {
-    var len = this.mask.length
-
-    if (begin < 0) return
-
-    for (var i = begin, j = this.seekNext(end); i < len; i++) {
-      if (this.tests[i]) {
-        if (j < len && this.tests[i].test(this.buffer[j])) {
-          this.buffer[i] = this.buffer[j]
-          this.buffer[j] = this.options.placeholder
-        } else
-          break
-        j = this.seekNext(j)
-      }
-    }
-    this.writeBuffer()
-    this.caret(Math.max(this.firstNonMaskPos, begin))
-  }
-
-  Inputmask.prototype.shiftR = function(pos) {
-    var len = this.mask.length
-
-    for (var i = pos, c = this.options.placeholder; i < len; i++) {
-      if (this.tests[i]) {
-        var j = this.seekNext(i)
-        var t = this.buffer[i]
-        this.buffer[i] = c
-        if (j < len && this.tests[j].test(t))
-          c = t
-        else
-          break
-      }
-    }
-  },
-
-  Inputmask.prototype.unmask = function() {
-    this.$element
-      .unbind(".bs.inputmask")
-      .removeData("bs.inputmask")
-  }
-
-  Inputmask.prototype.focusEvent = function() {
-    this.focusText = this.$element.val()
-    var len = this.mask.length
-    var pos = this.checkVal()
-    this.writeBuffer()
-
-    var that = this
-    var moveCaret = function() {
-      if (pos == len)
-        that.caret(0, pos)
-      else
-        that.caret(pos)
-    }
-
-    moveCaret()
-    setTimeout(moveCaret, 50)
-  }
-
-  Inputmask.prototype.blurEvent = function() {
-    this.checkVal()
-    if (this.$element.val() !== this.focusText) {
-      this.$element.trigger('change')
-      this.$element.trigger('input')
-    }
-  }
-
-  Inputmask.prototype.keydownEvent = function(e) {
-    var k = e.which
-
-    //backspace, delete, and escape get special treatment
-    if (k == 8 || k == 46 || (isIphone && k == 127)) {
-      var pos = this.caret(),
-      begin = pos.begin,
-      end = pos.end
-
-      if (end - begin === 0) {
-        begin = k != 46 ? this.seekPrev(begin) : (end = this.seekNext(begin - 1))
-        end = k == 46 ? this.seekNext(end) : end
-      }
-      this.clearBuffer(begin, end)
-      this.shiftL(begin, end - 1)
-
-      return false
-    } else if (k == 27) {//escape
-      this.$element.val(this.focusText)
-      this.caret(0, this.checkVal())
-      return false
-    }
-  }
-
-  Inputmask.prototype.keypressEvent = function(e) {
-    var len = this.mask.length
-
-    var k = e.which,
-    pos = this.caret()
-
-    if (e.ctrlKey || e.altKey || e.metaKey || k < 32)  {//Ignore
-      return true
-    } else if (k) {
-      if (pos.end - pos.begin !== 0) {
-        this.clearBuffer(pos.begin, pos.end)
-        this.shiftL(pos.begin, pos.end - 1)
-      }
-
-      var p = this.seekNext(pos.begin - 1)
-      if (p < len) {
-        var c = String.fromCharCode(k)
-        if (this.tests[p].test(c)) {
-          this.shiftR(p)
-          this.buffer[p] = c
-          this.writeBuffer()
-          var next = this.seekNext(p)
-          this.caret(next)
-        }
-      }
-      return false
-    }
-  }
-
-  Inputmask.prototype.pasteEvent = function() {
-    var that = this
-
-    setTimeout(function() {
-      that.caret(that.checkVal(true))
-    }, 0)
-  }
-
-  Inputmask.prototype.clearBuffer = function(start, end) {
-    var len = this.mask.length
-
-    for (var i = start; i < end && i < len; i++) {
-      if (this.tests[i])
-        this.buffer[i] = this.options.placeholder
-    }
-  }
-
-  Inputmask.prototype.writeBuffer = function() {
-    return this.$element.val(this.buffer.join('')).val()
-  }
-
-  Inputmask.prototype.checkVal = function(allow) {
-    var len = this.mask.length
-    //try to place characters where they belong
-    var test = this.$element.val()
-    var lastMatch = -1
-
-    for (var i = 0, pos = 0; i < len; i++) {
-      if (this.tests[i]) {
-        this.buffer[i] = this.options.placeholder
-        while (pos++ < test.length) {
-          var c = test.charAt(pos - 1)
-          if (this.tests[i].test(c)) {
-            this.buffer[i] = c
-            lastMatch = i
-            break
-          }
-        }
-        if (pos > test.length)
-          break
-      } else if (this.buffer[i] == test.charAt(pos) && i != this.partialPosition) {
-        pos++
-        lastMatch = i
-      }
-    }
-    if (!allow && lastMatch + 1 < this.partialPosition) {
-      this.$element.val("")
-      this.clearBuffer(0, len)
-    } else if (allow || lastMatch + 1 >= this.partialPosition) {
-      this.writeBuffer()
-      if (!allow) this.$element.val(this.$element.val().substring(0, lastMatch + 1))
-    }
-    return (this.partialPosition ? i : this.firstNonMaskPos)
-  }
-
-
-  // INPUTMASK PLUGIN DEFINITION
-  // ===========================
-
-  var old = $.fn.inputmask
-
-  $.fn.inputmask = function (options) {
-    return this.each(function () {
-      var $this = $(this)
-      var data = $this.data('bs.inputmask')
-
-      if (!data) $this.data('bs.inputmask', (data = new Inputmask(this, options)))
-    })
-  }
-
-  $.fn.inputmask.Constructor = Inputmask
-
-
-  // INPUTMASK NO CONFLICT
-  // ====================
-
-  $.fn.inputmask.noConflict = function () {
-    $.fn.inputmask = old
-    return this
-  }
-
-
-  // INPUTMASK DATA-API
-  // ==================
-
-  $(document).on('focus.bs.inputmask.data-api', '[data-mask]', function (e) {
-    var $this = $(this)
-    if ($this.data('bs.inputmask')) return
-    $this.inputmask($this.data())
-  })
-
-}(window.jQuery);

js/offcanvas.js

@@ -1,5 +1,5 @@
 /* ========================================================================
- * Bootstrap: offcanvas.js v3.1.3
+ * Bootstrap: offcanvas.js v4.0.0
  * http://jasny.github.io/bootstrap/javascript/#offcanvas
  * ========================================================================
  * Copyright 2013-2014 Arnold Daniels
@@ -17,7 +17,7 @@
  * limitations under the License.
  * ======================================================================== */
 
-+function ($) { "use strict";
++function ($) { "use strict"
 
   // OFFCANVAS PUBLIC CLASS DEFINITION
   // =================================
@@ -38,7 +38,7 @@
     if (this.options.autohide && !this.options.modal) {
       var eventName = (navigator.userAgent.match(/(iPad|iPhone)/i) === null) ? 'click' : 'touchstart'
       $(document).on('click touchstart', $.proxy(this.autohide, this))
-    }   
+    }
 
     // Backdrop is added to dropdown on it's open, if device is touchable (or desctop FF, https://github.com/twbs/bootstrap/issues/13748)
     // and dropdown is not inside .navbar-nav. So we remove it
@@ -50,7 +50,7 @@
         this.options.disableScrolling = this.options.disablescrolling
         delete this.options.disablescrolling
     }
-    
+
     if (this.options.toggle) this.toggle()
   }
 
@@ -61,6 +61,7 @@
     recalc: true,
     disableScrolling: true,
     modal: false,
+    backdrop: false,
     exclude: null
   }
 
@@ -171,7 +172,7 @@
     $('body').css('overflow', 'hidden')
     //Fix iPhone scrolling
     if (isIphone) {
-      $('body').addClass('lockIphone');
+      $('body').addClass('lockIphone')
     }
 
     if ($('body').width() > bodyWidth) {
@@ -184,13 +185,13 @@
     //disable scrolling on mobiles (they ignore overflow:hidden)
     $('body').on('touchmove.bs', function(e) {
       if (!$(event.target).closest('.offcanvas').length)
-        e.preventDefault();
-    });
+        e.preventDefault()
+    })
   }
 
   OffCanvas.prototype.enableScrolling = function() {
-    $('body').off('touchmove.bs');
-    $('body').removeClass('lockIphone');
+    $('body').off('touchmove.bs')
+    $('body').removeClass('lockIphone')
   }
 
   OffCanvas.prototype.show = function () {
@@ -214,7 +215,7 @@
       if (elements.index(this.$element) !== -1) {
         $(this.$element).data('offcanvas-style', $(this.$element).attr('style') || '')
         this.$element.css(placement, -1 * offset)
-        this.$element.css(placement); // Workaround: Need to get the CSS property for it to be applied before the next line of code
+        this.$element.css(placement) // Workaround: Need to get the CSS property for it to be applied before the next line of code
       }
 
       elements.addClass('canvas-sliding').each(function() {
@@ -243,7 +244,7 @@
         this.$element.addClass('in')
         this.slide(elements, offset, $.proxy(complete, this))
       }, this), 1)
-    }, this));
+    }, this))
   }
 
   //Hide other opened offcanvas menus, and then open this one
@@ -318,13 +319,14 @@
     var time = 150
 
     if (this.state == 'slide-in') {
+      var $body = $('body')
       var doAnimate = $.support.transition
 
       this.$backdrop = $('<div class="modal-backdrop fade" />')
       if (this.options.backdrop) {
         this.$backdrop.addClass('allow-navbar')
 
-        if (this.options.canvas && $(this.options.canvas)[0] !== $('body')[0]) {
+        if (this.options.canvas && $(this.options.canvas)[0] !== $body[0]) {
           $(this.options.canvas).addClass('limit-backdrop')
           this.$backdrop.appendTo(this.options.canvas)
         } else {
@@ -336,7 +338,8 @@
 
       if (doAnimate) this.$backdrop[0].offsetWidth // force reflow
 
-      this.$backdrop.addClass('in')
+      $body.addClass('modal-open')
+      this.$backdrop.addClass('show').show()
       this.$backdrop.on('click.bs', $.proxy(this.autohide, this))
 
       doAnimate ?
@@ -345,21 +348,23 @@
         .emulateTransitionEnd(time) :
         callback()
     } else if (this.state == 'slide-out' && this.$backdrop) {
-      this.$backdrop.removeClass('in');
-      $('body').off('touchmove.bs');
-      var self = this;
+      var self = this
+
+      this.$backdrop.hide().removeClass('show')
+      $('body').removeClass('modal-open').off('touchmove.bs')
+
       if ($.support.transition) {
         this.$backdrop
           .one($.support.transition.end, function() {
-            self.$backdrop.remove();
+            self.$backdrop.remove()
             callback()
-            self.$backdrop = null;
+            self.$backdrop = null
           })
-        .emulateTransitionEnd(time);
+        .emulateTransitionEnd(time)
       } else {
-        this.$backdrop.remove();
-        this.$backdrop = null;
-        callback();
+        this.$backdrop.remove()
+        this.$backdrop = null
+        callback()
       }
 
       if (this.options.canvas && $(this.options.canvas)[0] !== $('body')[0]) {
@@ -408,9 +413,10 @@
   }
 
   OffCanvas.prototype.autohide = function (e) {
-    if ($(e.target).closest(this.$element).length === 0) this.hide()
-    var target = $(e.target);
-    if (!target.hasClass('dropdown-backdrop') && $(e.target).closest(this.$element).length === 0) this.hide()
+    var $target = $(e.target)
+    var doHide = !$target.hasClass('dropdown-backdrop') && $target.closest(this.$element).length === 0
+
+    if (doHide) this.hide()
   }
 
   // OFFCANVAS PLUGIN DEFINITION
@@ -424,6 +430,10 @@
       var data    = $this.data('bs.offcanvas')
       var options = $.extend({}, OffCanvas.DEFAULTS, $this.data(), typeof option === 'object' && option)
 
+      //In case if user does smth like $('.navmenu-fixed-left').offcanvas('hide'),
+      //thus selecting also menu clone (that can cause issues)
+      if ($this.hasClass('offcanvas-clone')) return
+
       if (!data) $this.data('bs.offcanvas', (data = new OffCanvas(this, options)))
       if (typeof option === 'string') data[option]()
     })
@@ -450,13 +460,13 @@
         || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
     var $canvas = $(target)
     var data    = $canvas.data('bs.offcanvas')
-    var option  = data ? 'toggle' : $this.data()
+    var option = data ? 'toggle' : $.extend($this.data(), $canvas.data())
 
-    e.preventDefault();
+    e.preventDefault()
     e.stopPropagation()
 
     if (data) data.toggle()
       else $canvas.offcanvas(option)
   })
 
-}(window.jQuery);
+}(window.jQuery)

js/rowlink.js

@@ -1,5 +1,5 @@
 /* ============================================================
- * Bootstrap: rowlink.js v3.1.3
+ * Bootstrap: rowlink.js v4.0.0
  * http://jasny.github.io/bootstrap/javascript/#rowlink
  * ============================================================
  * Copyright 2012-2014 Arnold Daniels

js/tests/unit/inputmask.js

@@ -1,81 +0,0 @@
-$(function () {
-
-      var $input;
-
-      module('inputmask', {
-        setup : function() {
-          $input = $('<input type="text">').appendTo(document.body);
-          $input.removeData('inputmask');
-        }
-      })
-
-      test('should provide no conflict', function () {
-        var inputmask = $.fn.inputmask.noConflict()
-        ok(!$.fn.inputmask, 'inputmask was set back to undefined (org value)')
-        $.fn.inputmask = inputmask
-      })
-
-      test('should be defined on jquery object', function () {
-        ok($input.inputmask, 'inputmask method is defined')
-      })
-
-      test('should return element', function () {
-        ok($input.inputmask()[0] == $input[0], 'input returned')
-      })
-
-      test('should use default mask', function() {
-        var expected = ""
-        $.fn.inputmask.Constructor.DEFAULTS.mask = expected
-
-        $input.inputmask()
-
-        equal(expected, $input.data('bs.inputmask').options.mask)
-      })
-
-      test('should use default placeholder', function() {
-        var expected = "_"
-        $.fn.inputmask.Constructor.DEFAULTS.placeholder = expected
-
-        $input.inputmask()
-
-        equal(expected, $input.data('bs.inputmask').options.placeholder)
-      })
-
-      test('should use default definitions', function() {
-        var expected = {
-          '0': "[0-9]",
-          'A': "[A-Za-z]"
-        }
-        $.fn.inputmask.Constructor.DEFAULTS.definitions = expected
-
-        $input.inputmask()
-
-        deepEqual(expected, $input.data('bs.inputmask').options.definitions)
-      })
-
-      test('should override mask when options.mask provided', function() {
-        var expected = '99-99';
-        $input.inputmask({ mask: expected})
-
-        equal(expected, $input.data('bs.inputmask').options.mask)
-      })
-
-      test('should override placeholder when options.placeholder provided', function() {
-          var expected = '-';
-          $input.inputmask({ placeholder: expected})
-
-          equal(expected, $input.data('bs.inputmask').options.placeholder)
-      })
-
-      test('should override definitions when options.definitions provided', function() {
-        var expected = {
-          '0': "[0-9]",
-          'A': "[A-Za-z]"
-        }
-
-        $input.inputmask({definitions: expected})
-
-        deepEqual(expected, $input.data('bs.inputmask').options.definitions)
-      })
-      // TODO: add inputmask tests
-})

js/transition.js

@@ -1,5 +1,5 @@
 /* ========================================================================
- * Bootstrap: transition.js v3.1.3
+ * Bootstrap: transition.js v4.0.0
  * http://getbootstrap.com/javascript/#transitions
  * ========================================================================
  * Copyright 2011-2014 Twitter, Inc.

less/button-labels.less

@@ -2,7 +2,7 @@
 // --------------------------------------------------
 
 .button-label-size(@padding-vertical; @padding-horizontal; @border-radius) {
-  padding: @padding-vertical @padding-horizontal;
+  padding: (@padding-vertical - 1px) @padding-horizontal (@padding-vertical + 1px) @padding-horizontal;
   left: (-1 * @padding-horizontal);
   border-radius: (@border-radius - 1px) 0 0 (@border-radius - 1px);
 

less/fileinput.less

@@ -37,7 +37,7 @@
     vertical-align: middle;
     cursor: text;
   }
-  .thumbnail {
+  .img-thumbnail {
     overflow: hidden;
     display: inline-block;
     margin-bottom: 5px;
@@ -45,6 +45,11 @@
     text-align: center;
     > img {
       max-height: 100%;
+      max-width: 100%;
+      height: auto;
+      margin-right: auto;
+      margin-left: auto;
+      display: block;
     }
   }
   .btn {
@@ -88,11 +93,15 @@
   max-width: 100%;
   position: absolute;
   left: 0;
+  padding-left: 10px;
+}
+
+.form-control .fileinput-filename.with-icon {
   padding-left: 30px;
 }
 
 .fileinput.input-group {
-    display: table;
+    display: flex;
 
     > * {
         position: relative;
@@ -103,25 +112,16 @@
     }
 }
 
-// Not 100% correct, but helps in typical use case
-.fileinput-new.input-group .btn-file,
-.fileinput-new .input-group .btn-file {
-  border-radius: 0 @border-radius-base @border-radius-base 0;
-
-  &.btn-xs,
-  &.btn-sm {
-    border-radius: 0 @border-radius-small @border-radius-small 0;
-  }
-  &.btn-lg {
-    border-radius: 0 @border-radius-large @border-radius-large 0;
-  }
+.fileinput .input-group-append .input-group-text:hover {
+  background: #d9dcdf;
+  cursor: pointer;
 }
 
 .form-group.has-warning .fileinput {
   .fileinput-preview {
     color: @state-warning-text;
   }
-  .thumbnail {
+  .img-thumbnail {
     border-color: @state-warning-border;
   }
 }
@@ -129,7 +129,7 @@
   .fileinput-preview {
     color: @state-danger-text;
   }
-  .thumbnail {
+  .img-thumbnail {
     border-color: @state-danger-border;
   }
 }
@@ -137,7 +137,7 @@
   .fileinput-preview {
     color: @state-success-text;
   }
-  .thumbnail {
+  .img-thumbnail {
     border-color: @state-success-border;
   }
 }

less/navmenu.less

@@ -40,6 +40,24 @@
   overflow-y: auto;
   border-radius: 0;
 }
+
+.navmenu-fixed-left,
+.navmenu-fixed-right {
+  .dropdown .dropdown-menu {
+    position: static !important;
+    float: none;
+    transform: none !important;
+    background: rgba(0, 0, 0, .02);
+    border-left: none;
+    border-right: none;
+    border-radius: 0;
+
+    .nav-link {
+      padding: .35rem 1rem .35rem 1.3rem;
+    }
+  }
+}
+
 .navmenu-fixed-left,
 .navbar-offcanvas.navmenu-fixed-left {
   left: 0;
@@ -57,7 +75,8 @@
   margin-bottom: @navmenu-margin-vertical;
 
   &.dropdown-menu {
-    position: static;
+    position: static!important;
+    transform: none!important;
     margin: 0;
     padding-top: 0;
     float: none;

less/offcanvas.less

@@ -6,6 +6,20 @@
   &.in {
     display: block;
   }
+
+  .dropdown .dropdown-menu {
+    position: static !important;
+    float: none;
+    transform: none !important;
+    background: rgba(0, 0, 0, .02);
+    border-left: none;
+    border-right: none;
+    border-radius: 0;
+
+    .nav-link {
+      padding: .35rem 1rem .35rem 1.3rem;
+    }
+  }
 }
 
 @media (max-width: @screen-xs-max) {

less/variables.less

@@ -5,7 +5,7 @@
 //  "default-variables.less" should be loaded before this file.
 // -------------------------------------------------------------
 
-@zindex-navmenu-fixed:     @zindex-modal;
+@zindex-navmenu-fixed:     (@zindex-modal + 1);
 @zindex-alert-fixed:       1035;
 
 @container-smooth:         @container-lg;

package.js

@@ -2,7 +2,7 @@
 
 Package.describe({
   name: 'jasny:bootstrap',  // http://atmospherejs.com/jasny/bootstrap
-  version: '3.1.3',
+  version: '4.0.0',
   summary: 'Jasny Bootstrap (official): The missing components for your favorite front-end framework.',
   git: 'https://github.com/jasny/bootstrap.git',
   documentation: 'README.md'

package.json

@@ -1,7 +1,8 @@
 {
   "name": "jasny-bootstrap",
+  "npmName": "jasny-bootstrap",
   "description": "Additional features and components for Bootstrap",
-  "version": "3.2.0",
+  "version": "4.0.0",
   "main": "./dist/js/jasny-bootstrap.js",
   "keywords": [
     "bootstrap",
@@ -64,5 +65,13 @@
     "buildConfig": {
       "uglify": true
     }
-  }
+  },
+  "npmFileMap": [
+    {
+      "basePath": "dist",
+      "files": [
+        "**/*"
+      ]
+    }
+  ]
 }