Must-have plugins for extending Twitter Bootstrap

Transferred from: http://tutorialzine.com/2013/07/50-must-have-plugins-for-extending-twitter-bootstrap/

Must-have plugins for extending Twitter Bootstrap

Martin Angelov July 10th, 2013

Certainly know about Twitter Bootstrap–the Popular Front end framework for building websites and apps. It Favors, responsive design, and comes bundled with a sensible default stylesheet, a number of useful jQuery Plugi NS and an icon set. Although it doesn ' t come with much else, Bootstrap is very extensible. In this article, you'll find a collection of Must-have plugins you should know about for effective development with T The He framework. Let ' s begin!

Must Know jQuery Tips and Tricks

jquery TrickShot is a free book, a filled with kick-ass tips and tricks for jquery that every developer should know.

Download ItCollections of Bootstrap Enhancements

We'll start off with a collections of Bootstrap plugins that is the perfect companions to the framework.

Fuel UX

Fuel UX is a incredible collection of enhancements to Twitter Bootstrap. All the controls is clean and lightweight, and they fit naturally to the bootstrap look and feel. The collection includes controls like DataGrids, custom select boxes, spinners, trees, multi-step form wizards and more.

Website | Github

Fuel UX

Jasny

Jasny is another collection of the useful interface components for bootstrap. It features controls like input masks, file upload buttons, icons, additional form styles and more. You can either get a version of bootstrap with all the changes integrated, or can download them separately as plugins.

Website | Github

Jasny Bootstrap

Galleries

It is worth noting so can use any regular jQuery plugin with your bootstrap-powered website. This means, any of the galleries from our JQuery plugin collection would work perfectly fine. What these plugins won ' t has though, is Bootstrap ' s design language and the doing things. For the reason, check out these three plugins specifically created with Bootstrap in mind:

Bootstrap Lightbox

Bootstrap does include a carousel, but it falls if you need to show a photo in a lightbox. This is where the simple Bootstrap Lightbox plugin comes into play. All your need to do be add the required HTML to the page, and you get a pretty and responsive lightbox with an optional cap tion.

Website | Github

Bootstrap Lightbox

Simple Lightbox

Simple Lightbox are another Lightbox plugin that's simpler that one above. It requires only so you add a data attribute to the image and to initialize the plugin.

Website

Simple Lightbox

Bootstrap Image Gallery

Bootstrap Image Gallery is a complete Gallery solution for Bootstrap. After you include the needed files on your page, you get a grid of images which open in modal windows. The gallery can also optionally go into fullscreen mode. Note that there are now a improved version of this plugin which drops the Bootstrap requirement Project.

Website | Github

Bootstrap Image Gallery

Dialogs and Notifications

Bootstrap comes with a good modal window implementation out of the box. These plugins make it even better.

Bootbox.js

Bootbox.js is a small JavaScript library that automates the process of creating bootstrap dialogs. It creates the needed markup for your, so all of you has to does to trigger a bootstrap dialog are to call a function. It mimics the built-in browser dialogs like alert, confirm and prompt.

Website | Github

Bootbox.js

Bootstrap Modal

Bootstrap Modal extends the default Bootstrap Modal class. It makes the default dialogs responsive and adds the ability to load their content via AJAX automatically for you.

Website | Github

Bootstrap Modal

Bootstrap Growl

Bootstrap Growl is a jQuery plugin which turns Bootstrap ' s notifications into pretty growl-like alerts. notifications can heavily customized; You can choose the position in the screen, dimensions offsets and time to fade out.

Github

Bootstrap Growl

Bootstrap Notify

Bootstrap Notify is a user-friendly extension to Bootstrap notifications. Like the Growl plugin above, here you can also heavily customize every aspect of the notifications and where they is show N.

Website | Github

Bootstrap Notify

Forms

Forms are the necessary evil of the web development. They may is tedious and boring to the create and to fill in, but they occupy a very important place in our online interactions . Bootstrap brings a long list of enhancements to forms in terms of usability and presentation. It may not be an offer much else, but the plugins in this section does a great job at changing.

Bootstrap Form Helpers

Bootstrap Form Helpers is a indispensable collection for enhancing Web Forms. It comes with custom JQuery plugins This give you everything from date and time pickers, font lists, timezone, language and country fields and more.

Website | Github

Bootstrap Form Helpers

Bootstrap Tags

Bootstrap Tags is a plugin which can enhance your search boxes by presenting the search terms as Tags. The plugin also supports filters, placeholders, popovers and AutoSuggest as well as a full set of callback functions so yo u can hook it up with your code. Similar plugins is tags Manager and Bootstrap Tag.

Website | Github

Bootstrap Tags

Bootstrap Switch

No Mobile interface is complete without a ios-like switch control, and Bootstrap switch gives you a perfect implementation That's fits nicely into the Bootstrap design language. You can customize the size of the control and the colors by assigning class names to the element. The plugin is really simple to set up and as it wraps around an existing checkbox.

Website | Github

Bootstrap Switch

Bootstrap Markdown

I ' ve mentioned markdown on Tutorialzine before (we even made a lightweight blog system with it). Bootstrap Markdown makes it possible to add markdown editing functionality seamlessly to your projects.

Website | Github

Bootstrap Markdown

Bootstrap Maxlength

Bootstrap Maxlength is a neat little plugin which detects the HTML Maxlength property of a TextField, and display s an interactive counter of the remaining characters. It is a great addition to text boxes and text areas.

Website | Github

Bootstrap Maxlength

Bootstrap Select

Bootstrap Favors native browser Controls, which is the reason it doesn ' t expose any customization options for them. However, in some projects it's useful to has customizable controls like select boxes, which are exactly what Bootstrap Se Lect does. This plugin gives your a pretty and customizable select box which looks great in your page. For a alternative try with selectboxit, or one of the other well-known plugins like Select2 or Chosen.

Website | Github

Bootstrap Select

Bootstrap MultiSelect

And for select inputs without the multiple attribute, you can use Bootstrap multiselect. The plugin creates an intuitive interface for using select inputs with the multiple attribute present. Instead of a SELECT, a bootstrap button would be shown as a dropdown menu containing the single options as checkboxes.

Website | Github

Bootstrap MultiSelect

Bootstrap WYSIHTML5

Bootstrap WYSIHTML5 is a beautiful rich-text editor for Bootstrap This comes in the form of an easy to embed JavaScript pl Ugin. It gives you to basic functionality, but this is fine for 90% of the use cases. For a bit more advanced editor, try this one or the insanely powerful TinyMCE.

Website | Github

Bootstrap WYSIHTML5

Bootstrap Form Wizard

It is a good practice-split long forms into smaller, contextually similar chunks. This makes them a bit easier to handle. The Bootstrap Form Wizard does.

Website | Github

Bootstrap Form Wizard

Jqbootstrapvalidation

Jqbootstrapvalidation is a plugin this makes it easy to validate your Bootstrap forms. It's easy-to-include into your project and all the validation rules be described as data attributes on the INPUT element S. If you need an alternative plugin and take a look at nod.

Website | Github

Jqbootstrapvalidation

JQuery File Upload

JQuery file Upload is a very powerful and versatile File uploading plugin. See our tutorial on it here. The plugin is not a strictly for bootstrap, but all the examples of their homepage use the Frontend framework extensively.

Website | Github

JQuery File Upload

Bootstrap Tag Autocomplete

Bootstrap Tag Autocomplete is a library which adds Twitter and facebook-like mentions to your content editable text areas. It takes an array of available completions and inserts them as nodes in the text area on a match.

Website | Github

Bootstrap Tag Autocomplete

Date and Time pickers

Your Web application probably requires dates to being formatted in a specific the IT, and expecting people to manually type them In was a road that can only leads to frustration. The better approach is to has a widget which lets users simply click or tap on the date they need. The plugins in this category add such functionality to your Bootstrap forms.

Daterangepicker

Daterangepicker is a plugin for Bootstrap, that's the perfect addition to your reports page. It lets users choose preset time periods like the last 7 or in (you can define your own presets) and they can also CH Oose an arbitrary time intervals. You have need to pass a few callback functions when instantiating the plugin, and your is ready to go. Check out a tutorial where we used this plugin to update a chart.

Website | Github

Daterangepicker

Bootstrap Timepicker

Bootstrap Timepicker is a pretty and touch friendly plugin This lets you turn the text fields into time selection controls. The It doesn ' t has support for dates, but is for that and can use one of the next plugins.

Website | Github

Bootstrap Timepicker

Clockface

Clockface is a alternative plugin to the one above. It presents the hours and minutes as text labels in a circle. While it's a bit ugly for my taste, I give it points for originality.

Website | Github

Clockface

Bootstrap Datetime

Bootstrap Datetime Picker is a fully featured plugin this lets you turn a text field into a handy date and time picker con Trol. The plugin is pretty and fits nicely with the framework ' s design language. It's also fairly easy-to-customize with CSS. For a alternative check out this plugin.

Website | Github

Bootstrap Datetime

Bic_calendar

Bic_calendar is a simple Calendar widget that can show events loaded through AJAX. An example PHP script was included that outputs the events as a JSON object. The events is then displayed on the calendar and shown in a popup.

Website | Github

Bic_calendar

Color pickers

Entering colors is another area the users need help with. You can ' t simply think of a color and write down its hex value–you need to visualize it in some. The plugins listed this problem by creating color picker controls and swatches.

Pick a Color

Pick a color is a bootstrap addon This shows an advanced Color picker. You can choose colors by modifying one of the Presets, by choosing a previously saved one, or generating a color by modify ing the hue, saturation and lightness components.

Website | Github

Pick a Color

ColorPicker for Bootstrap

ColorPicker for Bootstrap are a more traditional color picker–you get a photoshop-like widget this lets you choose the MA In color and specific hues. I personally find this easier to use than the above plugin.

Website | Github

ColorPicker for Bootstrap

Color Palette

Color Palette is a Bootstrap plugin this displays a grid of color swatches when a text field is focused. The plugin is easy-to-integrate with your bootstrap project.

Website | Github

Color Palette

Tables

Bootstrap already offers basic table styles that does a great job with simple data. However, what if do you ' d like the data to is sortable, searchable and presentable on multiple pages? Read on.

Tablecloth

Tablecloth is a plugin that makes your tables pretty. It comes with a number of built-in styles, and it uses plugins like tablesorter internally to make the data in your tables Sortable.

Website | Github

Tablecloth

Data Tables

Data Tables is another table enhancing addon for Bootstrap. This plugin isn't only makes your tables sortable, but it also makes use of the framework ' s pagination controls and makes th e data searchable.

Website

Data Tables

Interface Enhancements

This sections contains various plugins that enhance the interface Web App.

JQuery Bootpag

JQuery Bootpag is an enhanced bootstrap pagination plugin. It is very easy to set up–you only has to pass a callback function and listen for the page event. Inside that function, you can update the container element with the content of that need.

Website | Github

JQuery Bootpag

Tocify

Tocify is a table of contents plugin. It scans your page on Domready, looking for headings, and creates a bootstrap–styled table of contents dynamically.

Website | Github

Tocify

Bootstrap Link Preview

Bootstrap Link Preview is a JavaScript library offering a facebook-like Preview for URLs. It is very-simple-to-use and weighs just a few kilobytes. To work around the same origin policy it depends on a PHP script though.

Website | Github

Bootstrap Link Preview

Tab Drop

Tab drop is a neat plugin this hides your tabs in a dropdown if they don ' t fit in a single row. This can come handy when designing responsive sites, need to work on small screens.

Website

Tab Drop

Flippant.js

Flippant.js is a tiny plugin this lets you flip elements to reveal further content with a smooth CSS transition. You can put any content on the Side–simply pass it as a argument to the function call.

Website | Github

Flippant.js

Hover Dropdown

Another interface enhancement for Bootstrap. With the Hover Dropdown plugin you can activate the framework's dropdowns on Hover in addition to click. This can make for a better user experience with your site.

Website | Github

Hover Dropdown

Social Buttons

Social Buttons is a collection of pretty social networking Buttons built with Bootstrap and Font Awesome. This makes them very easy-to-scale and style.

Website | Github

Social Buttons

Bootstro.js

Bootstro.js is a bootstrap plugin this lets you build a guided tour for new users. A Tour consists of tooltips and overlays which explain the functions of your app. The plugin has plenty's options and callbacks, so it's easy-to-hook up with the rest of the Your code. For an alternative, checkout bootstraptour.

Website | Github

Bootstro.js

Ajax

The Bootstrap extensions in this section handle inline editing of content with automatic syncing with your server, extend The framework with AJAX bindings and more.

X-editable

X-editable is a library, that enhances Bootstrap with inline editing capability. Clicking an element, which is set to be editable, would open up a bootstrap popup with a text field and buttons. In addition, it supports editing inline and have many different types of text controls including rich text editors and date Pickers. On a successful edit, the plugin sends an AJAX request to your server.

Website | Github

X-editable

Eldarion AJAX

With Eldarion Ajax you can extend bootstrap with automatic Ajax request handling. Simply Add the Ajax class to the button or link wish to enhance, and the plugin would do the rest. It would send a request and replace the contents of the element with the response from the server. You can also submit forms in the same manner.

Website | Github

Eldarion AJAX

Typeahead

Typeahead is a library by Twitter, offers a fast and fully featured AutoComplete control for your site. It supports fetching AutoComplete data via AJAX, caching, rate limiting and more. The most common selections is displayed as hints. The library isn't dependent on bootstrap, but it can be easily integrated with it.

Website | Github

Typeahead

Conclusion

Bootstrap is a valuable addition to your web development toolbox. Knowing your around the framework would let you build usable and responsive interfaces with ease. And with the plugins presented here, you can add advanced functionality that fits nicely with the rest of your site.

Presenting Bootstrap Studio

A revolutionary tool that developers and designers use to create
Beautiful interfaces using the Bootstrap Framework.

Learn MoreTutorialzine on Twittertutorialzine in Facebooktutorialzine on Google+tutorialzine ' s RSS feedby Martin Angelov

Martin is a web-developer with a-eye-for-design from Bulgaria. He founded Tutorialzine in and it still are his favorite side project.

Must-have plugins for extending Twitter Bootstrap