<script>
  init({
    title: 'The Themes',
    desc: 'Multiple select with bootstrap theme.',
    links: [
      'multiple-select.min.css',
      'https://unpkg.com/multiple-select@1.5.2/dist/themes/bootstrap.min.css'
    ],
    scripts: ['multiple-select.min.js']
  })
</script>

<div>
  <div class="form-group row">
    <label class="col-sm-2 col-form-label col-form-label-sm">
      Select
    </label>

    <div class="col-sm-10">
      <select multiple="multiple" class="form-control form-control-sm" placeholder="form-control-sm">
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2 col-form-label">
      Select
    </label>

    <div class="col-sm-10">
      <select multiple="multiple" class="form-control" placeholder="form-control">
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2 col-form-label col-form-label-lg">
      Select
    </label>

    <div class="col-sm-10">
      <select multiple="multiple" class="form-control form-control-lg" placeholder="form-control-lg">
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2">
      Dropdown Select
    </label>

    <div class="col-sm-10">
      <select class="form-control ms-dropdown ">
        <optgroup label="Group 1">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </optgroup>
        <optgroup label="Group 2">
          <option value="4">Option 4</option>
          <option value="5">Option 5</option>
          <option value="6">Option 6</option>
        </optgroup>
        <optgroup label="Group 3">
          <option value="7">Option 7</option>
          <option value="8">Option 8</option>
          <option value="9">Option 9</option>
        </optgroup>
      </select>
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2">
      Dropdown Dividers
    </label>

    <div class="col-sm-10">
      <select class="form-control ms-dropdown ms-dropdown-divider">
        <optgroup label="Group 1">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </optgroup>
        <optgroup label="Group 2">
          <option value="4">Option 4</option>
          <option value="5">Option 5</option>
          <option value="6">Option 6</option>
        </optgroup>
        <optgroup label="Group 3">
          <option value="7">Option 7</option>
          <option value="8">Option 8</option>
          <option value="9">Option 9</option>
        </optgroup>
      </select>
    </div>
  </div>
</div>
</div>

<script>
  function mounted() {
    $('select').multipleSelect()
  }
</script>
