Bootstrap Select

The jQuery plugin that brings select elements into your website with intuitive multiselection, searching, and much more.

Official documentation

For more detailed information and examples, see the official documentation: Bootstrap-select .

How to use?

Add the following library Bootstrap-select stylesheet and script in your page.

Copy-paste the stylesheet <link> into your <head> to load the CSS.

<link rel="stylesheet" href="../../assets/vendor/bootstrap-select/dist/css/bootstrap-select.min.css">
Copy

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

<script src="../../assets/vendor/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
Copy

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

<script src="../../assets/js/components/hs.selectpicker.js"></script>
Copy

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // initialization of select picker
    $.HSCore.components.HSSelectPicker.init('.js-select');
  });
</script>
Copy

Basic example 

<!-- Select -->
<select class="js-select selectpicker dropdown-select"
        data-style="btn-sm btn-primary">
  <option value="one" selected>One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="four">Four</option>
</select>
<!-- End Select -->
Copy

Select boxes with optgroups 

<!-- Select -->
<select class="js-select selectpicker dropdown-select"
        data-style="btn-sm btn-primary">
  <optgroup label="Picnic">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </optgroup>
  <optgroup label="Camping">
    <option>Tent</option>
    <option>Flashlight</option>
    <option>Toilet Paper</option>
  </optgroup>
</select>
<!-- End Select -->
Copy

Custom content 

<!-- Select -->
<select class="js-select selectpicker dropdown-select mb-3" title="Choose member"
        data-style="btn-sm btn-primary"
        data-live-search="true"
        data-searchbox-classes="input-group-sm">
  <option value="project1" data-content='
    <span class="d-flex align-items-center">
      <span class="u-xs-avatar mr-2">
        <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
      </span>
      <span>Amanta Owens</span>
    </span>'>
    Amanta Owens
  </option>
  <option value="project2" data-content='
    <span class="d-flex align-items-center">
      <span class="btn btn-xs btn-icon btn-soft-success rounded-circle mr-2">
        <span class="btn-icon__inner">SD</span>
      </span>
      <span>Sebastian Diaz</span>
    </span>'>
    Sebastian Diaz
  </option>
  <option value="project3" data-content='
    <span class="d-flex align-items-center">
      <span class="btn btn-xs btn-icon btn-soft-indigo rounded-circle mr-2">
        <span class="btn-icon__inner">ED</span>
      </span>
      <span>Eliza Donovan</span>
    </span>'>
    Eliza Donovan
  </option>
  <option value="project4" data-content='
    <span class="d-flex align-items-center">
      <span class="u-xs-avatar mr-2">
        <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img12.jpg" alt="Image Description">
      </span>
      <span>Cameron Brown</span>
    </span>'>
    Cameron Brown
  </option>
</select>
<!-- End Select -->
Copy
Previous Animations
Next Bootstrap tagsinput
Contact Us