Playground de grade Bootstrap
Crie layouts responsivos com a grade do Bootstrap 5.3 de forma visual e copie as classes exatas — row, col, deslocamentos, ordem, espaçamentos internos e alinhamento.
—
Tudo é executado no seu navegador — nada é enviado.
As classes que você definir se aplicam a partir deste ponto de quebra e acima. Mude o ponto de quebra para criar layouts responsivos.
Sobre Playground de grade Bootstrap
O Bootstrap Grid Playground constrói layouts responsivos de linhas e colunas com o sistema de grid real do Bootstrap 5.3. Adicione até 12 colunas a uma linha, clique em qualquer coluna para definir sua largura, deslocamento e ordem, e ajuste os espaçamentos e o alinhamento na linha — a pré-visualização e o código gerado são atualizados em tempo real a cada alteração.
Como os grids do Bootstrap são mobile-first, o seletor de breakpoint é central: defina uma coluna como col-6 na base e col-md-4 em md, e você terá construído o clássico padrão de empilhar em dispositivos móveis e três lado a lado no desktop, sem escrever uma linha de código. Deslocamentos, ordem e classes de espaçamento aceitam os mesmos infixos responsivos.
A saída é um HTML limpo, pronto para copiar e colar — uma div de linha com seus filhos de coluna e exatamente as classes que você configurou. Copie o trecho inteiro ou apenas as classes da linha; tudo funciona localmente no seu navegador.
Como usar Playground de grade Bootstrap
- Adicione colunas à linha — até 12 — e clique em uma para selecioná-la.
- Defina o span, o deslocamento e a ordem da coluna selecionada para o breakpoint atual.
- Troque de breakpoint (de sm a xxl) para definir como o layout se reorganiza em telas maiores.
- Ajuste os espaçamentos da linha e suas utilidades de alinhamento.
- Revise a pré-visualização ao vivo e, em seguida, copie o HTML gerado ou as classes da linha.