Bootstrap 4 Theme For Chosen jQuery Plugin - Bootstrap4C
File Size: | 41.4 KB |
---|---|
Views Total: | 21867 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
The Bootstrap4C provides an alternative stylesheet to the chosen plugin that makes the extended select boxes work with the latest Bootstrap 4 framework.
How to use it:
1. To get started, include the latest version of jQuery, Bootstrap 4, and Chosen plugin on the webpage.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.6/chosen.jquery.min.js"></script>
2. Download the zip and include the stylesheet component-chosen.min.css
in the head
section of the webpage.
<link href="dist/css/component-chosen.css" rel="stylesheet">
3. Initialize the chosen plugin on an select box and done.
<select id="single" class="form-control form-control-chosen" data-placeholder="Please select..."> <option></option> <option>Option One</option> <option>Option Two</option> <option>Option Three</option> <option>Option Four</option> <option>Option Five</option> <option>Option Six</option> <option>Option Seven</option> <option>Option Eight</option> </select>
$('.form-control-chosen').chosen({ // Chosen options here });
Changelog:
v1.1.1 (2019-05-25)
- Fixed [Tab] issue
2018-06-27
- added support for input group
This awesome jQuery plugin is developed by haubek. For more Advanced Usages, please check the demo page or visit the official website.