--- layout: default title: Getting started slug: getting-started lead: "An overview of Jasny Bootstrap, how to download and use, basic templates and examples, and more." base_url: "../" ---

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.

{% highlight html %} {% endhighlight %}

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:

{% highlight bash %} jasny-bootstrap/ ├── css/ │ ├── jasny-bootstrap.css │ ├── jasny-bootstrap.min.css └── js/ ├── jasny-bootstrap.js └── jasny-bootstrap.min.js {% endhighlight %}

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.

{% highlight html %} Bootstrap 101 Template

Hello, world!

{% endhighlight %}

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: {% highlight js %} $(document).off('.data-api') {% endhighlight %}

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

{% highlight js %} $(document).off('.alert.data-api') {% endhighlight %}

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.

{% highlight js %} $(".fileinput").fileinput().addClass("fat") {% endhighlight %}

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

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

{% endhighlight %}

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.

{% highlight js %} var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value $.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality {% endhighlight %}

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.

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

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.

What's removed

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:

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