20 Plugins for Extending Bootstrap
“I think it’s fair to say that personal computers have become the most empowering tool we’ve ever created. They’re tools of communication, they’re tools of creativity, and they can be shaped by their user.” – Bill Gates
Bootstrap is a front-end toolkit, used to develop web applications and websites. It is comprised of several CSS and HTML conventions, for forms, typography, tables, buttons, navigation etc., as well as optional JavaScript extensions, and we will get to extensions in just a moment.
It was developed by Mark Otto and Jacob Thornton at Twitter, to be used as a framework, and encourage consistency across internal tools. Before Bootstrap, Twitter used various libraries to develop their interface, and this led to high maintenance. You could say that Bootstrap plays a pretty big role in Twitter’s success as a social network.
Bootstrap’s main concept is “pairing designers with developers”, and in Mark Otto’s words:
“From whiteboarding ideas to coding rough prototypes, collaborating across disciplines is what made Bootstrap successful for internal use at Twitter. This process informed the development of nearly every feature in Bootstrap and has worked remarkably well over time.”
Since August 2011, Bootstrap has been released as an open source, and has been used by big names such as MSNBC and NASA, making it the number one project on GitHub, as of March 2014, with over 65, 000 stars, and nearly 24, 000 forks.
Since there are probably quite a few of you that work with it, we have decided to make a list of some of the coolest plugins we could find, for extending Bootstrap. Hopefully, this will save you a fair bit of time looking for them, and will help you make great websites and web apps.
1. Bootstrap Accessibility Plugin
The plugin adds accessibility to the default components of Bootstrap 3, making them (as you have probably guessed) more accessible to keyboard and screen reader users. It does not affect the website’s performance or its visual layout, and it is extremely easy to implement on your website. For a demo of how the plugin works, just click here.
2. typehead.js
Typehead is a great foundation to build your autocomplete search functionality. It consists of two components, namely Bloodhound, which is the suggestion engine, and Typehead, which is the user interface view. Each can be used separately, but once used together, that’s when this plugin truly shines, as you can see in this demo, here.
3. Bootstrap Breadcrumb
Not much to say about this one, really. The name says it all. It is a Bootstrap JavaScript plugin that allows you to manipulate breadcrumb navigation easily.
4. Eldarion Ajax
Writing even a single line of code can be daunting, not to mention writing 20. Instead of doing that, now you can just add a top-level attribute to the JSON you are already returning.
5. prettyCheckable
prettyCheckable replaces your default checkboxes and radio inputs with better-looking custom ones. It is compatible with most major browsers, including Internet Explorer 7+, and also with mobile browsers. You can edit it in Photoshop, and choose from four color options, but the real icing on the cake is that it is easy to implement.
6. X-editable
This plugin lets you create editable on your page, and it includes both popup and inline modes. This makes adding or removing fields way more easy; it speeds up development, requiring no special FORM markup, and it means you will not clog up you application with an obscene number of screens.
7. Bootstrap Combobox
Sometimes, simplicity is the key, and simplicity does not need a lot of presentation. Here, it is all in the title. Bootstrap Combobox is, as the title suggests, a combobox plugin, for Bootstrap. We can, however, add that it comes with three different types of comboboxes so that you can choose the right one for your website.
8. Tocify
Scanning your page on DOMReady for headings, Tocify dynamically creates a Bootstrap-styled table of contents. It also provides support for smooth scrolling, scroll highlighting, scroll page extension, and forward and back button support.
9. Contact Form for Bootstrap
It is hard to overestimate the importance of contact forms when creating a site that is supposed to attract potential clients. That’s why we simply had to have a contact form item on our list. Like the plugins name suggests, Contact Form for Bootstrap is a simple PHP form, that should be easy to implement into anything built with Bootstrap.
10. Bootstrap Link Preview
Actual addresses do not make users click on links. Previews, on the other hand, give users a taste of what they will get once they click on the link, and we are willing to wager that that is why Facebook plays such an important role in promoting blog content and things like that. This plugin allows you to make similar previews on your website. To see how they look, just check out the demo.
11. Datapicker for Bootstrap
An explanation as to what this plugin does seems irrelevant, but we will explain anyway. You know when you are booking a flight or a room, and you are selecting the date when you get there, and the date you are leaving? Yeah, well, it’s that, basically. Also, you can use it to let users sort through your content by date.
12. Tab Drop for Bootstrap
Tab drops are always useful when creating a content-heavy website. The make the website so much more organized and easier to navigate, so people won’t get scared and quickly go to another website. Tab Drop does only support horizontal tabs and pills, but it works with responsive design, so there’s no extra work to optimize it for mobile browsers.
13. Bootstrap Confirmation
Confirmations should not kill workflow. Big boxes are an annoyance, and using them makes you test your user’ goodwill. Bootstrap Confirmation offers a discreet and, furthermore, esthetic alternative to popups, namely popovers. They are smaller, and they appear with a pleasant fade in/fade out effect, that doesn’t distract the user form whatever he was doing on your website.
14. Flippant.js
CSS effects make a web site flashy, and they make browsing it playful and enjoyable. With Flippant.js, you can make elements flip, and reveal further content. The effect is smooth, so you won’t be sacrificing substance for style, and the website will still run smoothly.
15. jQuery File Upload
Working with any server-side platform that supports standard HTML form file uploads, this file upload widget comes equipped with everything you might need from a file upload option, including multiple file selection, validation, and preview images.
16. Bootstrap Hover Dropdown Plugin
The name should give you a pretty good indication as to what this plugin does, but it’s the behind the scenes stuff that really make it stand out. To avoid the annoying 1 pixel gap that closes the nav menu, the dropdowns are dismissed after a configurable delay.
This creates a much better user experience, and invites in-depth exploration of the website. The plugin works in tandem with Bootstrap’s default behavior, meaning that the website will still be optimized for mobile touch-screen browsing.
17. BootstrapValidator
Another form plugin, only this time it’s a much more handsome one. Providing a sleek interface, and highlighting options to show if the user made any mistakes while filling it up, BootstrapValidator is a great choice for a ready-to-use form.
18. Bootstrap Social Buttons
You have to make your website social network-friendly, so you are definitely going to need social media buttons. If you don’t want to waste time making them yourself, you can try this excellent pack of buttons. It has all the social networks you can possibly need, and then some (we don’t really know what Renren is).
19. Bootstrap Image Gallery
An extension to the blueimp Gallery, this gallery is touch-ready, responsive, and customizable. It displays both images and videos in the modal Bootstrap framework, and can be navigated by both swipe, and mouse and keyboard. The plugin includes transition effects and full-screen support, and it can be extended to display other types of content.
20. Bootstro.js
If you have a great idea for a website, but it means making it more difficult to navigate, then you are going to need to make a guided tour for new users. You probably don’t want to waste time making one of those from scratch, and that’s why we added Boostro.js to our list.
That wraps up our list of Boostrap plugins to make your life easier. We hope you’ve found the items on our list useful, and that you’ve enjoyed reading this article. Share any thoughts you might have, as well as any cool plugins you think we should know about, in the comment section below.
Leave a Reply