Best jQuery Bootstrap Plugins & Tutorials with Demo

bselect : Select decorator component for Bootstrap

bselect : Select decorator component for Bootstrap

The select decorator component that was missing for Twitter Bootstrap.

Features:

  • Bootstrap-like dropdown decorator for <select> elements
  • Easy to use, a simple jQuery call and you’re done!
  • Doesn’t require any Bootstrap CSS or JS to work
  • Tested via QUnit
  • Support for internationalization
  • ARIA ready

Bootstrap video player – jQuery plugin

Bootstrap video player - jQuery plugin

A customizable HTML5 video player plugin for jQuery based on bootstrap UI.

Features:

– easy to Customize with css
– support multiple videos in one page
– simple use of HTML5 video tag
– show pause/play button
– show progress bar
– show video timer
– show & set volume value 1..10
– enable full screen button
– enable auto hide control bar
– enable auto play

Bootstrap Tour : Quick and easy product tours with jQuery

Bootstrap Tour : Quick and easy product tours with jQuery

Quick and easy way to build your product tours with Twitter Bootstrap Popovers.This library does not depend on the full Bootstrap package. The only dependencies are the tooltip and popover files.Bootstrap Tour saves the current step and will not display the tour again to users who have already completed it.

Alpaca : Easy Forms for jQuery

Alpaca : Easy Forms for jQuery

Alpaca generates forms on-the-fly using JSON schema and configuration to define object models, types, properties, validation logic and layout. Alpaca generates intuitive forms while giving your business the assurance of data compliance.

The Alpaca library is pre-packaged with controls, wizards, layouts, I18N support and pluggable template engines for EJS, Handlerbars and jQuery.tmpl. API Documentation is provided so that you can extend Alpaca as you see fit.

Alpaca helps you to separate your data from your presentation. Design your forms once and have them work across different devices and UI engines without any additional coding.

jQuery Iconpicker for Bootstrap 3.0

jQuery Iconpicker for Bootstrap 3.0

A jQuery plugin to pick popular icon fonts like fontawesome and glyphicon for bootstrap 3.0.

Open JS Grid : Easiest jQuery Grid

Open JS Grid : Easiest jQuery Grid

OpenJS Grid is the easiest jQuery Grid ever. With very little work you can have a data grid that can do everything from sorting and searching to complex database queries. Best of all, its open source. So you can learn how it’s all done.

OpenJS Grid provides a super easy / powerful way to give customers access to data. I do all the database work for you, so you don’t have to figure out searching and sorting, as well as give you cool stuff like events and cell types so you can customize to fit your need. And now with Stylus and Bootstrap, you can easily restyle the grid to your liking.

jQuery Bootstrap-style Dropdowns

jQuery Bootstrap-style Dropdowns

One of my favorite Boostrap plugins is dropdowns, but I had a bit of difficulty getting started with them. The docs say you can apply a dropdown to nearly any element, but they really seem to work best with Bootstrap’s navbar, tab, and pill components. Since I was retrofitting an app that was around long before Bootstrap, this wasn’t going to work for me. That and I was hoping to get a scrollable dropdown (with tips!) and a few other features out of the deal. Thus, this plugin was born.

While the appearance of these dropdowns is almost identical to those of Bootstrap’s, it’s important to note that JavaScript for this plugin was developed entirely from scratch. Some CSS was borrowed, however, especially for generating those gorgeous tips.

Bootstrap popover for jQuery validate

Bootstrap popover for jQuery validate

Show error message via bootstrap popover for jquery validate.

Supported options are:

  • popoverPosition Supported values: ‘right’, ‘top’; default to ‘right’
  • popoverContainer The container popover message will append to, default: ‘body’
  • beforeShowError A function will be called before the error popover shows, this of the function is the input html element validated

bs-wizard : jQuery wizard plugin based on Bootstrap

bs-wizard : jQuery wizard plugin based on Bootstrap

jQuery wizard plugin based on Bootstrap.Inspired by acc-wizard, this wizard is different from acc-wizard in a few ways:

  1. Source code is CoffeeScript;
  2. Not based on hash when move forward and backward in wizard;
  3. Not based on Bootstrap accordion;
  4. More events and utilize public methods.

This plugin also includes a beautiful CSS file which is borrowed from acc-wizard, but this is absolutely optional, you can provide your own css style.

Bootstrap Form Helpers : jQuery Plugins

Bootstrap Form Helpers : jQuery Plugins

Bootstrap Form Helpers is a collection of jQuery plugins to help you build better forms. The plugins can be used individually but some of them work together like Countries and States. The collection includes:

  • A custom select element
  • A country picker
  • A state picker
  • A currency picker
  • A phone input
  • A language picker
  • A timezone picker
  • A Google font picker
  • A date picker
  • A time picker
  • A font picker
  • A font size picker