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="" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<script src="" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src=""></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 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>
  // Chosen options here


v1.1.1 (2019-05-25)

  • Fixed [Tab] issue


  • 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.