Playground flex do Bootstrap

Todas as ferramentas

Crie layouts flex do Bootstrap 5.3 de forma visual e copie as classes utilitárias exatas: d-flex, justify-content, align-items, order, grow e muito mais.

Pré-visualização Clique num item para o editar
HTML gerado
—

Tudo é executado no seu navegador: nada é enviado.

As classes que definir aplicam-se a partir deste ponto de quebra e acima. Mude de ponto de quebra para criar layouts responsivos.

Contêiner
Itens
0
Item selecionado

Sobre Playground flex do Bootstrap

O Bootstrap Flex Playground permite construir layouts flexbox com classes utilitárias reais do Bootstrap 5.3 em vez de CSS puro. Configure o contêiner — direção, quebra de linha, justify-content, align-items, gap — com controles segmentados, clique em qualquer item para definir seu próprio align-self, order, grow e shrink, e veja a pré-visualização ao vivo se reorganizar instantaneamente.

O seletor de breakpoint é o que torna isso mais do que um brinquedo: escolha sm, md, lg, xl ou xxl e as classes definidas a partir desse ponto ganham o infixo responsivo — justify-content-md-between, flex-lg-row — exatamente como o sistema mobile-first do Bootstrap as aplica a partir desse breakpoint em diante. Adicione até 12 itens para simular um componente realista.

Quando o layout estiver correto, copie o HTML gerado ou apenas as classes do contêiner e cole-os diretamente no seu projeto. Tudo funciona no seu navegador e nada é enviado.

Como usar Playground flex do Bootstrap

  1. Defina as utilidades do contêiner — direção, quebra, justify-content, align-items e gap — com os controles segmentados.
  2. Adicione ou remova itens (2 a 12) para corresponder ao seu componente real.
  3. Clique em um item para atribuir suas próprias utilidades de align-self, order ou dimensionamento flex.
  4. Troque de breakpoint para adicionar variantes responsivas que se aplicam a partir de sm, md, lg, xl ou xxl.
  5. Verifique a pré-visualização ao vivo e, em seguida, copie o HTML gerado ou as classes do contêiner.

Perguntas frequentes

O Bootstrap é mobile-first: uma classe definida em um breakpoint se aplica a partir daquela largura em diante. Definir justify-content-between com md selecionado produz justify-content-md-between, que entra em vigor a 768 px e permanece ativa em telas maiores.

Esta ferramenta gera classes utilitárias do Bootstrap 5.3 (d-flex, justify-content-center, order-2) prontas para um projeto Bootstrap. O Flexbox Playground gera propriedades CSS puras em vez disso — escolha a que combina com sua stack.

Sim. Clique em qualquer item na pré-visualização para selecioná-lo, depois defina utilidades por item, como align-self, order, grow e shrink. O HTML gerado mostra cada item com exatamente as classes que você atribuiu.

Entre 2 e 12. Essa faixa cobre desde um simples cabeçalho de duas colunas até uma barra de utilidades completa, mantendo a pré-visualização legível enquanto você experimenta.

Sim, é gratuito e funciona inteiramente no seu navegador — sem necessidade de cadastro, e nada do que você constrói é enviado a lugar algum.
Partilhar
Ferramentas Relacionadas
Construtor de Assinatura de E-mail Crie uma assinatura de e-mail HTML profissional a partir de 30 modelos, personalize-a e guarde-a. Gratuito
Ícone para PNG Converta Bootstrap Icons, Font Awesome e mais em imagens PNG personalizadas — gratuito, no browser. Gratuito
Gerador de ícones de app Gere um conjunto completo de ícones de app prontos a publicar para a App Store e a Google Play — fundos premium com gradientes, mesh e padrões, criados a partir do seu logo. Gratuito
Gerador de favicons Crie um pacote completo de favicons a partir de um logótipo, um ícone ou um monograma — favicon.ico, PNGs modernos, ícone Apple touch, ícones PWA, manifesto web e trecho HTML. Gratuito
Gerador de Box Shadow CSS Crie box-shadows CSS em camadas com controlos deslizantes ao vivo para desvio, desfoque, propagação, cor, opacidade e inserção — pré-visualize num elemento real e copie o CSS pronto a usar instantaneamente. Gratuito
Gerador de Border-Radius CSS Crie visualmente border-radius CSS com pré-visualização em direto e copie código pronto para produção. Gratuito
Pesquisas populares
playground flex do bootstrap gerador de flexbox do bootstrap utilitários flex do bootstrap 5 gerador de classes d-flex justify-content align-items bootstrap construtor de classes flex do bootstrap ferramenta flexbox responsiva do bootstrap
Precisa de ajuda?
Encontrou um problema com esta ferramenta? Avise a nossa equipa.
Relatar um problema

Adicione esta ferramenta gratuita ao seu próprio site — copie e cole o código abaixo.