Bootstrap 5 Select: 5 Examples


The select is an HTML element to get the user input in the form of a dropdown list. Most often, the select is used in the HTML form. Bootstrap 5 provides built-in classes to design/style the HTML select for control

Forms in Bootstrap 4

Bootstrap 4 form validation

In this Forms tutorial of Bootstrap 4 Framework, you can see the online form examples utilizing available classes along with customized forms.

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

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

Check/Uncheck all Checkboxes by jQuery: SelectAllCheckbox

jQuery checkbox select all

What is SelectAllCheckbox plug-in? The SelectAllCheckbox is a jQuery-based plug-in that can be used to allow visitors to check or uncheck all options at one go. If the group of checkboxes contains a disabled checkbox(es) then its state will not be changed. You may add as many checkboxes as you require in the group as … Read more

5 Demos of Pretty Dropdowns by jQuery Plug-in (pretty-dropdowns)

jQuery-dropdown option groups

The pretty-dropdowns plug-in Turn the ordinary HTML select dropdowns into beautiful menus by using the pretty-dropdowns jQuery plug-in. It comes up with many features that you may customize as per the need of your theme of forms. The features include: You may add customized HTML to the menu items like icons, thumbnails, etc. Create menus … Read more

4 demos of input masking solution by using JavaScript

input masking Canadian zip

What is input masking library? In certain scenarios, you may require enabling the visitors for entering only the specific data in certain format. For example, zip code or credit card entries are in specific pattern where you may restrict certain data format. The input-masking library enables you making an input field masked with a specific data … 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

A jQuery Telephone Input with Flags and International Codes Plug-in

jquery eu telephone

The telephone input with flags and international codes The intl-tel-input is a jQuery-based plug-in that you may use with any input in your forms that enables users to enter phone numbers. This telephone input will display the respective flag. By IP lookup, the input will detect the user’s country and automatically set an example number … Read more