bootstrap-select.html

---
alert-message: ', <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>, and <a href="http://silviomoreto.github.io/bootstrap-select/">http://silviomoreto.github.io/bootstrap-select/</a>.'
categories: [Widgets]
layout: page
title: Bootstrap-Select
resource: true
url-js-extra: 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js'
---
      <h3>Single-Select Dropdown</h3>
      <div class="form-group">
        <select class="selectpicker form-control">
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
          <option>Onions</option>
          <option>Mushrooms</option>
          <option>Pickles</option>
          <option>Mayonnaise</option>
          <option data-divider="true"></option>
          <option data-subtext="Hot">Tabasco</option>
          <option data-subtext="Hotter" disabled>Sriracha</option>
          <option data-subtext="Hottest">Wasabi</option>
        </select>
      </div>
      <h3>Disabled</h3>
      <div class="form-group">
        <select class="selectpicker form-control" disabled>
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
          <option>Onions</option>
          <option>Mushrooms</option>
          <option>Pickles</option>
          <option>Mayonnaise</option>
          <option data-divider="true"></option>
          <option data-subtext="Hot">Tabasco</option>
          <option data-subtext="Hotter" disabled>Sriracha</option>
          <option data-subtext="Hottest">Wasabi</option>
        </select>
      </div>
      <h3>Option Groups</h3>
      <div class="form-group">
        <select class="selectpicker form-control">
          <optgroup label="Picnic">
            <option>Mustard</option>
            <option>Ketchup</option>
            <option>Relish</option>
            <option>Onions</option>
            <option>Mushrooms</option>
            <option>Pickles</option>
            <option>Mayonnaise</option>
            <option data-subtext="Hot">Tabasco</option>
            <option data-subtext="Hotter" disabled>Sriracha</option>
            <option data-subtext="Hottest">Wasabi</option>
          </optgroup>
          <optgroup label="Camping">
            <option>Tent</option>
            <option>Flashlight</option>
            <option>Toilet Paper</option>
            <option>Sleeping Bag</option>
          </optgroup>
      </select>
      </div>
      <h3>Multiple Select</h3>
      <div class="form-group">
        <select class="selectpicker form-control" multiple data-selected-text-format="count>3">
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
          <option>Onions</option>
          <option>Mushrooms</option>
          <option>Pickles</option>
          <option>Mayonnaise</option>
          <option data-divider="true"></option>
          <option data-subtext="Hot">Tabasco</option>
          <option data-subtext="Hotter" disabled>Sriracha</option>
          <option data-subtext="Hottest">Wasabi</option>
        </select>
      </div>
      <h3>Data Live Search</h3>
      <div class="form-group">
        <select class="selectpicker form-control" data-live-search="true">
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
          <option>Onions</option>
          <option>Mushrooms</option>
          <option>Pickles</option>
          <option>Mayonnaise</option>
          <option data-divider="true"></option>
          <option data-subtext="Hot">Tabasco</option>
          <option data-subtext="Hotter" disabled>Sriracha</option>
          <option data-subtext="Hottest">Wasabi</option>
        </select>
      </div>
      <h3>Icons</h3>
      <div class="form-group">
        <select class="selectpicker form-control">
          <option data-icon="glyphicon-headphones">Mustard</option>
          <option data-icon="glyphicon-tint">Ketchup</option>
          <option data-icon="glyphicon-tree-conifer">Relish</option>
        </select>
      </div>
      <h3>With Help Text</h3>
      <div class="form-group">
        <label class="control-label" for="bootstrap-selectHelp">Bootstrap-Select with help text</label>
        <select class="selectpicker form-control" id="bootstrap-selectHelp">
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
          <option>Onions</option>
          <option>Mushrooms</option>
          <option>Pickles</option>
          <option>Mayonnaise</option>
          <option data-divider="true"></option>
          <option data-subtext="Hot">Tabasco</option>
          <option data-subtext="Hotter" disabled>Sriracha</option>
          <option data-subtext="Hottest">Wasabi</option>
        </select>
        <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
      </div>
      <h3>Validation States</h3>
      <div class="form-group has-success">
        <label class="control-label" for="bootstrap-selectSuccess">Bootstrap-Select with success</label>
        <select class="selectpicker form-control" id="bootstrap-selectSuccess">
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
          <option>Onions</option>
          <option>Mushrooms</option>
          <option>Pickles</option>
          <option>Mayonnaise</option>
          <option data-divider="true"></option>
          <option data-subtext="Hot">Tabasco</option>
          <option data-subtext="Hotter" disabled>Sriracha</option>
          <option data-subtext="Hottest">Wasabi</option>
        </select>
        <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
      </div>
      <div class="form-group has-warning">
        <label class="control-label" for="bootstrap-selectWarning">Bootstrap-Select with warning</label>
        <select class="selectpicker form-control" id="bootstrap-selectWarning">
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
          <option>Onions</option>
          <option>Mushrooms</option>
          <option>Pickles</option>
          <option>Mayonnaise</option>
          <option data-divider="true"></option>
          <option data-subtext="Hot">Tabasco</option>
          <option data-subtext="Hotter" disabled>Sriracha</option>
          <option data-subtext="Hottest">Wasabi</option>
        </select>
        <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
      </div>
      <div class="form-group has-error">
        <label class="control-label" for="bootstrap-selectError">Bootstrap-Select with error</label>
        <select class="selectpicker form-control" id="bootstrap-selectError">
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
          <option>Onions</option>
          <option>Mushrooms</option>
          <option>Pickles</option>
          <option>Mayonnaise</option>
          <option data-divider="true"></option>
          <option data-subtext="Hot">Tabasco</option>
          <option data-subtext="Hotter" disabled>Sriracha</option>
          <option data-subtext="Hottest">Wasabi</option>
        </select>
        <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
      </div>