Bootstrap 5 Integration

Compatibility

Tested and fully compatible with:

• Bootstrap 5.3.x
• Bootstrap 5.2.x
• Bootstrap 5.1.x

Include Order

We recommend the following order to include the files:

<!-- 1. Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 2. Vanilla Smart Select CSS -->
<link href="vanilla-smart-select.min.css" rel="stylesheet">

<!-- ... your content ... -->

<!-- 3. Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- 4. Vanilla Smart Select JS -->
<script src="vanilla-smart-select.min.js"></script>

Basic Example with Bootstrap

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="mb-3">
        <label for="my-select" class="form-label">Choose an option</label>
        <select id="my-select" class="form-select">
          <option value="">Select...</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
        </select>
      </div>
    </div>
  </div>
</div>

<script>
  new VanillaSmartSelect('#my-select', {
    placeholder: 'Select an option...',
    searchable: true
  });
</script>

Bootstrap Form Validation

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="required-select" class="form-label">Required Field</label>
    <select id="required-select" class="form-select" required>
      <option value="">Select...</option>
      <option value="1">Option 1</option>
    </select>
    <div class="invalid-feedback">
      Please select an option.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

<script>
  const select = new VanillaSmartSelect('#required-select');

  // Bootstrap validation
  const form = document.querySelector('.needs-validation');
  form.addEventListener('submit', function(e) {
    if (!form.checkValidity()) {
      e.preventDefault();
      e.stopPropagation();
    }
    form.classList.add('was-validated');
  });
</script>

Grid System

Use Bootstrap's grid system normally:

<div class="row">
  <div class="col-md-4">
    <select id="select1" class="form-select">...</select>
  </div>
  <div class="col-md-4">
    <select id="select2" class="form-select">...</select>
  </div>
  <div class="col-md-4">
    <select id="select3" class="form-select">...</select>
  </div>
</div>

Bootstrap Components

Vanilla Smart Select works well inside Bootstrap components like Cards, Modals, etc:

<div class="card">
  <div class="card-header">
    Settings
  </div>
  <div class="card-body">
    <label class="form-label">Category</label>
    <select id="category-select" class="form-select">...</select>
  </div>
</div>

Themes

Vanilla Smart Select automatically adapts to Bootstrap's theme:

• Respects Bootstrap's CSS variables when available
• .form-select classes are preserved
• Colors and spacing follow Bootstrap's standard

Known Issues

No known compatibility issues with Bootstrap 5. If you encounter any, please open an issue.