Best jQuery Bootstrap Plugins & Tutorials with Demo

    jQuery Box Accordion Menu – Responsive

    January 18, 2013 | Accordion, Bootstrap, Menus, Plugins, Premium
    jQuery Box Accordion Menu - Responsive

    You can play around with all its features to make your own.

    • Clean and Modern Look.
    • Only HTML configuration, no javascript configuration needed.
    • 8 Different colors by default.
    • Make your own colors with CSS.
    • Choose the color of your preference and make you own menu.
    • Responsive design (3 different modes).
    • The responsive design is in a different CSS file and its optional.
    • You can make your own themes and apply it easly.
    • Customizable through css.
    • Simple html mark up.
    • Accordion Effect for submenus.
    • Cross browser compatibility.
    • Twitter Bootstrap compatible.
    Read More Demo

    Make Pretty Charts For Your App with jQuery and xCharts

    January 15, 2013 | Ajax, Bootstrap, Chart & Graph, PHP
    Make Pretty Charts For Your App with jQuery and xCharts

    Charts are a great visual aid when presenting data. You can’t build a professional admin panel without them. They are also tricky to set up. However, there is a new library that makes things easier – xCharts. Today, we are going to use it along with the daterange picker for Twitter Bootstrap, to build a pretty, AJAX-powered chart for your web application that fetches data from a MySQL table.

    Read More Demo

    Image Picker : jQuery plugin User Friendly Select Element

    January 12, 2013 | Bootstrap, Forms, Plugins
    Image Picker : jQuery plugin User Friendly Select Element

    Image Picker is a simple jQuery plugin that transforms a select element into a more user friendly graphical interface.

    Features:

    • Works great on both single and multiple select elements.
    • Falls back nicely for clients without JavaScript enabled.
    • Integrates nicely with Twitter’s Bootstrap markup.
    Read More Demo

    Fuel UX : Clean and lightweight UI controls

    December 15, 2012 | Bootstrap, Forms, Tables, Web
    Fuel UX : Clean and lightweight UI controls

    Fuel UX extends Twitter Bootstrap with additional lightweight JavaScript controls. Other benefits include easy installation into web projects, integrated scripts for customizing Bootstrap and Fuel UX, simple updates, and solid optimization for deployment. All functionality is covered by live documentation and unit tests.

    Read More Demo

    Bootstrap enhance with CSS3 animation

    December 9, 2012 | Animation, Bootstrap, Core Java Script, Plugins, Popup Window, Premium
    Bootstrap enhance with CSS3 animation

    This script customize the animate.css and bootstrap.js, add CSS3 transition support with the Twitter Bootstrap, include the modal, popover and tab. You can enable this by change a little pice of your exist code.

    Features:

    • CSS3 transition support.
    • Minimal change of the code, works fine with the exsit code.
    • FAQ and source code are included in the package, free update in the future.
    Read More Demo

    jQDrawBootstrapGrid : jQuery Plugin that Draws Grid columns

    December 4, 2012 | Bootstrap, Layout, Plugins
    jQDrawBootstrapGrid : jQuery Plugin that Draws Grid columns

    A simple jQuery plugin that draws grid columns to a twitter bootstrap layout. Working better with non fluid layouts (container-fluid, row fluid).

    Read More Demo

    Twitter Bootstrap Multi-Color Progress Bar – a jQuery Plugin

    December 3, 2012 | Bootstrap, Plugins, Web
    Twitter Bootstrap Progress Bar - a jQuery Plugin

    Multi-Color progressbar component for Twitter Bootstrap creates a progressbar which consists out of three colors or zones.

    • Green (bar-success)
    • Orange (bar-warning)
    • Red (bar-danger)

    The progressbar consists out of three zones: safe, warning and danger. The safe zone is displayed in green, the warning zone in orange and red is used for the danger zone.

    Read More Demo

    Dropbox File Uploader With Twitter Bootstrap

    December 1, 2012 | Ajax, Bootstrap, Other API, PHP, Web
    Dropbox File Uploader With Twitter Bootstrap

    A few weeks ago, Dropbox introduced a neat new feature – the Dropbox Chooser. By embedding it into your website, you give users a button with which they can attach files from their online storage.

    Today we are going to use this feature to create a simple application that allows people to attach a photo from their Dropbox account, crop an area with the Jcrop plugin, and download the result. Additionally, we will make use of Twitter Bootstrap to show dialog windows, and PHP on the backend for the actual photo cropping.

    Read More Demo

    X-editable : Create editable elements with jQuery & Bootstrap

    November 28, 2012 | Bootstrap, Forms, Plugins, Web
    X-editable : Create editable elements with jQuery & Bootstrap

    This library allows you to create editable elements on your page. It can be used with any engine (bootstrap, jquery-ui, jquery only) and includes both popup and inline modes. It’s new life of bootstrap-editable plugin that was strongly refactored and improved.

    Features:

    • popup and inline modes
    • supported inputs:
      • text
      • textarea
      • select
      • date
      • dateui
      • checklist
    • client-side and server-side validation
    • customizible container placement
    • toggle by click or manually
    • keyboard support (escape/enter/tab)
    • works in IE7+ and all modern browsers
    • unit tested
    Read More Demo

    jQuery Date Range picker for Twitter Bootstrap

    November 21, 2012 | Bootstrap, Calendar, Plugins
    jQuery Date Range picker for Twitter Bootstrap

    This date range picker component for Twitter Bootstrap creates a dropdown menu from which a user can select a range of dates. It was created for the reporting UI at Improvely.

    If invoked with no options, it will present two calendars to choose a start and end date from. Optionally, you can provide a list of date ranges the user can select from instead of choosing dates from the calendars. If attached to a text input, the selected dates will be inserted into the text box. Otherwise, you can provide a custom callback function to receive the selection.The date range picker relies on jQuery, Datejs for parsing strings into dates and defining custom ranges, and the Twitter Bootstrap CSS.

    Read More Demo