bootstrap_grids para TYPO3

bootstrap_grids foi por muito tempo o atalho mais rápido para layouts de múltiplas colunas em TYPO3, e hoje é um candidato a migração

Por anos, bootstrap_grids foi em projetos TYPO3 a resposta pragmática a uma exigência recorrente da redação: quero colocar colunas lado a lado em uma página, sem que desenvolvedoras precisem construir content elements próprios a cada vez. A extensão traz uma coleção de layouts de grade Bootstrap predefinidos como content elements ao backend, de modo que redatores podem criar layouts de duas, três ou quatro colunas diretamente no conteúdo da página. Para agências que entregam muitos sites baseados em Bootstrap em pouco tempo, essa foi por muito tempo a solução mais eficiente.

Hoje a situação é mais matizada. Com a core extension EXT:container e os backend layouts significativamente melhorados no TYPO3 v11 até v13, existem alternativas nativas que precisam de menos configuração e se integram mais fortemente ao padrão TYPO3. O bootstrap_grids continua relevante em projetos existentes, mas novos projetos devem usá-lo de forma consciente ou não usar mais.

Cenários típicos de uso

Um primeiro cenário é o levantamento rápido. Um site de empresa de médio porte com cerca de 200 páginas, já baseado em Bootstrap, usa bootstrap_grids para disponibilizar layouts de múltiplas colunas sem setup próprio de site package. Redatores escolhem layouts de coluna em um dropdown e preenchem os containers com content elements padrão.

Um segundo cenário é o reparo de relançamentos antigos. Um site de associação de 2018 foi originalmente construído com bootstrap_grids e acumulou com o tempo 600 content elements dentro de containers grid. Em um upgrade de TYPO3 v9 para v11, surge a pergunta: migrar ou continuar. Em regra, o bootstrap_grids é mantido primeiro para não bloquear o upgrade, e a troca para EXT:container vem em um segundo passo.

Um terceiro cenário é a fase de transição para uma arquitetura frontend moderna. Um conglomerado migra seu site de Bootstrap para um design system baseado em Tailwind. Enquanto o time editorial ainda não migrou para a nova interface de editor, o bootstrap_grids permanece em uso como ponte, com data de expiração clara.

Um quarto cenário é a solução de emergência em um audit. Quando um site existente não tem layouts de coluna e páginas individuais precisam ser exibidas posteriormente em múltiplas colunas, o bootstrap_grids é a resposta mais rápida: instalação, ativação, primeira página com área de conteúdo em duas colunas em menos de uma hora. Para uso a longo prazo, esse atalho raramente é a escolha certa.

Arquitetura técnica

O bootstrap_grids registra content elements próprios via TCA overrides e entrega templates Fluid para a saída da grid. No núcleo, os elementos são um wrapper fino em torno das classes Bootstrap container, row e col-*. A extensão mantém containers de coluna próprios, visíveis via colpos no backend layout, e inclui, se necessário, CSS do Bootstrap.

A instalação é feita de forma clássica via Composer. Em combinação com site packages próprios, vale saber: o bootstrap_grids traz um CSS Bootstrap 5 completo e JavaScript correspondente, o que em projetos com design system próprio rapidamente gera conflitos e duplo carregamento de CSS. Nesses casos, os recursos do bootstrap_grids são desativados e apenas a integração de backend é usada.

A configuração é feita via TsConfig: aqui os times definem quais variantes de grade são oferecidas aos redatores, quais números de coluna são permitidos e quais breakpoints Bootstrap são mapeados. Uma limitação clara a poucas variantes, claramente nomeadas, reduz significativamente a confusão no backend.

Problemas frequentes e soluções

O primeiro problema é a armadilha do copia e cola na redação. Sem governance rígida, com bootstrap_grids surgem rapidamente páginas com oito containers aninhados que ninguém mais mantém. A solução é uma limitação das variantes permitidas e uma diretriz editorial que vincule o uso de layouts de coluna a tipos de conteúdo claros.

O segundo problema é o duplo carregamento do CSS Bootstrap. Projetos que além do bootstrap_grids mantêm um build Bootstrap próprio carregam Bootstrap, no pior caso, duas vezes. A solução é desativar os recursos entregues pela extensão totalmente via TsConfig e usar exclusivamente o build do próprio projeto.

O terceiro problema é a migração em upgrades TYPO3. Quem muda de v9 para v11 ou de v11 para v12 descobre que algumas variantes de grid em versões Bootstrap antigas têm nomes diferentes. A solução é um audit dos tipos de grid usados antes do upgrade e uma rodada de migração SQL direcionada que renomeia variantes antigas para novas denominações.

Um quarto problema é a apresentação inconsistente na prévia do editor. O backend mostra containers grid frequentemente vazios ou em forma reduzida, de modo que redatoras não reconhecem o que é realmente entregue no frontend. A solução são preview renderings diretos no módulo backend que replicam as classes Bootstrap e mostram as larguras de coluna visualmente. O esforço não é trivial, mas vale a pena rapidamente em grandes times editoriais.

Migração e compatibilidade de versões

O bootstrap_grids existe para TYPO3 v9 até v12 e continua sendo mantido, o status oficial para TYPO3 v13 foi atualizado em 2025. Mais importante do que a compatibilidade de versão pura é, no entanto, a questão estratégica de se o bootstrap_grids ainda é a resposta certa no projeto. Para novos projetos, recomenda-se o EXT:container: mais leve, mais próximo do core, mais fácil de manter. Para projetos existentes, uma mudança gradual é frequentemente sensata, especialmente quando o design system está sendo revisto de qualquer forma.

A Gosign migra projetos bootstrap_grids existentes para EXT:container ou para backend layouts nativos com colpos. A migração roda apoiada por script: os containers grid existentes são reescritos via SQL e upgrade wizard em estruturas Container, de forma que redatoras, após o upgrade, não precisem tocar em nenhuma página. Esse é o caminho mais rápido para levar um site package histórico ao padrão TYPO3 moderno sem que conteúdos se percam.