Bootstrap é atualmente o framework CSS mais usado do mundo, presente em milhões de projetos web. Integrar com o VS Code é direto e leva menos de 2 minutos pelo método CDN. A versão atual é a 5.3.8.
Existem três formas de adicionar Bootstrap a um projeto no VS Code, e a escolha certa depende do tipo de projeto:
| Método | Quando usar | Requer instalação? |
|---|---|---|
| CDN (jsDelivr) | Projetos simples, prototipagem, estudo | Não |
| npm | Projetos com Webpack, Vite ou outro bundler | Sim (Node.js) |
| Download local | Sem conexão com internet, projetos offline | Não |
Método 1: CDN — o jeito mais rápido
Para começar a usar Bootstrap em minutos, sem instalar nada, o CDN é o caminho. Cole as tags abaixo no <head> e antes do </body> do seu HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu projeto</title>
<!-- Bootstrap 5.3.8 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<!-- Seu conteúdo aqui -->
<!-- Bootstrap 5.3.8 JS (com Popper incluído) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
</body>
</html>
O link do CSS vai no <head>, o script JS vai no final do <body>. O arquivo bootstrap.bundle.min.js já inclui o Popper.js necessário para componentes como dropdowns e tooltips — não precisa adicionar o Popper separadamente.
Atenção a links desatualizados: muitos tutoriais ainda usam stackpath.bootstrapcdn.com que é o CDN do Bootstrap 4. Para Bootstrap 5, use sempre cdn.jsdelivr.net conforme mostrado acima. A documentação oficial do Bootstrap 5 sempre traz os links mais atuais.
Método 2: npm (para projetos com build tool)
Para projetos que usam Webpack, Vite, Parcel ou outro bundler, a instalação via npm integra o Bootstrap ao pipeline de build e permite importar só o que você precisa.
Pré-requisito: ter o Node.js instalado. Verifique com node -v no terminal do VS Code.
Passo 1: Abra o terminal integrado do VS Code (Ctrl+` ou View > Terminal).
Passo 2: Na pasta do projeto, execute:
npm install bootstrap
Passo 3: Importe o Bootstrap no seu arquivo JavaScript ou CSS principal:
// Em um arquivo .js (ex: main.js)
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
Ou, em um arquivo SCSS se o seu projeto usa Sass:
// Em um arquivo .scss
@import "~bootstrap/scss/bootstrap";
Por que npm é melhor para projetos grandes: permite importar apenas os componentes que você usa (tree-shaking), reduzindo o tamanho do bundle final. A documentação de introdução ao Bootstrap explica todas as opções de importação parcial.
Método 3: download local
Para trabalhar sem internet ou em ambientes sem acesso a CDNs:
Passo 1: Acesse getbootstrap.com/docs/5.3/getting-started/download/ e faça o download dos arquivos compilados.
Passo 2: Crie uma pasta bootstrap dentro do seu projeto e coloque os arquivos bootstrap.min.css e bootstrap.bundle.min.js lá.
Passo 3: Referencie os arquivos locais no HTML:
<link href="bootstrap/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/bootstrap.bundle.min.js"></script>
As extensões do VS Code que aceleram o desenvolvimento com Bootstrap
O diferencial de usar Bootstrap no VS Code em vez de um editor simples está nas extensões. Duas fazem diferença real:
Bootstrap IntelliSense Adiciona autocomplete para classes Bootstrap diretamente no editor. Enquanto você digita class="col-, o VS Code mostra sugestões de todas as classes Bootstrap disponíveis com descrição. Elimina a necessidade de consultar a documentação para classes específicas.
Para instalar: abra Extensions (Ctrl+Shift+X), busque “Bootstrap IntelliSense” e instale.
Live Server Recarrega o navegador automaticamente a cada salvo no arquivo. Fundamental para ver as mudanças de Bootstrap em tempo real sem precisar recarregar manualmente.
Para instalar: busque “Live Server” (extensão do Ritwick Dey) nas Extensions do VS Code.
Para entender como o Bootstrap se encaixa no processo de criação de sites e quando usá-lo em conjunto com WordPress, veja como criar um site com WordPress do zero.
Verificando se o Bootstrap está funcionando
Depois de adicionar o CDN ou instalar via npm, adicione um botão Bootstrap para confirmar que está tudo certo:
<button class="btn btn-primary">Botão de teste</button>
Se o botão aparecer azul com o estilo arredondado característico do Bootstrap, a instalação está funcionando. Se aparecer como um botão HTML sem estilo, verifique se o link do CSS foi adicionado corretamente no <head>.
Abra o DevTools (F12) e veja a aba Console. Erros de carregamento de arquivo aparecem em vermelho e mostram exatamente qual arquivo não foi encontrado.
Por que o Bootstrap 5 e não o Bootstrap 4
Bootstrap 5, lançado em 2021 e atualizado regularmente até a versão 5.3.8, removeu a dependência do jQuery, melhorou o sistema de grid e adicionou componentes novos como offcanvas e accordion nativo. Para projetos novos, use sempre Bootstrap 5.
O Bootstrap 4 ainda recebe atualizações de segurança mas não tem mais novos recursos. Se você encontrar tutoriais usando stackpath.bootstrapcdn.com ou import jQuery, estão usando Bootstrap 4.
Perguntas frequentes
Qual versão do Bootstrap usar em 2026?
Bootstrap 5.3.8 é a versão estável mais recente. Para projetos novos, use sempre a versão 5. O Bootstrap 4 ainda existe mas não recebe novos recursos desde 2021.
CDN ou npm: qual é melhor?
Para aprendizado, projetos de estudo e sites simples, o CDN é mais fácil e rápido. Para aplicações com build tool (React, Vue, projetos com Vite ou Webpack), npm integra melhor ao pipeline de desenvolvimento e permite importar apenas o necessário.
O VS Code precisa de alguma configuração especial para Bootstrap?
Não. O VS Code funciona com Bootstrap sem nenhuma configuração obrigatória. As extensões Bootstrap IntelliSense e Live Server são opcionais mas aceleram muito o desenvolvimento.
Por que o JavaScript do Bootstrap precisa ficar antes do ?
Scripts no <head> bloqueiam o carregamento do HTML. Colocar o script antes do </body> garante que a página carregue e renderize antes de processar o JavaScript, melhorando a percepção de velocidade. O Bootstrap CSS no <head> é necessário para a página não aparecer sem estilo antes do CSS carregar.
Posso usar Bootstrap com Elementor no WordPress?
Sim. O Elementor já tem um sistema de grid próprio, mas é possível adicionar classes Bootstrap via campo de CSS customizado em elementos específicos. Para sites WordPress, o Bootstrap é mais comum em temas e plugins do que com Elementor diretamente.
