Skip to content

List of Awesome Bootstrap Plugins

By GRAYBOX Alumni

It seems like everyday that i stumble across a new useful plugin that enhances the web project that i am currently working on. However, what use are plugins if they are difficult to work with or do not directly fit into to your existing websites' templates or framework? To ease the pain, i have put together a few plugins that all play nicely with Twitter's Bootstrap foundation for seamless transition into your website.

ComboBox

A combobox plugin that works with twitter bootstrap. Transforms a select box into a autoselecting combobox, pretty neat. Link: https://github.com/danielfarrell/bootstrap-combobox Live Demo: http://dl.dropboxusercontent.com/u/21368/bootstrap-combobox/index.html

Bootstrap Markdown

Need a lightweight blog system? Bootstrap markdown makes it possible to add markdown editing functionality seamlessly to your projects. Link: http://toopay.github.io/bootstrap-markdown

Bootstrap Maxlength

Bootstrap Maxlength is a neat little plugin which detects the HTML maxlength property of a textfield, and displays an interactive counter of the remaining characters. It is a great addition to text boxes and text areas on your website.

Link: http://mimo84.github.io/bootstrap-maxlength/

Bootstrap Multiselect

Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select element, bootstrap button will be shown as dropdown menu containing the single options as checkboxes. Link:http://davidstutz.github.io/bootstrap-multiselect/

jqBootstrapValidation

jqBootstrapValidation is a plugin that makes it easy to validate your Bootstrap forms. It is easy to include into your project and all the validation rules are described as data attributes on the input elements. Link: http://reactiveraven.github.io/jqBootstrapValidation/

Data Tables

Data Tables is another table enhancing add-on for Bootstrap. This plugin not only makes your tables sortable, but it also makes use of the framework's pagination controls and makes the data searchable. Link: http://www.datatables.net/blog/Twitter_Bootstrap_2 Live Demo: http://www.datatables.net/release-datatables/examples/basic_init/zero_config.html

Bootstrap Link Preview

Bootstrap Link Preview is a JavaScript library offering a preview for URLs. It is very simple to use and weighs in at just a few kilobytes. Please note that this plugin does require a little PHP to work properly.

Fuel UX

Fuel UX is an incredible collection of enhancements to Twitter Bootstrap. All the controls are clean and lightweight, and they fit naturally into the bootstrap look and feel. The collection includes controls like datagrids, custom select boxes, spinners, trees, multi-step form wizards and more. This is sort of an all-in-one plugin that combines most if not all the plugins listed above into one package. Link: http://exacttarget.github.io/fuelux/

Conclusion

While adding in plugins to your site make sure to keep in mind you aren't overdoing it as your page load times increase with every added javascript or plugin that needs to be loaded. Also, be sure to only use plugins in which you feel necessary and to delete any un-used plugins. A combination of a few lightweight plugins can really enhance the user experience of your website,

Blog & Events

Featured Work