Bootstrap4C

chosen

This is a Fork of alxlit's great stylesheet (https://github.com/alxlit/bootstrap-chosen).

The Bootstrap4C Chosen is a simple Bootstrap 4 styled component for the brilliant Harvest Chosen jQuery plugin (https://github.com/harvesthq/chosen). The component change the default bitmap icons into nice SVG and works better with the Bootstrap 4 variables.

See demo here => https://haubek.github.io

NPM install

npm install bootstrap4c-chosen

CSS

<link href="path/to/component-chosen.min.css" rel="stylesheet">

HTML5 markup

<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>
</select>

<select id="multiple" class="form-control form-control-chosen" data-placeholder="Please select..." multiple>
  <option></option>
  <option>Option One</option>
  <option>Option Two</option>
  <option>Option Three</option>
</select>

Javascript

$('.form-control-chosen').chosen();

Release History

1.1.1

• Fixed tab issue (#11)
• Style fixes

1.1.0

• Upgraded to Bootstrap 4.3.1
• Added variables max-width and truncate (true by default) to choice
• Added background-color and box-shadow styles (gradient) to abbr
• Cleanup

1.0.13

• Fixed height issue (see #9)

1.0.12

• Name error

1.0.11

• Upgraded to Bootstrap 4.1.3
• Added composer.json (see #7 + #8)

1.0.10

• Added support for input group (see #6)

1.0.9

• Upgraded to Bootstrap 4.1.1
• Fixed focus input being visible (see #5)

1.0.8

• Upgraded to Bootstrap 4.1.0

1.0.7

• Added support for .is-valid and .is-invalid

1.0.6

• Upgraded to Bootstrap 4.0.0
• Fixed layout issue (#2)
• Added test.html

1.0.5

• SASS SVG URI

1.0.4

• Fixed error

1.0.3

• chosen-container-single-nosearch now display:none for the chosen-search div

1.0.2

• Support for optgroup and clickable optgroup

1.0.1

• Support for allow_single_deselect

1.0.0

• First release