Jasny Bootstrap

Jasny Bootstrap is an extension to vanilla Bootstrap, adding a number of features and components.

The aim of Jasny Bootstrap is to provide all the required features for building highly interactive web applications for desktop and mobile.

Delivered as extension only

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.

Download

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.

Compiled CSS and JS

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.

Download Jasny Bootstrap

Additional downloads

Download source code

Get the latest Jasny Bootstrap LESS and JavaScript source code by downloading it directly from GitHub.

Clone or fork via GitHub

Visit us on GitHub to clone or fork the Jasny Bootstrap project.

Jasny Bootstrap @ cdnjs

CDNJS is a community driven CDN hosted by CloudFlare, supporting over a hundred projects. To use this CDN, swap your local instances for the CDN links listed below.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/4.0.0/css/jasny-bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/4.0.0/js/jasny-bootstrap.min.js"></script>

Compiling Jasny Bootstrap's LESS files

If you work with Jasny Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support Recess, which is Twitter's CSS hinter based on less.js.

What's included

Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.

Once downloaded, unzip the compressed folder to see the structure of (the compiled) Jasny Bootstrap. You'll see something like this:

jasny-bootstrap/
├── css/
│   ├── jasny-bootstrap.css
│   ├── jasny-bootstrap.min.css
└── js/
    ├── jasny-bootstrap.js
    └── jasny-bootstrap.min.js

This is the most basic form of Jasny Bootstrap. We provide compiled CSS and JS (jasny-bootstrap.*), as well as compiled and minified CSS and JS (jasny-bootstrap.min.*).

The jasny-bootstrap.* files should be loaded in conjunction with the original vanilla Bootstrap files.

jQuery required

Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template.

Basic template

Start with this basic HTML template, or modify these examples. We hope you'll customize our templates and examples, adapting them to suit your needs.

Copy the HTML below to begin working with a minimal Bootstrap document.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/jasny-bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jasny-bootstrap.min.js"></script>
  </body>
</html>

Plugins

Individual or compiled

Plugins can be included individually (using Jasny Bootstrap's individual *.js files), or all at once (using jasny-bootstrap.js or the minified jasny-bootstrap.min.js).

The Jasny Bootstrap plugins work with or without loading vanilla Bootstrap's bootstrap.js.

Do not attempt to include both.

Both jasny-bootstrap.js and jasny-bootstrap.min.js contain all plugins in a single file.

Data attributes

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.

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 data-api. This looks like this: 

$(document).off('.data-api')

Alternatively, to target a specific plugin, just include the plugin's name as a namespace along with the data-api namespace like this:

$(document).off('.alert.data-api')

Programmatic API

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.

$(".fileinput").fileinput().addClass("fat")

All methods should accept an optional options object, a string which targets a particular method, or nothing (which initiates a plugin with default behavior):

$("#myMenu").offcanvas()                      // initialized with defaults
$("#myMenu").offcanvas({ autohide: false })   // initialized with no autohide
$("#myMenu").offcanvas('show')                // initializes and invokes show immediately</p>

Each plugin also exposes its raw constructor on a Constructor property: $.fn.popover.Offcanvas. If you'd like to get a particular plugin instance, retrieve it directly from an element: $('.navmenu').data('offcanvas').

No conflict

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 .noConflict on the plugin you wish to revert the value of.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

Events

Bootstrap provides custom events for most plugin's unique actions. Generally, these come in an infinitive and past participle form - where the infinitive (ex. show) is triggered at the start of an event, and its past participle form (ex. shown) is trigger on the completion of an action.

As of 3.1.2, all Bootstrap events are namespaced.

All infinitive events provide preventDefault functionality. This provides the ability to stop the execution of an action before it starts.

$('#myMenu').on('show.bs.offcanvas', function (e) {
  if (!data) return e.preventDefault() // stops menu from being shown
})

Containers

Added .container-smooth a container to use the same max-width for all viewport sizes. This means that the container size won't jump at media query breakpoints.

Examples

Create diverse and advanced user interfaces using Jasny's Bootstrap components.

Starter template

Nothing but the basics: compiled CSS and JavaScript along with a container.

Navmenu

A basic template showing the navmenu element and demonstrates usage of the offcanvas plugin.

Off Canvas Push Menu

A template demonstrating a push effect for the off canvas navmenu.

Off Canvas Reveal Menu

A template demonstrating a reveal effect by placing the navmenu under the content.

Off canvas navbar

A template using offcanvas for mobile view of the navbar.

Migrating from 3.x to 4.0

There are not many changes in this migration, as it mostly deals with moving to Bootstrap 4 support.

Major class changes

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.

  • Introduced .nav-item, .nav-link, .flex-column classes, that are used in nav-menu.
  • .navbar-fixed-top is changed to .fixed-top.

What's removed

  • Starting from this version Jasny Bootstrap is no longer published on Bower.
  • Inputmask plugin has been removed.
  • Removed variables customization page in documentation.
  • By default file icon is removed from file input, though it can be easily added. See Fielinput examples.
  • As Glyphicons were excluded from Bootstrap 4 bundle, icons now should be explicitly loaded to be used. For button labels we switched to Font Awasome icons. For them to work, you should include the link to them on the page, like the following: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Migrating from 2.x to 3.0

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.

Major class changes

This table shows the style changes between v2.x and v3.0.

Bootstrap 2.x Bootstrap 3.0
.container-semifluid .container-smooth
.fileupload .fileupload-* .fileinput .fileinput-*

What's new

We've added new elements and changed some existing ones. Here are the new or updated styles.

Element Description
Navmenu .navmenu .navmenu-default .navmenu .navmenu-inverse .navmenu-fixed-left .navmenu-fixed-right .navmenu-brand .navmenu-nav
Fixed alerts .alert-fixed-top .alert-fixed-bottom
Off canvas .offcanvas .offcanvas-*

What's removed

The following elements have been dropped or changed in v3.0.

Element Removed from 2.x 3.0 Equivalent
Header actions .header-actions N/A
Table actions .table-actions N/A
Desktop rows .row-desktop .row > .col-md-*
Action links .act-* N/A
Page alerts .pagealert .alert-fixed-top
Iconic icons .iconic-* N/A
Editor textarea .editor N/A

Additional notes

Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach. Here's a partial list:

  • 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.
  • Tab alignments are still supported in this fork (while dropped in vanilla Bootstrap).
  • Typeahead has been dropped, in favor of using Selectize.js.
  • Iconic icons are still available from P.J. Onori.

For more information on upgrading to v3.0, and code snippets from the community, see Bootply.