Extending Bootstrap (2014)

Chapter 8. Custom Bootstrap Plugins

There are a lot of plugins available for Twitter Bootstrap that can be used to extend its functionality. In this chapter, we will take a closer look at some of the most popular plugins that you can use to improve the user experience in your Bootstrap projects.

Why use custom plugins?

You can save a lot of time if you use custom Bootstrap plugins instead of writing your own. Most of the popular plugins for Bootstrap receive frequent updates.

The following are some reasons why you should consider using custom plugins:

· Saves you time: You can always write your own plugins that go along with Bootstrap, but often someone has already done it for you, and "reinventing the wheel" is never a good thing. So look around a bit before writing any plugins yourself.

· Stable for production: All of the custom Bootstrap plugins mentioned in this chapter are stable for production use.

· Frequently updated: Most plugins are backed by some kind of community that provides ideas for improvement, helps narrow down bugs quickly, and tests new releases.

Popular plugins

As mentioned earlier, all sorts of plugins are available with Bootstrap. Some of these plugins enhance a particular Bootstrap component, while others add completely new functionality to Bootstrap.

Let us take a look at some useful plugins that you can use in your Bootstrap projects.

Bootbox.js

Bootbox (http://bootboxjs.com/) is a small jQuery plugin that uses native modals in Bootstrap, and allows you to create programmatic dialog boxes and manages them for you. It can be used to create all sorts of modals, such as normal ones, alerts, prompts, and confirms.

Source: http://bootboxjs.com/

Bootstrap DateTime Picker

Bootstrap DateTime Picker is a great plugin for selecting dates and date times. It has views for decades, years, months, days, hours, and minutes as well as meridian support.

Source: http://www.malot.fr/bootstrap-datetimepicker/

Bootstrap Modal

Bootstrap Modal is an extension to the modal plugin that comes with Bootstrap. It introduces a modal manager that can handle multiple modals by listening to their events.

Source: http://jschr.github.io/bootstrap-modal/

Bootstrap Lightbox

Bootstrap Lightbox is a simple Lightbox plugin based on the native modal plugin in Bootstrap. It is very easy to use and supports a similar data API for native Bootstrap plugins.

Source: http://ashleydw.github.io/lightbox/

Bootstrap Wysihtml5

Bootstrap Wysihtml5 is a Bootstrap port of the popular Wysihtml5 WYSIWYG project. It provides a full-fledged WYSIWYG editor that works well with Bootstrap.

Source: https://github.com/Waxolunist/bootstrap3-wysihtml5-bower

Font Awesome

Font Awesome is an iconic font that has been designed for Bootstrap. It comes with a lot of icons that are not included in the free version of Glyphicons that comes bundled with Bootstrap.

Source: http://fortawesome.github.io/Font-Awesome/

Jasny Bootstrap

Jasny Bootstrap adds new components and JavaScript widgets to Bootstrap to provide even more building blocks. These components include the navmenu, off-canvas menu, and an excellent file input widget.

Source: http://jasny.github.io/bootstrap/

jQuery File Upload

jQuery File Upload is a modern file upload plugin for jQuery. It uses Bootstrap by default, but it can also be used with AngularJS and jQuery.

Source: http://blueimp.github.io/jQuery-File-Upload/

Notify.js

Notify.js is a jQuery plugin used to create notifications. It comes with a prepackaged style for Bootstrap, and you can also easily create your own style if you want to.

Source: http://notifyjs.com/

typeahead.js

typeahead.js is a drop-in replacement for the native autocomplete plugin in Bootstrap, which is simply not advanced enough to be used in larger projects. This full-featured autocomplete plugin was developed by Twitter engineers and can also be used without Bootstrap.

Source: http://twitter.github.io/typeahead.js/

X-editable

X-editable is the library for in-place editing on the Web. It supports all kinds of in-place editing and can be used directly with Bootstrap as well as the jQuery UI and jQuery.

Source: http://vitalets.github.io/x-editable/

Summary

In this chapter, you learned about some useful custom plugins for Bootstrap that you can use to enhance your projects instead of creating your own plugins.

In the next chapter, you will learn how to create your own maintainable theme with the practices used in Bootswatch themes.