Design your way

So, you use Bootstrap so much in your projects and you want to have the best jQuery Bootstrap plugins to use? This article is for you.

Nowadays, over 7 million websites have incorporated Bootstrap in their design.

This is an insane number, and things get even crazier when you realize that around 10% of the top 10,000 websites make use of Bootstrap for various purposes.

The creators of the framework couldn’t have anticipated how big it would grow, and it is one of the staple frameworks for the front-end developers today.

Therefore, there are a lot of jQuery Bootstrap plugins available, for pretty much anything.

You should be taking a look at them if you’ll be using it, as they can expand the possibilities, by a lot.

A selection of jQuery Bootstrap plugins

Survey.js

Survey.js is jQuery JSON based survey library with visual editor and optional service for storing and analyzing data.

File input fields look differently in all browsers. It’s a pain in the arse to design something that looks nice in all browsers and it sucks that support for this is not available in Twitter Bootstrap. This jQuery plugin is designed to make all file input fields look like standard Twitter Bootstrap buttons.

SolidMenu+

Another one of these jQuery Bootstrap plugins is the MegaMenu navgar. Create an Ultra Responsive yet Beautiful MegaMenu navbar for your next site. It uses CSS3 Animations and provides a modern style navigation look and feel in your website.

These sets of Responsive Mega Menu utilizes the Standard “navbar” framework from Bootstrap 3.0. It can work on Fixed and Responsive Layout.

100% Responsive, Works on All Devices
One Code: Works in All Devices
Beatiful Look and Feel
Bootstrap Navbar Framework
Bootstrap Drop Down Menu
Bootstrap 12-Column Grid Based, Compatible with BootStrap 3.0+
Line Icons Included, Vector Icons
Custom Widgets, Carousels, Images, Google Map, Sliders
Very light weight, No image needed
Easy Integration for your Web Projects
Varieties of Pure CSS3 Animations

Easy-Tree.js

A plugin base on jquery and bootstrap 3, can convert an un-order list to a tree easily. The tree that selectable, addable, editable and deletable.

BootstrapX Clickover

BootstrapX Clickover provides a Bootstrap extension to allow popovers to be opened and closed with clicks on elements instead of hover or focus.

jComponent

jComponent is the component library for creating reusable components with jQuery. With jComponent you can improve your existing projects or create new web single-page applications.

jQuery Responsive Bootstrap Portfolio And Lightbox

A set of responsive Bootstrap Portfolio And Lightbox contains bootstrap portfolio gallery, bootstrap lightbox gallery, bootstrap carousel with thumbnails and also support YouTube videos, vimeo video, self hosted videos etc with new features.

18 Light-boxes
7 Colors Schemes
6 Slider Portfolios
18 Simple Portfolios
Built With Bootstrap 3.x
3 Background Colors Schemes
2,3,4,5,6 columns grid portfolios
100% Responsive And Mobiles friendly
YouTube, Vimeo and Self hosted Videos Support

Checkbox X

An extended checkbox plugin for Bootstrap built using JQuery, which allows three checkbox states and includes additional styles. The plugin uses Bootstrap markup and CSS 3 styling by default, but it can be overridden with any other CSS markup. It also helps you to fallback to a native checkbox OR display native checkboxes with tristate capability.

Responsive Bootstrap Modal And Popup with jQuery

Sure, this one is a premium plugin, but still one of the great jQuery Bootstrap plugins in this article.

A set of responsive Bootstrap Modals and Popups those contain bootstrap carousel, images gallery, login, signup and contact us forms, subscribe and search bars, different types videos in modal etc with new features. It is made with bootstrap.

100% Responsive And Mobiles friendly
20 Ready modal style
5 Colors Schemes
3 Background Colors Schemes
Built With Bootstrap 3.x
26 Animation Effects
Different Types of Sliders in the Modals
Touch swipe Enabled In Sliders

Responsive Photo Gallery with jQuery & Bootstrap

A simple jQuery plugin that will create a Bootstrap based Photo Gallery for your images. Supports variable height for the images and captions. An optional “modal” box with “next” and “previous” paging is also included.

jQuery Slim, Image Upload and Ratio Cropping Plugin

Modern cross platform responsive image cropping and uploading. Slim features beautiful animations and graphics. Configuration and implementation are a walk in the park.

Features:

Responsive and Beautifully Animated
Compatible with both Bootstrap and Foundation
Super Fast
Able to auto crop and resize imagery
Capable of Correcting Device Orientation problems
Setup to upload via AJAX or Form POST
A Treat for the Eyes

Paradise Slider

We have prepared 100+ Pre-made layouts of bootstrap carousel. it is a responsive slider with touch enabled function. This slider is easy to customize and you can create new layouts by combining these pre-made layouts.

Features:

More Than 100 Documentation Pages Includes
More Than 100 Pre-made Layouts
Touch Enabled
100% Responsive
Beautiful Animation
Built With Bootstrap
Smooth Sliding Effects
Cross Browser Compatibility
YouTube, Vimeo & Self Hosted videos in slides.
Bootstrap Carousel Fade, Slide, Rotate and Zoom effects

Auto Inherit Bootstrap Theme Vertical Sidebar

It is a ready to use component in any bootstrap website. It consists of a vertical navigation menu based on css3 and jQuery.

Features:

Fully Resposive on all screens; Desktop, Tablet, Mobile
Same Code for all devices and platforms
Multiple Level Dropdown Menu (Unlimited)
Glyphicons – Bootstrap version 3.3.5
Inherit any theme look
Collapsible Mobile Menu

Timon

With Timon – Step Form Wizard you will have power combo of 21 different styles, 8 different transition effects, validation in your step form, titles and subtitles with multiple step. , also Timon – Step Form Wizard has predefined set of form sizes from tiny to large. You can easily create and customize any form to fit your needs.

Features:

Step navigation
Fully responsive
Many options for design and function
Can be used for tabs
Step navigation
21 Style
8 transition effect

Form Validator for Bootstrap

A user-friendly HTML5 form validation jQuery plugin for Bootstrap 3.The Validator plugin offers automatic form validation configurable via mostly HTML5 standard attributes. It also provides an unobtrusive user experience, because nobody likes a naggy form.

Configurable via data-api and standard HTML5 attributes
Patient to inform user of errors and eager to let them know the errors have been resolved
Submit is disabled until the form is valid and all required fields are complete
Customizable error messages
Custom validator functions
Validation of an input field via AJAX

EasyForms

Easy Forms is a web application that will help you design and develop web forms quickly and easily. Actually, you will not need programming skills to make your forms work in minutes.

Build any type of online forms: Contact forms, Order forms, Registration forms, Online surveys, Trivias and more.
Drag & Drop Fields. No coding skills required.
HTML5 Fields Support
Create Multi-Step Forms
Bootstrap CSS Support
Theme & Template Managers
Advanced CSS Editor with Form Live Preview

Iconpicker

Iconpicker is a jQuery icon picker plugin for Bootstrap 3 that allows you to choose and pick a icon from multiple icon sets in a tooltip-like popup interface.

Simple jQuery Star Rating System For Bootstrap 3

Yet another jQuery star rating plugin that converts a number input to a star rating widget using Bootstrap 3 styles and glyphs.

BS-Alerts

BS-Alerts is a jQuery plugin that make it easy to create jQuery event based notification bar (warning, error, success) using Twitter Bootstrap and HTML5 data- attribute.

Bootstrap 3 Dialog

Bootstrap 3 dialog is a jQuery plugin that enhances the Twitter Bootstrap’s modal component to make it more interactive, user-friendly and easy-to-implement.

metisMenu

metisMenu is a simple jQuery menu plugin for Bootstrap 3 that help you create a collapsible menu with animated accordion effects and auto collapse support.

Dropdown

dropdown is a simple jQuery plugin that make it easier to create awesome Bootstrap-style dropdowns (menus, selects, panels, tooltips etc) with additional features and no dependencies.

WebUI Popover

WebUI Popover is a powerful yet easy jQuery plugin used to extend the Bootstrap popover component with following advanced features.

Tagmanager

tagmanager is a jQuery plugin works nicely with Twitter Bootstrap that helps you manage tags for each expense users were entering.

Bootstrap Growl

Yet another jQuery notification plugin that makes use of Boostrap’s alerts to create animated informative messages in your web/app page, similar to the Mac OS X’s ‘Growl’ notification system.

Date Range Picker

A date range picker for Twitter Bootstrap for creating a dropdown menu to choose date ranges for reports, which would match the existing dropdown and button styles of Bootstrap.

Bootstrap Maxlength

Bootstrap Maxlength is a beautiful jQuery plugin that displays character counter attached to the input field and limit the maximum length as user input, using Twitter Bootstrap and html5 maxlength attribute.

TouchSpin

TouchSpin is a jQuery plugin for Bootstrap 3 to create a touch-friendly spinner widget that wraps a text input with two buttons to increment and decrement the current value.

Bootstrap Show Password

Bootstrap Show Password is a jQuery plugin that allows the visitor to toggle the password input field text visibility by clicking the toggle icon/checkbox.

Feedback_Me

Feedback_Me is a plugin for jQuery and jQuery UI that creates a customizable feedback widget on your web page that slides out from the left side of your web page when clicking the tab.

ColorBrewer

ColorBrewer is a unique color selection tool aimed at cartographers, designers, and those who work with web colors frequently. Although the purpose of the tool might seem very simple, the actual process of finding the right color for you is much deeper than just looking at a selection of colors.

ColorBrewer really gives you the maximum amount of choices for each set of colors, so you can select between different varieties of shades and hues. With the settings panel, you can configure the color map to be more/less transparent, to have solid colors only, but also to ensure that the colors you select are safe for color blind people and more.

The ColorBrewer library will help you select CB colors for your bootstrap project using a simple widget.

Mobility

Building a mobile application that people will understand how to use is the most crucial aspect of building a mobile app in the first place. Who needs an app that only does what you want to do it, customers are looking for pleasant experiences that do all of the work for them.

Mobility is an established minimal mobile development framework that uses Bootstrap in the back-end. The languages of choice within this framework are: HTML5, CSS3, and JavaScript — which means that any modern front-end developer can adapt to this framework quickly and painlessly.

There are some great features to choose from too, some of our favorites include: CSS3 transitions, fixed headers and footers, forms that are optimized for mobile devices, content tabs, a lists feature for creating lists that can scroll infinitely, notifications to keep your visitors up to date.

Sure, the list of features goes on, but what’s even important than that, is the kind of websites that developers are building using Mobility. The three most popular choices seem to be: a business homepage, a blogging platform, and also an eCommerce platform for selling products. All three type of websites can be quickly prototyped and launched using Mobility’s concise framework features.

Bootstrap Validator

When building a website with Bootstrap, you aren’t just building a grid-like website that has fancy widgets, and images attached to it. You’re building a full-scale website that has all the features that a modern website would have in any other situation.

That includes the use of Forms. Forms is what helps us to submit content through websites. We use forms to register, to login, to contact, to submit content, and so many other uses for website forms.

And because we’re using forms so frequently, we need to ensure that we’re helping our users save time, and also headaches, by validating each of the forms inputs. It’s more than likely that you yourself have been in a similar situation where you’re typing a password in two different forms, and all other form inputs get canceled once you submit the form, because your passwords didn’t match.

With a validator, this painful experience can be avoided for everyone, through the means of validating each form to check that it’s matching the previous. This library integrates with Bootstrap 3, so definitely check it out and start using it — your visitors will thank you.

Bootstrap Sortable

We already discussed one tables library. Now it’s time for another, and we truly believe this could complement the previous one greatly. Bootstrap Sortable lets you attach a jQuery library to your website that would allow visitors to sort table data according to their own preference.

This mean sorting data for ASC/DSC values, also sorting by alphabet and other common sorting values that we encounter on platforms that allow sorting through data.

Pro Range Data Slider

Just another option of a data slider that uses Bootstrap components to seamlessly integrate in a Bootstrap-built website. We hope this HTML5-ready slider will be of utmost benefit for your projects. By the looks of it, this one has slightly more fluid movements when moving the arrows up and down the data slider. We will let you decide for yourself.

Backoffice Filters

Running a complicated data set within the internal aspects of your business, and need a way to sort through data without losing out on time or performance? jQuery Backoffice Filters can help. It’s a library designed to help you sort any kind of database/website data through the use of specific filters.

The filters can be selected and set up by you, which means that you still get full control over the way data is going to appear to you. And of course, the filters could technically be applied for front-end use as well, in situations where it would be necessary for users to sort out possible matches for specific data returns; like search engines, eCommerce stores and others.

Bootstrap 3 Contact Form with Google’s reCaptcha

What would the web look like, if there were no contact forms. That’s the beauty of web. A truly necessary feature will naturally be developed by someone, and what a day it was when someone decided to create a contact form for the web. These days, contact foms have evolved beyond the basic features.

A contact form can be used to send over sensitive data, to apply for a job, to send a simple message, and so much more. The one thing that many modern contact forms lack, is the ability to protect themselves against spammers, and to best deal with spam, most professional web developers will recommend to use Google’s reCAPTCHA platform.

The basis upon which this particular library was built. A Bootstrap 3 oriented contact form that uses reCAPTCHA to protect your contact form against spammers.

It’s very likely that at some point during your web browsing history, you stumbled upon a piece of content that was so big that it needed a Table of Contents. If not, then think of any book that you have read or picked up in the past, it had what’s called a Chapters page, where all the book chapters are listed.

This is also known as table of contents of the particular book. On the web, table of contents is often used to discuss documentation, but also on large pieces of content; like tutorials and guides, and this library, Tocify, is going to help you create individual content pages accompanied by a table of contents, to help your readers better engage with your content, and to help them better understand the overall structure of what you’re trying to convey.

Tocify can be optionally styled with Twitter Bootstrap or jQuery UI Themeroller, and optionally animated with jQuery show/hide effects. Tocify also optionally provides support for smooth scrolling, scroll highlighting, scroll page extending, and forward and back button support.

Grid Editor

Having a grid in the first place, is already such a huge boost to the workflow of website design, but being able to re-organize the grid using a drag and drop system, that’s pure revolutionary! Grid Editor is a Bootstrap-specific editor for rearranging the appearance of your Bootstrap grid system.

It is built in a way that’s going to let you edit the Grid content, appearance, and location through the use of traditional content management editor tools. You will not know how useful and convenient this tool truly is, until you try it on your own Bootstrap website.

jsTiles

Tiles is a unique way of displaying content. jsTiles simply helps you to “animate” your content using a Tiles template approach. The end result looks similar to a content slider, but without the sliding capability.

The content just unfolds naturally in a tile-style and adds a particular browsing experience that will be impossible to match by any other effort. Demo page uses jsTiles to show you what it is capable of.

jQuery Bootstrap Carousel Bundle

jQuery Bootstrap carousel bundle is an all in one product. You don’t need to pay extra money, but instead you can buy thumbnails carousel, multiple items carousel, testimonial carousel, carousel in modal etc in a single item. We are presenting our two highly sales products in one Package.

This product contains more than 170+ pre-built layouts of bootstrap carousel with new functions like:

Touch swipe enables
Controlled Slide Duration
Carousel with parallax effects
Text layers animation effects
Controlled slide timing functions
Different types of sliding transition effects

Form Wizard

Single page 3/4/5 step form with every step script field validation. Multi format and style 144 item Sign up form, Include image uploader system. Using bootStrap responsive and it’s easy to customize for you.

Notify

Website notifications get a lot of attention these days. Notification and popup scripts are on the rise as more website owners realize that in order to fully capture users attention, notifications will be necessary to experiment with. Popups can be annoying, but when the popups have deeper purpose, they actually make a lot of sense to use.

A good example is a contact form, a notification can be created to alert the user after a successful submission, or a notification can be used to alert the user when there’s an error in their profile.

The uses for notifications are many, and the Bootstrap Notify library takes Alerts to the next level. A custom settings platform is available to select different settings for creating the perfect notification that’s going to capture your visitors attention.

Bootstrap Multiselect

We are still actively exploring libraries that help us to manipulate our forms. Forms are a big deal, and this library shows. Bootstrap Multiselect lets us create specific forms actions that would allow us to select multiple choices within a form. A very handy library that could come in handy for situations where a user needs to select the quantity of something, but also in different variations.

Or select between styles where multiple style options are present, needless to say — job application process forms could also benefit from this library, because applicants are often presented with questions that require multiple answer choices and sometimes there’s the need to select multiple answers to better portray the user’s proficiency.

Bootstrap Tags Input

For bloggers, tags are an essential method for managing the different varieties of content. Tags help to point out to content that’s in relation to what they are already exploring, and users love to explore more of what they already have liked.

Tags also help to organize a website in a way that specific content is nested underneath similar pages. This jQuery library is uses the Bootstrap UI to help you manage your tags.

jQuery Bootgrid

jQuery Bootgrid has been built to help Bootstrap users better organize their dynamic forms content. Within a single click of a button, you can completely transform the appearance of a particular dynamic forms widget to look like a modern state of the art solution that will wow your users, and leave a lasting impression.

Bootstrap FileStyle

We wrote about jQuery file upload scripts in recent past, a successful post that has already generated a high volume of response, and goes to show how trending the current market for file upload related content is. Then again, it makes complete sense as the big names in Cloud Computing are battling against each other for new customers, namely Google, Microsoft, Amazon, and Apple.

Bootstrap FileStyle will let you custom-style your file upload input forms with the Bootstrap framework UI. It’s time to give your file upload pages a little makeover.

RSS Widget

RSS feeds are still some of the most popular ways of consuming content on the go. The process of checking each website that we read individually, for new content, can be so time consuming and boring that we quickly run out of patience, and that’s where RSS feeds come in really handy.

The following script is for aligning together both jQuery and Bootstrap to create a unique RSS feed fetching experience for your website. Simply attached the library and specify the location using a jQuery call and you’re all set. You can set up as many feeds as you like.

Power Table

Welcome to power table! A full-fledged solution to creating HTML5 tables using jQuery, and Bootstrap.

The tables that you can create with this library provide many great benefits and uses, some of them are: you can add a custom search form for all tables, you can create a sort content option to allow users to organize content, you can allow users to scroll through content by using pagination, and many other design/database related features to create truly powerful tables.

DMSS

Say hello to DMSS — a personal jQuery built and Bootstrap supported style switcher for websites. Now, the product is aimed at any webmaster, but particularly web designers who are keen to display their final work in a variety of styles.

It doesn’t help to create just one single style, and then re-do another style and have the user view that. Instead, a much more flexible choice would be to program/code the design in a way where the style switcher would allow to quickly change the overall appearance of the website’s style.

That’s the kind of library you are looking at here. A simple widget will be added to your website to allow users to completely change up the appearance of the style that they are viewing, based on your own recommendations.

TimelinzJS

Facebook really did revolutionize timelines. Now, timelines can be found everywhere, but most frequently on website designs that have some sort of a connection with events. When displaying the events calendar, it’s much more convenient to use a timeline of the daily schedule to display the kind of speakers/activities that users can expect for the day.

This is what TimelinzJS is trying to achieve, it’s giving you the opportunity to create unique timelines that you can use to discuss important business events, or to showcase your schedule availability. The uses are unlimited, and we look forward to seeing what you are able to create with this very unique jQuery library.

If you liked this article about jQuery Bootstrap plugins, you should check out these as well:

The post jQuery Bootstrap Plugins (51 Great Examples) appeared first on Design your way.