Bootstrap Select

Pro Component

The Bootstrap Select is a form control that displays a collapsable list of multiple values. Bootstrap Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
Keep reading our Bootstrap Select examples and learn how to use this plugin.

Usage

CSS

In order to use this plugin on your page you will need to include the following styles in the “Page plugins” area from the page’s head section:

Copy

<link rel="stylesheet" href="./assets/css/material-dashboard.css">

JS

In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:

Copy

<script src="./assets/js/plugins/bootstrap-selectpicker.js"></script>

Example

Copy

<form>
  <select class="selectpicker" data-size="7" data-style="btn btn-primary" title="Single Select">
    <option disabled selected>Single Option</option>
    <option value="2">Is cool</option>
    <option value="3">Is great</option>
    <option value="4">Is bum</option>
    <option value="5">Is wow</option>
    <option value="6">Is damn</option>
  </select>
</form>

Multiple

Copy

<form>
  <select class="selectpicker" data-style="btn btn-primary" multiple title="Choose City" data-size="7">
    <option disabled selected> Multiple Options</option>
    <option value="2">Paris </option>
    <option value="3">Bucharest</option>
    <option value="4">Rome</option>
    <option value="5">New York</option>
    <option value="6">Miami </option>
    <option value="7">Piatra Neamt</option>
    <option value="8">Paris </option>
    <option value="9">Bucharest</option>
    <option value="10">Rome</option>
    <option value="11">New York</option>
    <option value="12">Miami </option>
    <option value="13">Piatra Neamt</option>
    <option value="14">Paris </option>
    <option value="15">Bucharest</option>
    <option value="16">Rome</option>
    <option value="17">New York</option>
    <option value="18">Miami </option>
    <option value="19">Piatra Neamt</option>
  </select>
</form>