Bootstrap4C

A selection of lightweight Bootstrap 4 UI components.

Chosen

bootstrap4c-chosen

single

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

single required

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

multiple

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

optgroup

<select id="optgroup" class="form-control form-control-chosen" data-placeholder="Please select..." multiple>
  <optgroup label="Label A">
    <option>Option One</option>
    <option>...</option>
  </optgroup>
  <optgroup label="Label B">
    <option>Option Five</option>
    <option>...</option>
  </optgroup>
</select>

optgroup clickable

<select id="optgroup_clickable" class="form-control form-control-chosen-optgroup" title="clickable_optgroup" data-placeholder="Please select..." multiple>
  <optgroup label="Label A">
    <option>Option One</option>
    <option>...</option>
  </optgroup>
  <optgroup label="Label B">
    <option>Option Five</option>
    <option>...</option>
  </optgroup>
</select>

Options

input group

<div class="input-group">
  <div class="input-group-prepend">
    <label class="input-group-text" for="">Options</label>
  </div>
  <select id="multiple" class="form-control form-control-chosen" data-placeholder="Please select..." multiple>
    <option></option>
    <option>Option One</option>
    <option>...</option>
  </select>
</div>

is valid

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

is invalid

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