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 jasn-bootstrap.min.js).

The Jasny Bootstrap plugins work with or without loading Twitter 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
})

Example

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 intented to be used for off canvas navigation, like push menus.

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.

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

Examples

For better understanding, have a look at the off canvas slide in menu, off canvas push menu and off canvas reveal menu exapmles.


Usage

Add .offcanvas to hide an element. Alternatively add .offcanvas-* to hide an element up to a specific viewport width. Adding the .offcanvas class is not required. You may also hide an element by any other means.

The effect works best for elements positioned to the top, bottom, left or right of the window, either with absolute or fixed positioning.

When shown, the plugin adds .canvas-slid to the element that has slid.

Via data attributes

Add data-toggle="offcanvas" and a data-target to control, assigning it to show and hide the target element. The data-target attribute accepts a CSS selector to apply the collapse to.

Optionally add a data-canvas attribute to slide a canvas instead of only the target element. For a push menu set data-canvas="body".

Via JavaScript

Call the input mask via javascript:

$('.navmenu').offcanvas()

Options

Name type default description
canvas string false If set, the canvas will be moved on show and hide instead of the target element. This creates alternative effects.
toggle boolean true Toggles the off canvas element on invocation
placement string 'auto' 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.
autohide boolean true Hide the off canvas element if clicked anywhere other that the element.
recalc boolean true 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.
disableScrolling boolean true Disable scrolling when the off canvas element is shown, by setting overflow to hidden for the body.

Graceful degradation

For browsers that don't support transform (mainly IE8), the target option is ignored. In that case, the plugin will always slide the target element. In that case .canvas-slid will be added to the target element instead.

Methods

.offcanvas(options)

Initializes the off canvas element with an optional options.

.offcanvas('toggle')

Toggles an off canvas element to shown or hidden.

.offcanvas('show')

Shows an off canvas element.

.offcanvas('hide')

Hides an off canvas element.

Events

Event Type Description
show.bs.offcanvas This event fires immediately when the show instance method is called.
shown.bs.offcanvas This event is fired when the target has been made visible to the user (will wait for CSS transitions to complete).
hide.bs.offcanvas This event is fired immediately when the hide instance method has been called.
hidden.bs.offcanvas This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

This plugin turns a table row into a clickable link.

NameDescriptionActions
Input maskInput masks can be used to force the user to enter data conform a specific format.
jasny.netShared knowledge of Arnold Daniels aka Jasny.
Launch modalToggle a modal via JavaScript by clicking this row.
<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>

Via data attributes

Add class .rowlink and attribute data-link="row" to a <table> or <tbody> element. For other options append the name to data-, as in data-target="a.mainlink" A cell can be excluded by adding the .rowlink-skip class to the <td>.

Via JavaScript

Call the input mask via javascript:

$('tbody.rowlink').rowlink()

Options

Name type default description
target string 'a' A jquery selector string, to select the link element within each row.

Methods

.rowlink(options)

Makes the rows of a table or tbody clickable.

Example

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.

<input type="text" class="form-control" data-mask="999-99-999-9999-9" placeholder="ISBN">

Usage

Via data attributes

Add data attributes to register an element with inputmask functionality as shown in the example above.

Via JavaScript

Call the input mask via javascript:

$('.inputmask').inputmask({
  mask: '999-99-999-9999-9'
})

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-mask="999-99-999-9999-9".

Name type default description
mask string '' A string of formatting and literal characters, defining the input mask (see below).
placeholder string '_' The character that is displayed where something needs to be typed.

Format

Each typed character needs to match exactly one character in the mask option.

CharacterDescription
9Number
aLetter
wAlphanumeric
*Any character
?Optional - any characters following will become optional

Methods

.inputmask(options)

Initializes an input element with an input mask.

Examples

The file input plugin allows you to create a visually appealing file or image input widgets.

File input widgets

Select fileChange Remove
<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="..."></span>
  <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
</div>
Select fileChange ×
<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="..."></span>
  <span class="fileinput-filename"></span>
  <a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">&times;</a>
</div>

Image upload widgets

When uploading an image, it's possible to show a thumbnail instead of the filename.

Select imageChange Remove
<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>
Generic placeholder thumbnail
Select imageChange Remove
<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>

Image preview only works in IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+. In older browsers the filename is shown instead.


Usage

Add .fileinput to the container. Elements inside the container with .fileinput-new and .fileinput-exists are shown or hidden based on the current state. A preview of the selected file is placed in .fileinput-preview. The text of .fileinput-filename gets set to the name of the selected file.

The file input widget should be placed in a regular <form> replacing a standard <input type="file">. The server side code should handle the file upload as normal.

Via data attributes

Add data-provides="fileinput" to the .fileinput element. Implement a button to clear the file with data-dismiss="fileinput". Add data-trigger="fileinput" to any element within the .fileinput widget to trigger the file dialog.

Via JavaScript

$('.fileinput').fileinput()

Layout

Using the given elements, you can layout the upload widget the way you want, either with a fixed width and height or with max-width and max-height.

Options

Name type description
name string Use this option instead of setting the name attribute on the <input> element to prevent it from being part of the post data when not changed.

Methods

.fileinput(options)

Initializes a file upload widget.

.fileinput('clear')

Clear the selected file.

.fileinput('reset')

Reset the form element to the original value.

Events

Event Type Description
change.bs.fileinput This event is fired after a file is selected.
clear.bs.fileinput This event is fired when the file input is cleared.
reset.bs.fileinput This event is fired when the file input is reset.