Advanced Listbox

Multi Select

Code:

    <div class="form-row">
      <div class="form-group advanced-listbox">
        <label for="alb1" class="control-label">Assign Roles: </label>

        <div class="control-input">
          <select name="" id="alb1" class="selectpicker" multiple>
            <option value="Purchase Clerk">Purchase Clerk</option>
            <option value="Sales Clerk">Sales Clerk</option>
            <option value="Cash Book Clerk">Cash Book Clerk</option>
            <option value="Purchase Clerk Info">Purchase Clerk Info</option>
            <option value="Sales Clerk Info">Sales Clerk Info</option>
            <option value="Cash Book Clerk Info">Cash Book Clerk Info</option>
            <option value="Info Cash Two">Info Cash Two</option>
          </select>
        </div>
      </div>
    </div>
    

Single Select

Code:

    <div class="form-row">
      <div class="form-group advanced-listbox">
        <label for="alb2" class="control-label">Assign Roles: </label>

        <div class="control-input">
          <select name="" id="alb2" class="selectpicker">
            <option value="Purchase Clerk">Purchase Clerk</option>
            <option value="Sales Clerk">Sales Clerk</option>
            <option value="Cash Book Clerk">Cash Book Clerk</option>
            <option value="Purchase Clerk Info">Purchase Clerk Info</option>
            <option value="Sales Clerk Info">Sales Clerk Info</option>
            <option value="Cash Book Clerk Info">Cash Book Clerk Info</option>
            <option value="Info Cash Two">Info Cash Two</option>
          </select>
        </div>
      </div>
    </div>
    

Disabled

Code:

    <div class="form-row">
      <div class="form-group advanced-listbox">
        <label for="alb3" class="control-label">Assign Roles: </label>

        <div class="control-input">
          <select name="" id="alb3" class="selectpicker" disabled>
            <option value="Purchase Clerk">Purchase Clerk</option>
            <option value="Sales Clerk">Sales Clerk</option>
            <option value="Cash Book Clerk">Cash Book Clerk</option>
            <option value="Purchase Clerk Info">Purchase Clerk Info</option>
            <option value="Sales Clerk Info">Sales Clerk Info</option>
            <option value="Cash Book Clerk Info">Cash Book Clerk Info</option>
            <option value="Info Cash Two">Info Cash Two</option>
          </select>
        </div>
      </div>
    </div>
    

Error

Code:

    <div class="form-row">
      <div class="form-group advanced-listbox invalid error-hover">
        <label for="alb4" class="control-label">Assign Roles: </label>

        <div class="control-input">
          <select name="" id="alb4" class="selectpicker">
            <option value="Purchase Clerk">Purchase Clerk</option>
            <option value="Sales Clerk">Sales Clerk</option>
            <option value="Cash Book Clerk">Cash Book Clerk</option>
            <option value="Purchase Clerk Info">Purchase Clerk Info</option>
            <option value="Sales Clerk Info">Sales Clerk Info</option>
            <option value="Cash Book Clerk Info">Cash Book Clerk Info</option>
            <option value="Info Cash Two">Info Cash Two</option>
          </select>
          <span class="error-message" data-original-title="" title="">Error Message</span>
        </div>
      </div>
    </div>