Katarina HarbuzavaEverybody is familiar with Bootstrap. It is the most popular, fast, and convenient framework for developing mobile-first responsive websites and apps. Bootstrap is famous thanks to its flexible and fully responsive grid system, that allows building apps both for mobile and desktop. Nowadays Bootstrap offers much more than a grid system, it contains its own SVG icon library, typography, tables, dozens of components, like a carousel, close button, dropdowns, and much more.
Other than that, you can find UI packages, libraries, components, and plugins on the Internet to improve your app. Developers from all over the world try to contribute to the development of Bootstrap and make the framework better. Although these developers are not from the Bootstrap development team, sometimes they make quality libraries and components that are fully compatible with the original Bootstrap library and extend it. Such libraries and plugins get their recognition on GitHub with a lot of stars and contributors.
We are going to speak about essential Bootstrap plugins that can be helpful to your next project. Before we start, it would be good to discuss the difference between such concepts as plugins and components. They may sound similar and sometimes they are confused or misused indeed, so we define these concepts to clarify what this article is about (about plugins).
Plugins and components the difference
Plugins are small program codes that extend the functionality of the main application for which they work. They add specific features to an existing application. In the official documentation, Bootstrap offers a list of plugins that you can use for your app. The list includes 12 custom jQuery plugins like modal, dropdown, alert, button, carousel, etc.
Components are reusable blocks of code. Components are typically more complex, with extensive functionality and capabilities. They vary depending on the complexity of the functionality they provide: it can be a simple and lightweight UI element like a button or a little separate application with its own functionality, database, and representation. According to the official Bootstrap documentation, Bootstrap offers a huge list of components, such as dropdowns, alerts, buttons, input groups, page header, etc.
Buttons, alerts, dropdowns are both plugins and components? Is there any mistake?
Well, no. As we have mentioned, components vary from very simple tools such as buttons and alerts to very complex libraries that even can be named small applications.
_But in that case what is the difference between a button as a plugin and a button as a component? _
The main difference lies in the functionality of an element you are going to use. A plugin is a software that adds additional features to an application.
Many plugins are simple code snippets. For example, a Google sign-in plugin is a basic UI wrapper on an API call. Or let’s take a look at the Yandex social sharing buttons.
Another famous example of a plugin is the outdated Flash player that allowed to play videos and other flash content in the browser. Flash player wasn’t embedded in the web browser and was made by a company, that didn’t participate in the development of browsers. However, you could install it on your browser and got the opportunity of playing media content inside the browser window.
All these three examples are plugins without complex logic. For example, the Google sign-in plugin allows users to log in, but it has no functions to store and track the information, so you have to write that block of code on your own.
Components also can be quite simple, that is why there are doubts about whether code is a plugin or a component. But when we come to the complex logic of an element with a lot of functions and methods, maybe even a database, most likely we deal with a component.
A good set of complicated components can be found on Onymos. The list includes bio-authentication, chat, a component for work with Bluetooth devices, geolocation identification, in-app purchases, payments. Each of them is a stand-alone complex system that you can use in the app.
How to choose plugins for bootstrap?
First of all, you need to ask yourself a question whether you need to use a third-party plugin? If you use Bootstrap, it will be good to learn an official Bootstrap documentation. Learn it thoroughly and you will see that it covers many use cases. There is a high probability that embedded plugins and components Bootstrap offers will satisfy most of the needs you have. If your task can be solved within what they offer, I encourage you to use them. Here is a good article to find out more about bootstrap standard plugins.
If you familiarize yourself with the official Bootstrap documentation, but understood, that you need more than that, be ready to add jQuery to your project because almost all plugins use it. If the project is built with jQuery, there will be no difficulties. However, if the project is jQuery-free it’s good to think whether you are ready to plug jQuery into the project.
Let’s keep moving, there are thousands of cool plugins that extend Bootstrap possibilities. Furthermore, several plugins may do the same job, but in different ways.
“Cool” is OK, but it is still not a strong reason to use a plugin. Each plugin you use should extend or add something significant to the app, that will be useful for app users.
As highly specialized programs, plugins perform a single function. Multifunctional plugins are rare and unnecessary. It would be more appropriate to install three plugins that implement different functions than to install a three-in-one plugin and use only one function, while the other two will only burden the system.
To get started with Bootstrap plugins you don’t need to be an experienced developer. Using Bootstrap Data API most plugins can be run without writing a single line of code. Due to a large number of plugins for Bootstrap, it would be good to define criteria for how we are going to evaluate them.
The criteria:
The date of the last update. Technologies don’t stand still, the plugin that was developed ten years ago and hasn’t been updated since that hardly meets the needs of modern apps.
Compatibility with the latest Bootstrap version. The latest version is v.5 that was officially released on June 16, 2020. However, many plugins were built for earlier versions of Bootstrap, while new plugins for the 5th version haven’t got their recognition yet or just haven’t appeared, so you don’t see plugins built on top of the latest version.
Developers team support. The essential part of every product is the support of the development team. Since we consider free plugins in the article, free support doesn’t come around very often. Most supports ends with a GitHub issues page.
Documentation. If the documentation is well organized and provides a lot of information for developers, it will be enough to start using a plugin. The product with no or lacking documentation is not viable. Good documentation doesn’t replace effective support, but it’s better than nothing.
Rating. A plugin with a lot of positive reviews is more reliable than one without a lot of happy users under the belt.
Dependencies. Some plugins require extra dependencies, some not. It’s better to pick the ones that don’t need additional libraries.
To simplify the navigation, we divide the list into several groups:
- Bootstrap plugin/component packages
- Bootstrap single stand-alone plugins
- Special services for building Bootstrap plugins
- Bonus! Funny Bootstrap plugin
Top essential bootstrap plugins
Libraries and plugin/component packages
UI Bootstrap
The package extends Bootstrap with an additional set of native AngularJS directives based on Bootstrap’s markup and CSS without jQuery dependency. It offers a wide range of plugins like modal, rating, tabs, tooltip, date pickers, buttons, etc.
Website/demo: https://angular-ui.github.io/bootstrap/
The last update: October 2017
Compatibility with Bootstrap versions: requires Bootstrap CSS version 3.x or higher and it has been tested with Bootstrap CSS 3.3.6.
Developer team support: no
Documentation: Each plugin goes with extensive documentation and interactive examples.
Rating: 14,6 k on GitHub https://github.com/angular-ui/bootstrap
Dependencies: AngularJS, Angular-animate, Angular-touch, Bootstrap CSS
Bootstrap Vue
Bootstrap Vue is a library with components, over 45 available plugins, and icons. It uses the Vue.js framework for building user-friendly, mobile-first applications. The list of plugins contains alerts, avatars, calendars, different elements for forms (datepickers, checkboxes, input fields, radio inputs, etc.), input group, media, overlay, pagination, and much more.
Website/demo: https://bootstrap-vue.org/
The last update: January 2021
Compatibility with Bootstrap versions: Bootstrap v4.3.1 and higher
Documentation: A separate page for documentation with getting started section and full documentation for every component and plugin.
Developers team support: yes, vie the issues page in GitHub
Rating: 12.9k on GitHub https://github.com/bootstrap-vue/bootstrap-vue
Dependencies: Vue.js v2.6, Popper.js v1.16,PortalVue v2.1
Additional feature: an interactive playground to experiment with the various components https://bootstrap-vue.org/play
Jasny Bootstrap
As you understand Jasny Bootstrap can add some components to your app. You can pick plugins from the package to include in your project or connect them all at once with the jasny-bootstrap.js file. You can use all plugins through the markup API without writing JS code. Jasny Bootstrap also gives the option to unbind all events on the document namespace. The package includes the nav menu, alerts, buttons, off-canvas, row link, and file input.
Website/demo: http://www.jasny.net/bootstrap/
The last update: February 2019
Compatibility with Bootstrap versions: Bootstrap 4 and higher
Documentation: documentation about using API, separate pages for plugins samples
Developers team support: yes, via GitHub issues page
Rating: 2.7k on GitHub https://github.com/jasny/bootstrap
Dependencies: no
Krajee jQuery plugins
Krajee jQuery is a collection of useful Bootstrap plugins, built using jQuery. The collection is not very big and contains less than ten elements, but every plugin feels like a mature product with one of the most extensive documentation for a free product that can be.
Website/demo: https://plugins.krajee.com/
The last update: May 2019 – March 2021 depending on the plugin
Compatibility with Bootstrap versions: Bootstrap 3.x and higher
Documentation: yes, еру documentation contains installation methods, browser support information, usage samplesб and more
Developers team support: yes, via GitHub, quickly support
Rating: 220 – 5.000 stars on GitHub for different plugins
Dependencies: jQuery
Single components:
Bootstrap datepicker
Simple and highly customizable date picker with various data formats, additional functional buttons, etc. It allows to disable or highlight days of the week, show the serial number of weeks in the year, and provide functionality that will be very helpful in any type of app that uses a date picker.
Website/demo: https://github.com/uxsolutions/bootstrap-datepicker
The last update: Nay, 2019
Compatibility with Bootstrap versions: Bootstrap 2.0.4 and higher
Documentation: yes, with demos, data API, all used methods, and events
Developers team support: yes, via GitHub issues page
Rating: 12.3k on GitHub
Dependencies: bootstrap’s dropdown component, jQuery 1.7.1+
Bootstrap multiselect
The plugin is a jQuery-based multi-selector that uses select inputs with multiple attributes. You are free to use different types of selectors with/without confirmation popup, single/multiple attribute selection, group of attributes in the dropdown list, and much more. It is a highly customizable well-tested plugin (you can literally run an online test for that selector) for free usage.
Website/demo: http://davidstutz.github.io/bootstrap-multiselect/
The last update: November 2020
Documentation: yes, with demos, configuration options, styling, methods, and even frequently asked question section
Developers team support: yes, via GitHub issues page
Rating: 3.4k on GitHub https://github.com/davidstutz/bootstrap-multiselect
Dependencies: jQuery
jQuery multiple select plugin
The jQuery multiple select is a jQuery plugin that allows users to select multiple options, filter options in the dropdown list, and search for them.
Website/demo: https://www.jqueryscript.net/demo/jQuery-Multiple-Select-Plugin-For-Bootstrap-Bootstrap-Multiselect/
The last update: January 2021
Compatibility with Bootstrap versions: Bootstrap 3+
Documentation: yes, concise documentation with several samples
Developers team support: no
Rating: 496k watches on jqueryscript.net
Dependencies: jQuery
Nice Clean file input plugin with jQuery
That file input plugin is a jQuery-based file uploader where you can add multiple files for uploading and see uploaded documents thanks to the file preview option.
Website/demo: https://www.jqueryscript.net/demo/Nice-Clean-File-Input-Plugin-With-jQuery-Bootstrap-3-Bootstrap-Fileinput/
The last update: February 2021
Compatibility with Bootstrap versions: Bootstrap 3 and higher
Documentation: a brief installation instruction and a list of methods
Developers team support: no
Rating: 63k watches on jqueryscript.net
Dependencies: jQuery
jQuery file upload plugin
That plugin is a file uploader with a beautiful design, multiple file upload options, a progress bar, and dozens of other features. It works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go, etc.) that supports standard HTML form file uploads. There is an embedded editor for photos with filters, brightness, and color configurations.
Website/demo: http://blueimp.github.io/jQuery-File-Upload/
The last update: December 2020
Compatibility with Bootstrap versions: Bootstrap v.3 and higher
Documentation: yes, how to set up, features description, browser compatibility
Developers team support: yes, via GitHub issues page and Stack Overflow page
Rating: 31k on GitHub
Dependencies: jQuery v1.7+, jQuery UI widget factory v1.9+, jQuery Iframe Transport
Touch friendly input plugin
It is a jQuery-based touch-friendly plugin that adds two buttons “+” and “-” to a numerical text input field and allows to increment and decrement the number.
Website/demo: https://www.jqueryscript.net/demo/Touch-Friendly-jQuery-Input-Spinner-Plugin-For-Bootstrap-3-TouchSpin/
The last update: April 2020
Compatibility with Bootstrap versions: Bootstrap v.3 and higher
Documentation: short documentation with settings and event options
Developers team support: no
Rating: 27k watches on jqueryscript.net
Dependencies: jQuery
Show/hide password field text
Website/demo: https://www.jqueryscript.net/demo/Show-Hide-Password-Field-Text-with-jQuery-Bootstrap/
The last update: 2019
Compatibility with Bootstrap versions: Bootstrap v.3 and higher
Documentation: less than 50 lines of code with comments
Developers team support: no
Rating: 55k watches on jqueryscript.net
Dependencies: jQuery, Font Awesome(optional)
Lightbox image and video gallery
Lightbox Gallery is a plugin that shows videos and pictures in the gallery. You can play videos by opening them in a small popup with a YouTube player (video is stored on YouTube).
Website/demo: http://ashleydw.github.io/lightbox/#image-gallery
The last update: October 2017
Documentation: yes, detailed description with examples
Developers team support: no
Rating: 1.9 k on GitHub https://github.com/ashleydw/lightbox
Dependencies: no
Blueimp Gallery
Blueimp gallery is a responsive image and video gallery, that features swipe and mouse navigation, animated transition effects, full-screen mode. You can call this extension as a function that really simplifies the process.
Website/demo: https://blueimp.github.io/Gallery/
The last update: August 2020
Compatibility with Bootstrap versions: Bootstrap v.3 and higher
Documentation: well-documented, there is a separate demo page
Developers team support: no
Rating: 3.5k on GitHub https://github.com/blueimp/Gallery
Dependencies: no
Yamm 3 megamenu
It seems like the author of that megamenu likes cats:) This plugin is a lightweight and pure CSS Bootstrap-based megamenu.
Website/demo: http://geedmo.github.io/yamm3/#
The last update: May 2019
Compatibility with Bootstrap versions: Bootstrap 3 and higher
Documentation: a brief description of the project on GitHub and a short description of options on the demo page
Developers team support: no
Rating: 1.2k on GitHub https://github.com/geedmo/yamm3
Dependencies: no
Data tables
Cloud tables are tables for databased driven applications, such as admin panel, booking system, scoring apps, etc.
Website/demo: https://datatables.net/examples/styling/bootstrap
The last update: no information
Compatibility with Bootstrap versions: Bootstrap v.3 and higher
Documentation: yes, examples, styling, API information, server-side section, and much more
Developers team support: yes, if you purchase the pro version
Rating: no information
Dependencies: jQuery
jQuery gridform
jQuery gridform is a plugin for creating complex forms with a constructor.
Website/demo: http://gunnar-t.github.io/jquery.gridform/index.html
The last update: 2015
Compatibility with Bootstrap versions: Bootstrap v.3.x only
Documentation: yes, extensive documentation
Developers team support: no
Rating: less than 100 stars on GitHub https://github.com/gunnar-t/jquery.gridform
Dependencies: jQuery, Font Awesome (optional)
Color Palette for Bootstrap
Website/demo: https://extremefe.github.io/bootstrap-colorpalette/
The last update: 2013
Compatibility with Bootstrap versions: Bootstrap v.2 and higher
Documentation: as a set of examples. No detailed documentation
Developers team support: no
Rating: less than 100 stars on GitHub https://github.com/extremeFE/bootstrap-colorpalette
Dependencies: jQuery 1.8.1+
Webui popover
Website/demo: http://sandywalker.github.io/webui-popover/demo/
The last update: November 2015
Compatibility with Bootstrap versions: Bootstrap 2+
Documentation: yes, with interactive examples, animation options, events list, etc.
Developers team support: no
Rating: 885 stars on GitHub https://github.com/sandywalker/webui-popover
Dependencies: jQuery v1.7+
Bootstrap show modal
Website/demo: https://www.bestjquery.com/?SAwiKw17
The last update: January 2021
Compatibility with Bootstrap versions: Bootstrap v.4 only
Documentation: yes, code snippets with examples
Developers team support: no
Rating: less than 100 stars on GitHub https://github.com/shaack/bootstrap-show-modal
Dependencies: jQuery
Bootstrap combobox
Website/demo: http://bootstrap-combobox-test.herokuapp.com/
The last update: November 2019
Compatibility with Bootstrap versions: Bootstrap v.2, v.3
Documentation: yes, short documentation in the readme file, live samples
Developers team support: no
Rating: 802k on GitHub https://github.com/danielfarrell/bootstrap-combobox
Dependencies: jQuery
Special services:
Powr.io
Powr.io is a service that allows to pick up a plugin for CMSs, frameworks, libraries, and much more. One of the frameworks is Bootstrap. The amount of plugins impresses. You can find here very rare elements like the zoom donation button, or captcha form. They all very adopted to different technologies and gather together in one place. Convenient.
Powr.io offers a free trial where you can download some plugins. However, the most value from that service you get when you buy at least the minimal cost package for less than 5 $.
Website/demo: https://www.powr.io/tutorials/
The last update: constantly updated
Compatibility with Bootstrap versions: no information
Documentation: yes, for every plugin with a live demo sample
Developers team support: 24/7 online support and help center
Rating: 1,2 million plugins installation
Dependencies: no
Bootstrap magic
Bootstrap magic is a constructor where you can build plugins online with a special demo page. You can change spacing, margin, color, sizes, and more for every plugin and download them.
Website/demo: https://pikock.github.io/bootstrap-magic/app/index.html#!/editor
The last update: 2018
Compatibility with Bootstrap versions: Bootstrap v.4
Documentation: yes, on the demo page. The constructor itself contains methods and their description for every plugin that you can alter and see the immediate
Developers team support: no
Rating: 1.7k on GitHub https://github.com/pikock/bootstrap-magic
Dependencies: no
Bootstrap button generator
Website/demo: https://bootsnipp.com/buttons#
The last update: no information
Compatibility with Bootstrap versions: Bootstrap v.2.3 – 4.1
Documentation: no, only a constructor with one-line output
Developers team support: no
Rating: 2.8k likes on Facebook
Dependencies: no
Bonus! Funny and unusual plugin:
Light 404
A humorous 404 error page with a responsive design and funny light-on effect that changes the content of the page. To download the plugin you need to fill the contact form at the bottom of the page.
Website/demo: https://bootstraptema.ru/_sf/21/2191.html
The last update: October 2017
Compatibility with Bootstrap versions: Bootstrap v.3
Documentation: no
Developers team support: no
Rating: more than 1 thousand downloads
Dependencies: Bootstrap CDN, jQuery CDN, jQuery NiceScroll, Modernizr
About Flatlogic
At Flatlogic, we help businesses to speed up web development with our beautifully designed web & mobile application templates built with React, Vue, Angular, React Native, and Bootstrap. During the last several years we have successfully delivered more than 100 custom dashboards and data management solutions to various clients starting from innovative startups to established and respected enterprises.
You might also like these articles:
6 Reasons To Use ReactJS For Web Development
Top 20+ Bootstrap Dashboard Templates To Use Absolutely Free
37 Simple And Useful Table Templates & Examples For Web Developers
