Best jQuery Bootstrap Plugins & Tutorials with Demo

    Bootstrap Pagy : jQuery plugin simplifies the Bootstrap Pagination component

    Bootstrap Pagy : jQuery plugin simplifies the Bootstrap Pagination component

    Bootstrap Pagy is a jQuery plugin that simplifies the use of the Bootstrap Pagination component.

    Features:

    • Custom previous and next button
    • Custom first and last button
    • Custom inner window size (default 2)
    • Custom outer window size (default 0)
    • Set current page and total pages programmatically
    • Code under Apache License
    • Only depends on jQuery (for Javascript) and Bootstrap (for Markup)

    bbGrid : Extendable Grid based on jQuery & Twitter Bootstrap

    bbGrid : Extendable Grid based on jQuery & Twitter Bootstrap

    Quite simply, bbGrid is a JavaScript grid/spreadsheet component. The general idea is the same as in Backbone, you don’t need to keep an eye on collection, bbGrid will do that!

    Features:

    • Responsive due to Twitter Bootstrap
    • Extendable thanks to Backbone.js
    • Fast as much as jQuery can
    • Configurable & customizable

    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