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
   
Bootstrap 4 Theme For Chosen jQuery Plugin - Bootstrap4C

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.