Select Dropdown with Hierarchy by using jQuery

Bootstrap select hierarchy

By using the hierarchy-select jQuery plug-in, you may create a dropdown with options in the hierarchy. Normally, the select dropdown displays options in the same order as provided. This plug-in allows presenting the options in a hierarchal way and is implemented with the Bootstrap framework. You have to use a few data attributes to define … Read more

2 Demos of Displaying Bootstrap Alert by jQuery Events

bootstrap alert danger

Display alerts of Bootstrap by jQuery events In the basic alerts of Bootstrap tutorial, I covered how to use the alerts component of Bootstrap as the web page loads. The jquery-bs-alerts is a jQuery plug-in for displaying the Bootstrap alerts via jQuery events. For example, displaying a Bootstrap alert as a button is clicked. Developer … Read more

Turn a Bootstrap Dropdown into Multi-Select Button using jQuery

jQuery bootstrap dropdown button

The dropdown-checkboxes plug-in The jQuery dropdown-checkboxes plug-in will turn a Bootstrap select dropdown into the multi-select input button where options are available with checkboxes. This is a compact dropdown/button and a user may select one or more options by ticking the checkboxes. The selected checkbox/option values are stored in a hidden input field. Developer’s page … Read more

31 Animated Bootstrap Popovers and Modals by velocity.js

bootstrap popover animated

Creating animated modal and popovers with Bootstrap and velocity.js I have covered a number of plug-ins for creating simple and advanced modal windows that are based on Bootstrap framework. You can read by visiting the links below: Creating simple modals by using Bootstrap framework is written here. A nice jQuery plug-in (bootstrap3-dialog) is also covered … Read more

Bootstrap Sidebar Navigation Component

bootstrap sidebar slide

Creating responsive sidebar sliding menu bar in Bootstrap In this post, I am going to share a nice and simple sliding menu bar that slides from left to right. As you click the typical three horizontal lines of “mobile icon”, the menu will open in a sliding manner. As it opens, a cross icon will … Read more

A Bootstrap / jQuery based select box with search and multi-select options

jquery select box

A beautiful select box based on jQuery / Bootstrap The selectr is a jQuery plug-in for creating the pretty select box on your website that allows multi-selection along with searching the options. You may limit the maximum number of selections as well. In the Bootstrap based select component, I showed you a few demos of creating … Read more

Bootstrap / jQuery image upload preview plug-in

jquery image upload preview

The image upload plug-in If you require enabling your visitors to upload image files through web forms and before uploading the image, preview it then img-upload plug-in can be the right choice. The bootstrap-imageupload is a jQuery based plug-in that is implemented with Bootstrap framework. You may also use it independently if your website is … Read more

2 Demos of Bootstrap / jQuery based WYSIWYG text editor

bootstrap text editor

The WYSIWYG text editor for your website If your project is based on Bootstrap framework and you require using a text editor with rich features then line-control is a light-weight choice. The line-control is a jQuery based plug-in which is implemented on Bootstrap framework. It is a responsive and fast text editor that is supported … Read more

Bootstrap News Ticker with jQuery: 3 Demos

bootstrap news ticker icons

The Bootstrap news ticker by using jQuery In this article, I am going to share a nice jQuery plug-in for running news ticker vertically on your web pages. The plug-in is implemented on the Bootstrap 3 framework. The news ticker is auto-play as well as supports up/down manual movement. You may scroll any content in … Read more

10 Demos of Bootstrap Multiselect Dropdown by using jQuery

bootstrap multiselect

The Bootstrap multiselect with jQuery The multiselect dropdown allows the visitors of the website selecting multiple options from a dropdown in a form. Although, you may achieve that by using the multiple attribute in the <select> tag of HTML, however, instead of a dropdown, a list view type is displayed that allows users to choose … Read more

A jQuery / Bootstrap Treeview plug-in with 2 Demos

bootstrap treeview

The easy Treeview plug-in for your website The easy-tree plug-in which is based on jQuery with Bootstrap framework support can be used for creating the treeview structure in your web pages easily. All you need to do is to include the plug-in JS and CSS files (change as per needs), use the easy-tree CSS class … Read more

A Bootstrap / jQuery checkout / step wizard plug-in: 4 demos

bootstrap wizard arrows

The step wizard plug-in The SmartWizard is a cool plug-in for creating the step by step process for different purposes like checkout, account creation with validation, etc. The plug-in is based on jQuery with the support of Bootstrap framework. In the following section, you may see the demos and how to set up SmartWizard plug-in … Read more

Bootstrap 3 Scrolling Tabs by using jQuery Plug-in

bootstrap tabs scroll

The Bootstrap default tabs vs scrolling tabs In the Bootstrap tabs tutorial, I showed a few demos of creating tabs by using built-in classes of the Bootstrap framework. If you look at the demos by squeezing the screen (if look at it on large screens), then you can see the tabs will wrap and may … Read more

Bootstrap Modals by bootstrap3-dialog plug-in: 5 demos

bootstrap modal buttons

Creating Bootstrap modal easily with a jQuery plug-in By using the modal component of Bootstrap framework, you may create the modal dialog in your web pages. All it requires is to include the Bootstrap CSS and JS files, jQuery library and using the modal related classes in the markup section. I have written a guide … Read more

Bootstrap 3 Grid Columns: A plug-in for Same Height Columns Layout

bootstrap grid

The Bootstrap grid columns plug-in The Bootstrap grid system enables to create the columns with equal width quite easily. For example, if you need three three-column layouts then you may use three div elements with .col-md-4 class (in each div).  If four columns in a row are required then you may use .col-md-3 class. Just … Read more