Bulma De Biquini

O que é e como usar a estrutura de grid da Bulma para layouts leves

A Bulma é um framework CSS baseado em Flexbox que não exige JavaScript e funciona com classes utilitárias bem simples. Se você está montando uma galeria de fotos de praia, um portfólio ou qualquer projeto onde a estética leve importa, o sistema de colunas dela resolve a parte responsiva sem muito esforço. O nome "bulma de biquini" que aparece em alguns fóruns brasileiros se refere, na prática, ao uso do framework para construir layouts de galeria com visual minimalista, tipo os que você vê em sites de moda praiana ou catálogos de praia. A base é sempre a mesma: contêiner, linha e colunas. Você coloca tudo dentro de uma div with class container, abre uma columns e dentro dela distribui as column. Cada coluna aceita modificadores numéricos como is-one-third, is-half ou is-four-fifths. O framework calcula a largura automaticamente com base no total de doze partes.

Bulma de biquini: galeria responsiva prática

Aqui vai um exemplo direto de como eu construí uma galeria desse tipo num projeto recente. O HTML básico fica assim: <div class="container">
  <div class="columns is-multiline">
    <div class="column is-3-desktop is-6-tablet"><figure class="image is-4by3"><img src="foto1.jpg"></figure></div>
    <div class="column is-3-desktop is-6-tablet"><figure class="image is-4by3"><img src="foto2.jpg"></figure></div>
    <!-- repetir colunas conforme necessário -->
  </div>
</div>

O modificador is-multiline é o que permite que as colunas quebrem para a linha seguinte quando o espaço acaba. Sem ele, tudo tenta ficar numa única linha e o layout quebra feio em telas menores. O is-3-desktop deixa quatro colunas em telas grandes, e is-6-tablet reduz para duas colunas em tablets. Esse padrão de dois modificadores por coluna é o que torna a coisa responsiva de verdade, não só um truque visual. Um problema real que eu encontrei: quando as imagens têm proporções diferentes, o grid da Bulma mantém o alinhamento mas o conteúdo dentro de cada coluna pode parecer desproporcional. A solução que funcionou foi forçar todas as imagens para uma razão fixa usando figure class="image is-square" ou is-4by3, dependendo do formato que você quer. Isso garante que o grid não fique com buracos estranhos entre as linhas quando as fotos variam de tamanho.

Vantagens e limitações reais

A maior vantagem da Bulma é a curva de aprendizado. Você consegue montar um layout decente em cerca de quinze minutos se já souber o básico de HTML. O arquivo CSS puro carrega rápido, e como não há dependência de JavaScript, o page weight fica baixo mesmo em conexões 3G. Para projetos, isso faz diferença real no tempo de carregamento. Mas há limitações sérias que quase ninguém menciona. O sistema de grid usa flex: 1 nas colunas por padrão, o que significa que se você misturar colunas com alturas de conteúdo muito diferentes sem usar is-vcentered ou is-multiline, algumas colunas vão esticar desnecessariamente. Já vi layouts inteiros ficarem esquisitos porque alguém colocou uma coluna com texto longo ao lado de uma com imagem pequena e esqueceu de ajustar o alinhamento vertical.

Outro ponto: a Bulma não vem com componentes de formulário tão ricos quanto outras bibliotecas. Se o seu projeto precisa de selects complexos, datapickers ou máscaras de input, você vai ter que complementar com outra biblioteca ou escrever CSS próprio. O framework faz o básico bem, mas não tenta cobrir tudo.

Download e configuração rápida

O download oficial fica em bulma.io. Você pode usar o CDN direto no head do HTML, baixar o arquivo CSS compilado ou instalar via npm se preferir integrar com um pipeline de build. Para quem quer apenas começar, a versão CDN é suficiente: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">

A versão mais recente até julho de 2026 é a 1.0.2. Mudanças entre versões pequenas costumam ser compatíveis, mas sempre vale dar uma olhada no changelog antes de atualizar em produção.

Dicas que realmente funcionam no dia a dia

Use is-gapless nas columns se quiser remover o gap padrão de 16px e controlar o espaçamento manualmente com padding. Isso é útil quando você precisa de um grid mais apertado, tipo para thumbnails de galeria. Para imagens, o modificador is-rounded no figure dá aquele acabamento suave sem precisar de CSS extra. Funciona bem em galerias de moda e produtos.

Se o projeto cresce e você começa a precisar de overrides específicos, compile o SCSS original em vez de usar o CSS pronto. O arquivo SCSS permite personalizar variáveis como $column-gap, $family-primary e $primary antes da compilação, o que evita ter que sobrescrever regras com !important depois. Uma coisa que aprendi na prática: evite aninhar columns dentro de columns com muitos níveis. A Bulma suporta, mas o código fica difícil de manter e o rendering pode ter problemas em alguns navegadores mais antigos. Quando o layout pedecomplexidade, melhor separar em sections ou usar o sistema de tiles, que é mais previsível.