<div class="col-12">
  <div class="card">
    <h5 class="card-header">Select2</h5>
    <div class="card-body">
      <div class="row g-6">

        <!-- Basic -->
        <div class="col-md-6">
          <label class="form-label">Basic</label>
          <select class="select2 form-select form-select-lg">
            <option value="AK">Alaska</option>
            <option value="HI">Hawaii</option>
            <option value="CA">California</option>
            <option value="NV">Nevada</option>
          </select>
        </div>

        <!-- Multiple -->
        <div class="col-md-6">
          <label class="form-label">Multiple</label>
          <select class="select2 form-select" multiple>
            <optgroup label="Pacific Time Zone">
              <option value="CA">California</option>
              <option value="NV">Nevada</option>
            </optgroup>
            <optgroup label="Eastern Time Zone">
              <option value="FL">Florida</option>
              <option value="NY">New York</option>
            </optgroup>
          </select>
        </div>

      </div>
    </div>
  </div>
</div>
    

<!-- Tagify -->
<div class="col-12">
  <div class="card">
    <h5 class="card-header">Tagify</h5>
    <div class="card-body">
      <div class="row g-6">

        <!-- Basic -->
        <div class="col-md-6">
          <label class="form-label">Basic</label>
          <input class="form-control"
                 value="Tag1, Tag2, Tag3" />
        </div>

        <!-- Custom Inline Suggestions -->
        <div class="col-md-6">
          <label class="form-label">Custom Inline Suggestions</label>
          <input class="form-control"
                 placeholder="select technologies"
                 value="css, html, javascript" />
        </div>

        <!-- Custom List Suggestions -->
        <div class="col-md-6">
          <label class="form-label">Custom List Suggestions</label>
          <input class="form-control"
                 placeholder="select technologies"
                 value="css, html, php" />
        </div>

        <!-- Users List -->
        <div class="col-md-6">
          <label class="form-label">Users List</label>
          <input class="form-control"
                 value="abatisse2@nih.gov, Justinian Hattersley" />
        </div>

        <!-- Email -->
        <div class="col-md-6">
          <label class="form-label d-block">Email List</label>
          <input class="tagify-email-list"
                 value="some56.name@website.com" />
          <button type="button"
                  class="btn btn-sm rounded-pill btn-icon btn-outline-primary">
            <i class="bx bx-plus"></i>
          </button>
        </div>

      </div>
    </div>
  </div>
</div>
<!-- /Tagify -->
    

<!-- Bootstrap Select -->
<div class="col-12">
  <div class="card">
    <h5 class="card-header">Bootstrap Select</h5>
    <div class="card-body">
      <div class="row g-6">

        <!-- Basic -->
        <div class="col-md-6">
          <label class="form-label">Basic</label>
          <select class="selectpicker w-100" data-style="btn-default">
            <option>Rocky</option>
            <option>Pulp Fiction</option>
            <option>The Godfather</option>
          </select>
        </div>

        <!-- Multiple -->
        <div class="col-md-6">
          <label class="form-label">Multiple</label>
          <select class="selectpicker w-100" data-style="btn-default" multiple
                  data-icon-base="icon-base bx" data-tick-icon="bx-check text-primary">
            <option>Rocky</option>
            <option>Pulp Fiction</option>
            <option>The Godfather</option>
          </select>
        </div>

        <!-- Live Search -->
        <div class="col-md-6">
          <label class="form-label">Live Search</label>
          <select class="selectpicker w-100" data-style="btn-default" data-live-search="true">
            <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
            <option data-tokens="mustard">Burger, Shake and a Smile</option>
            <option data-tokens="frosting">Sugar, Spice and all things nice</option>
          </select>
        </div>

        <!-- Select / Deselect All -->
        <div class="col-md-6">
          <label class="form-label">Select / Deselect All</label>
          <select class="selectpicker w-100" data-style="btn-default" multiple data-actions-box="true">
            <option>Rocky</option>
            <option>Pulp Fiction</option>
            <option>The Godfather</option>
          </select>
        </div>

      </div>
    </div>
  </div>
</div>
<!-- /Bootstrap Select -->