Exemplos ao vivo de Bootstrap 5.3 para navbar, cards, grid, formulários, modal, alertas e botões, cada um com o equivalente em Tailwind e um tradutor de classes.
O Bootstrap 5 monta layouts com classes prontas: navbar navbar-expand-lg para um menu, row e col-md-4 para um grid de 12 colunas, card para caixas de conteúdo, btn btn-primary para botões e alert alert-success para mensagens. Adicione o CSS 5.3.3 a partir de uma CDN, e o bundle JavaScript só para partes interativas como modais e dropdowns.
Classes principais do Bootstrap 5
Cada componente abaixo foi escrito do zero para o Bootstrap 5.3 e é exibido ao vivo, com a versão em Tailwind CSS da mesma coisa ao lado, para você comparar os dois vocabulários ou portar uma página de um para o outro. Um tradutor de classes cuida das trocas diretas mais comuns.
Use navbar-expand-lg (ou md, sm) no nav, adicione um botão navbar-toggler com data-bs-toggle="collapse" e data-bs-target apontando para o id do menu, e envolva os links em uma div com collapse navbar-collapse. O botão precisa do bundle JavaScript do Bootstrap para abrir e fechar.
Doze por linha. col-6 ocupa metade, col-4 um terço, e prefixos de breakpoint como col-md-4 valem a partir daquela largura. Existem seis breakpoints: o padrão abaixo de 576px, depois sm, md, lg, xl e xxl em 576, 768, 992, 1200 e 1400 pixels.
O Bootstrap é mais rápido quando você quer componentes prontos e um visual convencional com pouco trabalho de design. O Tailwind é mais rápido quando você tem o seu próprio design e constrói os componentes você mesmo. Ambos têm licença MIT e são bem mantidos.
Não. O Bootstrap 5 abandonou o jQuery. Os plugins JavaScript dele são JavaScript puro, e o Popper é a única dependência, incluída no arquivo bundle.
Os exemplos rodam em um frame isolado com scripts desativados, então o modal aparece já aberto usando as classes position-static e d-block. Em uma página real, o bundle JavaScript abre e fecha o modal e gerencia o foco.
Cada frame ao vivo carrega uma cópia sem modificações da folha de estilo do Bootstrap 5.3.3 que hospedamos nós mesmos. No seu projeto, carregue-a da CDN oficial com o link mostrado abaixo. Os scripts ficam desativados nos frames, então só aparece o lado CSS de cada componente.
Coloque a folha de estilo no head e o bundle antes da tag de fechamento do body. Copie os hashes de integrity de getbootstrap.com e adicione-os como atributos integrity e crossorigin.
navbar-expand mantém os links visíveis em qualquer largura, já que o frame não consegue rodar o script de collapse. Use navbar-expand-lg com um toggler em um site real.
O mesmo componente com classes utilitárias do Tailwind. Ele precisa de um build do Tailwind, por isso aparece só como código.
Três cards dividem uma linha com gutters g-3. Troque col-4 por col-md-4 para que eles se empilhem no celular.
O mesmo componente com classes utilitárias do Tailwind. Ele precisa de um build do Tailwind, por isso aparece só como código.
As colunas somam 12. Cada classe col-* aqui é fixa para você ver a divisão; adicione prefixos sm, md ou lg para mudanças responsivas.
O mesmo componente com classes utilitárias do Tailwind. Ele precisa de um build do Tailwind, por isso aparece só como código.
form-label e form-control geram campos consistentes; is-invalid com invalid-feedback mostra um erro sem nenhum script.
O mesmo componente com classes utilitárias do Tailwind. Ele precisa de um build do Tailwind, por isso aparece só como código.
position-static e d-block exibem o modal dentro da página para a demo. Em uma página real, deixe essas classes de fora e abra o modal com data-bs-toggle="modal".
O mesmo componente com classes utilitárias do Tailwind. Ele precisa de um build do Tailwind, por isso aparece só como código.
As cores contextuais vêm dos modificadores alert-*. Adicione role="alert" só a mensagens que aparecem depois de uma ação.
O mesmo componente com classes utilitárias do Tailwind. Ele precisa de um build do Tailwind, por isso aparece só como código.
Variantes sólida, outline, de tamanho e desativada. Um link estilizado como botão só mantém role=button quando dispara uma ação em vez de navegar.
O mesmo componente com classes utilitárias do Tailwind. Ele precisa de um build do Tailwind, por isso aparece só como código.
São correspondências aproximadas, não exatas: os passos de espaçamento 1 a 5 do Bootstrap equivalem a cerca de 0.25, 0.5, 1, 1.5 e 3 rem, enquanto o Tailwind usa 0.25 rem por passo.
Trocas diretas comuns
Tradutor de classes de Bootstrap para Tailwind
Direção
Bootstrap para Tailwind
Tailwind para Bootstrap
Classes para converter
Resultado
Copiar
Mantidas como estão (sem correspondência simples no mapa abaixo): {list}
Todas as classes tiveram correspondência.
Comece grátis · Sem cartão de crédito