Nesta página: [ocultar]
A maioria dos tutoriais do Bootstrap-in-WordPress ainda pede para você colar um link de folha de estilo em header.php e carregar o jQuery junto com ele. Ambos os movimentos estão errados em 2026. Bootstrap 5 abandonou o jQuery como uma dependência, e a edição de header.php será apagada diretamente na próxima vez que seu tema for atualizado. Este guia mostra a maneira atual de fazer isso, com código que ainda funciona após uma atualização.
Resposta rápida: Para a maioria dos sites, enfileirar Bootstrap 5.3.8 através de um CDN no arquivo functions.php do seu tema (cerca de dez linhas, sem jQuery). Construindo um tema totalmente personalizado? Comece com um iniciador baseado em Bootstrap como o Understrap. Só quero os componentes do Bootstrap dentro do editor de blocos? Instale um plugin de blocos Bootstrap e ignore totalmente o código.
Última revisão: Junho 2026. Versão Bootstrap (5.3.8) e amostras de código verificadas em relação aos documentos oficiais.
O que o Bootstrap realmente faz (e o que o WordPress já trata)
Bootstrap é gratuito, Código aberto estrutura CSS front-end. Ele envia uma grade responsiva, componentes prontos (barras de navegação, cartões, modais, botões), e classes utilitárias para espaçamento e layout. Você consegue tudo isso sem escrever muito CSS à mão. É design e layout, nada mais.
WordPress é o sistema de gerenciamento de conteúdo: Postagens, Páginas, Comercial, o banco de dados, o painel de administração. Ele decide qual conteúdo existe e onde ele fica. Bootstrap decide como o conteúdo aparecerá na tela. Eles não se sobrepõem, é exatamente por isso que eles combinam bem, e também por que o WordPress nunca inclui o Bootstrap para você. Você tem que trazer isso sozinho.
Aqui está o que as pessoas sentem falta: esta é uma decisão do desenvolvedor ou designer, não é um recurso de clique em um botão. Se você estiver codificando manualmente um tema, Bootstrap economiza semanas. Se você preferir arrastar blocos, você pode não precisar de uma estrutura. Nosso Guia WordPress vs construtores de sites é o melhor ponto de partida nesse caso.
Mais um fato que vale a pena consertar imediatamente. Bootstrap 5 jQuery removido. O JavaScript agora está simples (baunilha) JS. Se um tutorial disser para você carregar o jQuery para o Bootstrap funcionar, esse tutorial está descrevendo o Bootstrap 4 ou mais velho. Ignorar.
Método 1: Adicione Bootstrap via CDN em funções.php (Recomendado)
Este é o padrão certo para quase todos. A CDN (rede de entrega de conteúdo, um conjunto de servidores que hospeda arquivos próximos aos seus visitantes) serve Bootstrap, então você não armazena nada sozinho. E você carrega do jeito WordPress, através enfileirando. Isso significa registrar um arquivo para que o WordPress o imprima no lugar certo, sem nenhuma edição no header.php.
Adicione isso ao seu funções.php do tema filho. Um tema infantil é importante: edite o pai e suas alterações desaparecerão na próxima atualização.
função htg_enqueue_bootstrap() {
wp_enqueue_style(
'inicialização',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css',
matriz(),
'5.3.8'
);
wp_enqueue_script(
'inicialização',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js',
matriz(),
'5.3.8',
verdade
);
}
add_action( 'wp_enqueue_scripts', 'htg_enqueue_bootstrap' );
Cinco coisas nesse trecho ganham seu lugar:
- matriz(), não matriz('jquery'). Bootstrap 5 não tem dependência de jQuery. Adicionar um código de carga desnecessário.
- o .pacote.min.js arquivo inclui Popper, a pequena biblioteca que posiciona menus suspensos, dicas de ferramentas, e popovers. Use o arquivo não empacotado somente se você ignorar esses componentes.
- verdade no final carrega o script no rodapé, então não bloqueia a renderização da sua página.
- o ‘5.3.8’ string de versão diz ao WordPress para bloquear o cache corretamente quando você atualizar mais tarde.
- wp_enqueue_scripts é o gancho frontal. Não afetará sua área de administração.
Salve o arquivo, recarregue seu site, e ver fonte. Você deverá ver a folha de estilo e o script do Bootstrap impressos automaticamente. Para confirmar as execuções do JavaScript, solte um acordeão Bootstrap ou modal em uma página e clique nele. Se anima, você terminou.
A rota CDN também significa que o Bootstrap chega de servidores próximos ao seu visitante e muitas vezes já está armazenado em cache no navegador de outro site. Se a velocidade da página for sua prioridade, vale a pena entender essa vantagem, e nossa análise de como A hospedagem CDN afeta o tempo de carregamento explica as compensações em termos simples.
Método 2: Host Bootstrap localmente (Para controle e privacidade)
CDNs são convenientes, mas eles entregam a terceiros um registro de seus visitantes’ Endereços IP. Para sites sensíveis ao GDPR na UE, ou qualquer pessoa que queira zero solicitações externas, hospedar os arquivos você mesmo é mais limpo. Você também para de depender do tempo de atividade de outra pessoa.
As etapas:
- Baixe o Bootstrap compilado 5.3.8 pacote de getbootstrap.com (a “CSS e JS compilados” baixar, não os arquivos de origem).
- Coloque bootstrap.min.css em seu tema em /ativos/css/ e bootstrap.bundle.min.js em /ativos/js/.
- Altere os dois URLs CDN no snippet acima para caminhos locais usando get_template_directory_uri(), por exemplo get_template_directory_uri() . ‘/assets/css/bootstrap.min.css’. Use get_stylesheet_directory_uri() em vez disso, se os arquivos residirem em um tema filho.
Todo o resto permanece idêntico. A única coisa que você perde é o benefício do cache compartilhado. O que você ganha é propriedade total: nenhum layout quebrado se um CDN tiver um dia ruim, e nada vazando dados de visitantes fora do local.
Método 3: Comece com um tema inicial do Bootstrap
Métodos 1 e 2 parafuso Bootstrap em um tema existente. Se você estiver construindo um tema do zero, não estrague nada. Comece com uma base que já conecta o Bootstrap à estrutura de modelos do WordPress para você.
Correia inferior é a escolha de longa duração. Ele solda o clássico starter Underscores (o tema básico que os desenvolvedores do WordPress usam há anos) para inicializar, com o Sass já configurado para que você possa recompilar uma compilação personalizada. Iniciador de inicialização WP é o mais leve, opção mais amigável para um primeiro tema personalizado. sábio by Roots fica na extremidade avançada: ele usa modelos Blade e um pipeline de construção moderno, e é independente de estrutura, então você pode executar o Bootstrap ou trocá-lo.
A recompensa é real. Um tema inicial oferece uma barra de navegação funcional, um modelo de comentário, paginação, e ganchos WooCommerce que já falam a marcação do Bootstrap. Você pula o tedioso encanamento e escreve apenas as partes que tornam seu projeto seu. O custo é uma curva de aprendizado: você precisa se sentir confortável com Sass, um terminal, e recompilando ativos.
Uma advertência honesta. Antes de se comprometer com qualquer iniciante, verifique a data da última atualização no GitHub. Um starter que não lança um lançamento há dois anos ainda pode ter como alvo o Bootstrap 4 e seus hábitos jQuery. Isso o leva de volta ao campo desatualizado do qual este guia está tentando tirar você.
Método 4: Use um plug-in de blocos Bootstrap (Sem código)
Não é um desenvolvedor? Você ainda pode obter a grade e os componentes do Bootstrap dentro do editor de blocos padrão do WordPress. Plugins como Blocos de bootstrap do editor de blocos adicionar linhas com Bootstrap, colunas, botões, e contêineres como blocos nativos. Você cria layouts responsivos arrastando blocos, e o plugin enfileira o Bootstrap nos bastidores.
Este é o caminho para editores de conteúdo e proprietários de pequenas empresas que gostam da aparência do Bootstrap, mas nunca querem abrir o function.php. É também o único método que funciona naturalmente com o editor de blocos, já que os outros três presumem que você está estilizando os modelos manualmente.
Seja realista sobre o teto, Apesar. Um plugin de blocos fornece os componentes do Bootstrap, não a total liberdade de framework que um desenvolvedor obtém com métodos 1 através 3. Se o seu objetivo é um design personalizado com precisão de pixel, você vai superar isso. Se você simplesmente quer limpar, seções responsivas sem código, faz o trabalho. E se “sem código” é realmente o que você procura, pesá-lo contra um Construtor AI WordPress. Essa rota pode chegar a um layout finalizado mais rápido do que aprender aulas de Bootstrap.
Agora escreva a marcação Bootstrap: A Grade na Prática
Carregar o Bootstrap é metade do trabalho. A outra metade é escrever as classes em suas páginas, e a maioria dos tutoriais para antes de mostrar a você. Se você usou métodos 1 através 3, você adiciona marcação dentro dos arquivos de modelo do seu tema ou em um bloco HTML personalizado em qualquer página ou postagem. (O plugin do Método 4 cria a marcação para você, então você pode pular esta parte.)
Bootstrap é construído em um 12-grade de colunas. Três classes aninhadas impulsionam isso: um .container para o invólucro externo, um .row dentro dele, e elementos .col para cada coluna. Aqui está um layout que se acumula em telefones e se divide em 8 e 4 colunas em tablets e superiores:
<div class ="recipiente">
<div class ="linha">
<div class ="col-md-8">Conteúdo principal</div>
<div class ="col-md-4">Barra Lateral</div>
</div>
</div>
o col-md- prefixo é o gatilho responsivo. Abaixo do ponto de interrupção médio (768px), ambas as colunas ocupam toda a largura e empilham. Em 768px e mais amplo, eles se sentam lado a lado. Trocar md por sm, LG, ou xl para mover onde essa mudança acontece. Uma linha de nomes de classes substitui as consultas de mídia que você escreveria à mão.
Os componentes funcionam da mesma maneira. Copie a marcação de um cartão, barra de navegação, ou modal direto da documentação do Bootstrap, cole-o no seu modelo, e os estilos que você enfileirou serão aplicados imediatamente. Nenhuma configuração extra por componente.
O conflito sobre o qual ninguém avisa
É aqui que a maioria dos projetos Bootstrap-in-WordPress vão para o lado. Seu tema ativo já possui CSS próprio. Quando o Bootstrap carrega no topo, os dois brigam pelos mesmos nomes de classe e estilos básicos. Botões parecem desligados. Quebras de espaçamento. Um layout que estava bem ontem desmorona.
Três colisões causam quase tudo:
- A classe .container. Muitos temas definem seu próprio .container com largura máxima diferente. Bootstrap redefine isso, e o que carregar por último vence. Como resultado, os layouts saltam.
- Reinicializações básicas. A reinicialização do Bootstrap reestiliza elementos brutos como corpo, títulos, e listas. Isso pode substituir silenciosamente a tipografia do seu tema.
- Grades duplas. Se o seu tema já usa uma grade (Flexbox ou grade CSS), A grade do Bootstrap fica no topo, e os elementos acabam aninhados em dois sistemas concorrentes.
Você tem duas soluções limpas. O primeiro é escopo Bootstrap: envolva as seções que você deseja estilizar em uma classe pai (um padrão comum chama-o de bootstrap-iso). Em seguida, compile o Bootstrap para que suas regras se apliquem apenas dentro desse wrapper. Ele para de tocar no resto do seu tema. A segunda correção, muitas vezes o mais inteligente, é para construir um pacote Bootstrap personalizado. Ele importa apenas as peças que você usa, a grade e alguns componentes, e deixa Reboot de fora. Menos CSS, menos colisões, páginas mais rápidas. É também por isso que um tema inicial (Método 3) evita o problema desde o início: é construído em torno do Bootstrap, então nada colide.
Qual método você deve escolher?
Combine o método com o que você realmente está construindo. Três casos comuns:
- Você administra um site finalizado com um tema de terceiros e deseja alguns componentes do Bootstrap. Usar método 1 (Enfileiramento CDN) dentro de um tema filho. Não busque um tema inicial; reconstruir todo o seu site para adicionar um modal é um exagero. Se aparecerem conflitos, escopo Bootstrap conforme descrito acima.
- Você é um desenvolvedor que está criando um tema personalizado do zero. Usar método 3 (Understrap ou Sábio). Enfileirar o Bootstrap em um tema _s em branco manualmente apenas recria o que o Understrap já oferece, menos os modelos WooCommerce e barra de navegação testados.
- Você é um editor de conteúdo ou proprietário de uma loja que deseja layouts responsivos sem código. Usar método 4 (um plugin de blocos). A edição de Functions.php não vale o risco para o seu caso de uso. Se você dirige uma loja, combine-o com hospedagem ajustada para o trabalho. Nossas notas sobre Hospedagem de comércio eletrônico WordPress cubra por que um front-end Bootstrap ainda precisa de um back-end rápido.
Um requisito de privacidade ou conformidade substitui todos os três. Se você não conseguir enviar dados de visitantes para um CDN externo, mude o método que você escolheu para a hospedagem local do Método 2.
perguntas frequentes
Ainda preciso do jQuery para usar o Bootstrap 5 no WordPress?
Não. Bootstrap 5 abandonou o jQuery e roda em JavaScript vanilla. Quando você enfileira o script, deixe a matriz de dependência vazia (matriz()), não matriz('jquery'). Adicionar jQuery carrega código extra que seus componentes do Bootstrap nunca chamam. Apenas Bootstrap 4 e antes precisava disso.
O Bootstrap é bom para WordPress em 2026?
sim, se você estiver codificando um tema ou quiser componentes responsivos consistentes. A grade e os utilitários do Bootstrap reduzem o tempo de desenvolvimento e funcionam em todos os navegadores modernos sem correções extras. É menos útil se você construir com o editor de blocos ou um construtor de páginas, já que essas ferramentas já lidam com layout responsivo. Combine com como você realmente trabalha.
Adicionar Bootstrap torna um site WordPress lento??
Pode, se você carregar toda a estrutura para dois componentes. O CSS e JS totalmente reduzidos adicionam peso real. Carregando-os de um CDN, adiando o script para o rodapé, e construir um pacote personalizado apenas com as peças que você usa mantém o sucesso pequeno. Você também pode carregar o Bootstrap somente onde for necessário: envolva o enfileiramento em uma condicional como is_page() então não é enviado em todos os URLs. Um tema inchado empilhado em cima do Bootstrap completo é o verdadeiro problema de velocidade, não Bootstrap por si só.
Posso usar o Bootstrap com o editor de blocos do WordPress?
sim, através de um plugin como Block Editor Bootstrap Blocks, que adiciona linhas Bootstrap, colunas, e botões como blocos nativos. Bootstrap de enfileiramento manual (Método 1) não expõe seus componentes dentro do editor, então você escreveria nomes de classes manualmente em blocos HTML personalizados. Para fluxos de trabalho que priorizam o editor, a rota do plugin é a mais prática.
Devo usar um Bootstrap CDN ou hospedar os arquivos localmente?
Use o CDN por conveniência e experimente o cache compartilhado do navegador. Hospede localmente se você tiver requisitos de GDPR ou de privacidade, não quero nenhuma solicitação externa, ou não quer depender do tempo de atividade de outra rede. O código é quase idêntico; você apenas troca os URLs do CDN por get_template_directory_uri() caminhos para arquivos dentro do seu tema.
Obtenha o método certo, Não apenas o código
Bootstrap e WordPress se encaixam perfeitamente quando você para de seguir os tutoriais da era 2018. Versão de enfileiramento 5.3.8 em um tema infantil, elimine a dependência do jQuery, e avalie seus estilos para que eles não entrem em conflito com seu tema. Isso cobre a grande maioria dos projetos reais. Escolha um tema inicial apenas quando estiver construindo do zero, e um plugin de bloqueio apenas quando você está fora do código.
Se isso faz parte de uma construção maior, alguns guias relacionados vão mais fundo. Comparar hospedagem WordPress gerenciada nos EUA para saber onde executar um tema personalizado. E revise se você precisa codificar em nossa opinião sobre construtores de sites versus WordPress. Uma estrutura só compensa quando o resto da pilha, hospedagem incluída, pode acompanhar isso.