Getting started

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.

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.

Install with Bower

Install and manage the original files for all CSS and JavaScript, along with a local copy of the docs, using Bower.

$ bower install jasny-bootstrap

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/3.1.3/css/jasny-bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/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.

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. Consult our bower.json to see which versions of jQuery are supported.

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>

Create diverse and advanced user interfaces using Jasny's Bootstrap components. See also Customizing Bootstrap for tips on maintaining your own Bootstrap variants.

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.

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.

Jasny Bootstrap