Integração Bootstrap 5

Compatibilidade

Testado e totalmente compatível com:

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

Ordem de Inclusão

Recomendamos a seguinte ordem para incluir os arquivos:

<!-- 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">

<!-- ... seu conteúdo ... -->

<!-- 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>

Exemplo Básico com Bootstrap

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="mb-3">
        <label for="my-select" class="form-label">Escolha uma opção</label>
        <select id="my-select" class="form-select">
          <option value="">Selecione...</option>
          <option value="1">Opção 1</option>
          <option value="2">Opção 2</option>
        </select>
      </div>
    </div>
  </div>
</div>

<script>
  new VanillaSmartSelect('#my-select', {
    placeholder: 'Selecione uma opção...',
    searchable: true
  });
</script>

Validação de Formulários Bootstrap

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="required-select" class="form-label">Campo Obrigatório</label>
    <select id="required-select" class="form-select" required>
      <option value="">Selecione...</option>
      <option value="1">Opção 1</option>
    </select>
    <div class="invalid-feedback">
      Por favor, selecione uma opção.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Enviar</button>
</form>

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

  // Validação Bootstrap
  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 o grid system do Bootstrap normalmente:

<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>

Componentes Bootstrap

Vanilla Smart Select funciona bem dentro de componentes Bootstrap como Cards, Modals, etc:

<div class="card">
  <div class="card-header">
    Configurações
  </div>
  <div class="card-body">
    <label class="form-label">Categoria</label>
    <select id="category-select" class="form-select">...</select>
  </div>
</div>

Temas

Vanilla Smart Select se adapta automaticamente ao tema do Bootstrap:

• Respeita as variáveis CSS do Bootstrap quando disponíveis
• Classes .form-select são preservadas
• Cores e espaçamentos seguem o padrão Bootstrap

Problemas Conhecidos

Nenhum problema de compatibilidade conhecido com Bootstrap 5. Se encontrar algum, por favor abra uma issue.