🇧🇷 PT | 🇺🇸 EN
GitHub

Bootstrap

Vanilla Smart Select funciona perfeitamente com Bootstrap 5 sem conflitos de CSS. Todas as classes usam o prefixo .vs- para evitar colisões.

Compatibilidade

✅ Testado com Bootstrap:
  • Bootstrap 5.3.x - Totalmente compatível
  • Bootstrap 5.2.x - Totalmente compatível
  • Bootstrap 5.1.x - Totalmente compatível
🎨 Classes Bootstrap Suportadas:
  • .form-select - Estilização do select
  • .form-label - Labels dos formulários
  • .form-control - Alternativa ao form-select
  • .is-invalid / .is-valid - Estados de validação
  • .invalid-feedback - Mensagens de erro
  • .mb-3, .mt-3 - Espaçamentos
✅ Zero Conflitos: Todas as classes CSS do Vanilla Smart Select usam o prefixo .vs- para evitar conflitos com Bootstrap.

Ordem de Inclusão dos Arquivos

📋 Ordem Recomendada:
  1. Bootstrap CSS - Carregue primeiro
  2. Vanilla Smart Select CSS - Carregue depois
  3. Seu conteúdo HTML
  4. Bootstrap JS (opcional - se usar componentes Bootstrap)
  5. Vanilla Smart Select JS
  6. Seu código JavaScript

Exemplo Completo

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  
  <!-- Vanilla Smart Select CSS -->
  <link href="vanilla-smart-select.min.css" rel="stylesheet">
</head>
<body>
  <!-- Seu conteúdo -->
  
  <!-- Bootstrap JS (opcional) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  
  <!-- Vanilla Smart Select JS -->
  <script src="vanilla-smart-select.min.js"></script>
  
  <!-- Seu código -->
  <script>
    new VanillaSmartSelect('#mySelect');
  </script>
</body>
</html>

Grid System

Use o grid system do Bootstrap normalmente com o Vanilla Smart Select:

Ver código

HTML

<div class="row">
  <div class="col-md-4">
    <div class="mb-3">
      <label for="grid-select1" class="form-label">Select 1</label>
      <select id="grid-select1" class="form-select">
        <option value="">Selecione...</option>
        <option value="frontend">🎨 Frontend</option>
        <option value="backend">⚙️ Backend</option>
        <option value="mobile">📱 Mobile</option>
        <option value="devops">🚀 DevOps</option>
      </select>
    </div>
  </div>
  <div class="col-md-4">
    <div class="mb-3">
      <label for="grid-select2" class="form-label">Select 2</label>
      <select id="grid-select2" class="form-select">
        <option value="">Selecione...</option>
        <option value="junior">Júnior</option>
        <option value="pleno">Pleno</option>
        <option value="senior">Sênior</option>
        <option value="lead">Lead</option>
      </select>
    </div>
  </div>
  <div class="col-md-4">
    <div class="mb-3">
      <label for="grid-select3" class="form-label">Select 3</label>
      <select id="grid-select3" class="form-select">
        <option value="">Selecione...</option>
        <option value="remoto">🏠 Remoto</option>
        <option value="presencial">🏢 Presencial</option>
        <option value="hibrido">🔄 Híbrido</option>
      </select>
    </div>
  </div>
</div>

JavaScript

new VanillaSmartSelect('#grid-select1', {
  placeholder: 'Selecione uma área...'
});

new VanillaSmartSelect('#grid-select2', {
  placeholder: 'Selecione o nível...'
});

new VanillaSmartSelect('#grid-select3', {
  placeholder: 'Selecione o modelo...'
});

Componentes Bootstrap

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

Exemplo com Card

⚙️ Configurações
Ver código

HTML

<div class="card">
  <div class="card-header">
    ⚙️ Configurações
  </div>
  <div class="card-body">
    <div class="mb-3">
      <label for="category-select" class="form-label">Categoria</label>
      <select id="category-select" class="form-select">
        <option value="">Selecione...</option>
        <option value="tech">💻 Tecnologia</option>
        <option value="food">🍔 Alimentação</option>
        <option value="sports">⚽ Esportes</option>
        <option value="music">🎵 Música</option>
        <option value="travel">✈️ Viagens</option>
      </select>
    </div>
    <div class="mb-3">
      <label for="priority-select" class="form-label">Prioridade</label>
      <select id="priority-select" class="form-select">
        <option value="">Selecione...</option>
        <option value="high">🔴 Alta</option>
        <option value="medium">🟡 Média</option>
        <option value="low">🟢 Baixa</option>
      </select>
    </div>
  </div>
</div>

JavaScript

new VanillaSmartSelect('#category-select', {
  placeholder: 'Selecione uma categoria...'
});

new VanillaSmartSelect('#priority-select', {
  placeholder: 'Selecione a prioridade...'
});

Exemplo com Modal

Ver código

HTML

<!-- Botão para abrir modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#settingsModal">
  Abrir Configurações
</button>

<!-- Modal -->
<div class="modal fade" id="settingsModal" tabindex="-1" aria-labelledby="settingsModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="settingsModalLabel">Configurações</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label for="modal-theme" class="form-label">Tema</label>
          <select id="modal-theme" class="form-select">
            <option value="">Selecione...</option>
            <option value="light">☀️ Claro</option>
            <option value="dark">🌙 Escuro</option>
            <option value="auto">🔄 Automático</option>
          </select>
        </div>
        <div class="mb-3">
          <label for="modal-language" class="form-label">Idioma</label>
          <select id="modal-language" class="form-select">
            <option value="">Selecione...</option>
            <option value="pt">🇧🇷 Português</option>
            <option value="en">🇺🇸 English</option>
            <option value="es">🇪🇸 Español</option>
            <option value="fr">🇫🇷 Français</option>
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
        <button type="button" class="btn btn-primary">Salvar</button>
      </div>
    </div>
  </div>
</div>

JavaScript

// Inicializar ANTES da modal abrir (show.bs.modal)
const settingsModal = document.getElementById('settingsModal');
let themeSelect, languageSelect;

settingsModal.addEventListener('show.bs.modal', () => {
  if (!themeSelect) {
    themeSelect = new VanillaSmartSelect('#modal-theme', {
      placeholder: 'Selecione o tema...'
    });
  }

  if (!languageSelect) {
    languageSelect = new VanillaSmartSelect('#modal-language', {
      placeholder: 'Selecione o idioma...',
      searchable: true
    });
  }
});

Single Select com Bootstrap

Dropdown básico com busca e placeholder.

Ver código

HTML

<div class="mb-3">
  <label for="fruits" class="form-label">Selecione uma fruta:</label>
  <select id="fruits" class="form-select">
    <option value="">Selecione uma fruta...</option>
    <option value="maca">🍎 Maçã</option>
    <option value="banana">🍌 Banana</option>
    <option value="laranja">🍊 Laranja</option>
    <option value="uva">🍇 Uva</option>
    <option value="manga">🥭 Manga</option>
  </select>
</div>

JavaScript

const select = new VanillaSmartSelect('#fruits', {
  searchable: true,
  placeholder: 'Selecione uma fruta...'
});

Multi-Select com Bootstrap

Seleção múltipla com busca integrada ao Bootstrap.

Ver código

HTML

<div class="mb-3">
  <label for="languages" class="form-label">Selecione linguagens:</label>
  <select id="languages" class="form-select" multiple>
    <option value="js" selected>JavaScript</option>
    <option value="ts">TypeScript</option>
    <option value="py">Python</option>
    <option value="java">Java</option>
  </select>
</div>

JavaScript

const multiSelect = new VanillaSmartSelect('#languages', {
  searchable: true,
  multiple: true
});

Select com Optgroups

Opções organizadas por grupos (optgroup) com Bootstrap.

Ver código

HTML

<div class="mb-3">
  <label for="countries" class="form-label">Selecione um país:</label>
  <select id="countries" class="form-select">
    <option value="">Selecione...</option>
    <optgroup label="América do Sul">
      <option value="br">🇧🇷 Brasil</option>
      <option value="ar">🇦🇷 Argentina</option>
    </optgroup>
    <optgroup label="Europa">
      <option value="pt">🇵🇹 Portugal</option>
      <option value="es">🇪🇸 Espanha</option>
    </optgroup>
  </select>
</div>

JavaScript

const countriesSelect = new VanillaSmartSelect('#countries', {
  searchable: true
});

Validação com Bootstrap Forms

Integração perfeita com a validação de formulários do Bootstrap.

Por favor, selecione um departamento.
Por favor, selecione um cargo.
Ver código

HTML

<form id="bootstrap-form" class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="department" class="form-label">Departamento: *</label>
    <select id="department" class="form-select" required>
      <option value="">Selecione...</option>
      <option value="ti">💻 TI</option>
      <option value="rh">👥 RH</option>
    </select>
    <div class="invalid-feedback">
      Por favor, selecione um departamento.
    </div>
  </div>

  <button type="submit" class="btn btn-primary">Enviar</button>
</form>

JavaScript

// Inicializar selects
new VanillaSmartSelect('#department');
new VanillaSmartSelect('#role');

// Validação Bootstrap
const form = document.getElementById('bootstrap-form');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  
  if (form.checkValidity()) {
    // Formulário válido
    form.classList.add('was-validated');
    console.log('Formulário enviado!');
  } else {
    // Mostrar erros
    form.classList.add('was-validated');
  }
});

Clear Button com Bootstrap

Botão de limpar integrado ao design do Bootstrap.

Ver código

HTML

<div class="mb-3">
  <label for="colors" class="form-label">Selecione uma cor:</label>
  <select id="colors" class="form-select">
    <option value="">Selecione...</option>
    <option value="vermelho">🔴 Vermelho</option>
    <option value="azul">🔵 Azul</option>
  </select>
</div>

<button id="clear-btn" class="btn btn-outline-secondary">
  Limpar Seleção
</button>

JavaScript

const colorSelect = new VanillaSmartSelect('#colors', {
  searchable: true,
  allowClear: true
});

// Limpar programaticamente
document.getElementById('clear-btn').addEventListener('click', () => {
  colorSelect.clear();
});

Temas

Vanilla Smart Select se adapta automaticamente ao tema do Bootstrap:

  • ✅ Respeita as variáveis CSS do Bootstrap quando disponíveis
  • ✅ Classes .form-select e .form-label são preservadas
  • ✅ Cores e espaçamentos seguem o padrão Bootstrap
  • ✅ Funciona com temas personalizados do Bootstrap
  • ✅ Suporta modo claro e escuro do Bootstrap
💡 Dica: Se você customizou as variáveis CSS do Bootstrap (como cores primárias), o Vanilla Smart Select automaticamente usará essas cores nos estados de foco e hover.

Problemas Conhecidos

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