// stack web · front end · css e utilitários

Bootstrap: grid pronto e responsivo

Bootstrap é uma folha de estilo que você carrega e usa por nome de classe. A parte que quase todo mundo procura nele é o grid, que arruma a página em colunas e muda essa arrumação sozinho quando a tela encolhe.

O que Bootstrap resolve

Colocar três blocos lado a lado numa tela grande e um embaixo do outro no celular custa CSS que você escreve toda vez, em todo projeto. São larguras em porcentagem, espaçamento entre as colunas, e uma media query pra cada faixa de tela. Erra a conta em um lugar e a coluna cai de linha na hora errada.

O Bootstrap traz esse cálculo pronto e testado nos navegadores. Você aplica row na linha e col-md-4 em cada bloco, e as media queries já estão dentro do CSS que você carregou. O ganho aparece no primeiro dia de projeto, quando a página fica de pé antes de você ter escrito uma regra própria.

Os conceitos que você precisa antes da primeira linha

Container. O bloco externo que segura o conteúdo e dá a margem lateral. O grid do Bootstrap só funciona direito dentro de um container ou container-fluid.
Row e coluna. Dentro do container vem a row, e dentro dela vêm as colunas. A row cria o espaçamento entre as colunas, e a coluna nunca fica solta fora dela.
As 12 colunas. Toda linha vale 12 unidades de largura. col-4 ocupa um terço, col-6 metade, e três col-4 fecham a linha. Passou de 12, o excedente cai pra linha de baixo.
Breakpoint e infixo. O pedaço do meio da classe diz a partir de qual largura de tela ela vale. Na versão 5.3 são cinco: sm a partir de 576px, md a partir de 768px, lg a partir de 992px, xl a partir de 1200px e xxl a partir de 1400px.
Mobile first. As regras do Bootstrap usam min-width. Sem infixo, a classe vale em qualquer largura. Com infixo, ela liga da largura dele pra cima e a tela pequena fica com o comportamento padrão, que é a coluna ocupando a linha inteira.

A ferramenta por dentro: grid, componentes e utilitários

O Bootstrap empacota as decisões de design que você ainda não sabe tomar: espaçamento, cor, tipografia e o comportamento responsivo já vêm resolvidos em classes e componentes prontos. A teoria que sustenta tudo é o grid de 12 colunas: todo layout é uma conta de somar colunas dentro de uma linha.

Grid responsivo: .row abre a linha, .col-md-6 ocupa 6 das 12 colunas de tablet pra cima e vira coluna cheia no celular. Os sufixos (sm, md, lg) são os pontos de quebra.
Componentes prontos: botão, card, navbar, modal, alerta. A classe declara a intenção (.btn .btn-primary) e o visual vem junto. Os interativos (modal, dropdown) usam o JavaScript da biblioteca via atributos data-bs-*, sem você escrever código.
Utilitários pra ajuste fino: .mt-3 (margem), .d-flex (display), .text-center. É o mesmo espírito do Tailwind, numa dose menor, por cima dos componentes.

<div class="container">
  <div class="row g-3">
    <div class="col-md-8">                <!-- 8 de 12 colunas -->
      <div class="card p-3">
        <h2 class="h5">Conteúdo principal</h2>
        <button class="btn btn-primary mt-2">Ação</button>
      </div>
    </div>
    <div class="col-md-4">                <!-- as 4 restantes -->
      <div class="alert alert-info">Barra lateral</div>
    </div>
  </div>
</div>

A troca é clara: você ganha velocidade e um visual decente no dia um, e paga com sites que se parecem entre si até alguém customizar as variáveis do tema.

Hello world: três colunas que viram três linhas

Nada de instalar pacote. O CDN oficial entrega o CSS pronto, e o navegador que você já tem faz o resto.

Abra o terminal, crie a pasta e entre nela:
```
mkdir bootstrap-ola
cd bootstrap-ola
```

Crie um arquivo chamado index.html nessa pasta e cole isto. O endereço do CSS e o valor do integrity vieram da página de instalação oficial da versão 5.3.8:

<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Grid do Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
  </head>
  <body>
    <div class="container py-4">
      <h1 class="mb-3">Olá, mundo</h1>
      <div class="row text-center">
        <div class="col-md-4"><div class="p-3 border bg-light">Coluna A</div></div>
        <div class="col-md-4"><div class="p-3 border bg-light">Coluna B</div></div>
        <div class="col-md-4"><div class="p-3 border bg-light">Coluna C</div></div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
  </body>
</html>

Suba um servidor local na pasta:
```
python3 -m http.server 8899
```
Dois cliques no arquivo também abrem a página. O servidor local deixa o teste mais parecido com o site publicado.
Abra http://127.0.0.1:8899/ no navegador, com a janela larga.
Arraste a borda da janela até ela ficar mais estreita que 768 pixels de largura, sem recarregar a página.

A prova de que funcionou. Com a janela larga, Coluna A, Coluna B e Coluna C aparecem lado a lado, as três com a mesma largura, ocupando um terço da faixa cada uma. Ao estreitar a janela abaixo de 768 pixels, as mesmas três caixas empilham, uma embaixo da outra, cada uma esticada na largura toda. Você não escreveu nenhuma media query, nenhuma porcentagem e nenhum float. Toda a mudança veio das classes row e col-md-4. Se as três caixas ficarem empilhadas em qualquer largura, o CSS do CDN não carregou: confira o endereço do link e a conexão.

O que Bootstrap não é

Bootstrap não é framework de aplicação. Ele não tem estado, não tem componente que se redesenha sozinho e não gerencia rota. A documentação oficial diz que o JavaScript dele não é totalmente compatível com React, Vue e Angular, e que os plugins de JavaScript são opcionais. Quem constrói a interface por componente é o React ou o Vue. O Bootstrap entra ali como camada de estilo.

O grid deste hello world roda sem uma linha de JavaScript. O arquivo bootstrap.bundle.min.js serve pros componentes que precisam de comportamento, como dropdown, modal e tooltip. A outra confusão comum é achar que carregar o CSS já torna a página responsiva. Não torna. Sem a tag <meta name="viewport"> no head, o celular renderiza a página numa largura fictícia e o breakpoint nunca dispara.

Fontes

Bootstrap, Getting started, Introduction, de onde vieram a versão 5.3.8, o template inicial e os endereços do CDN com os valores de integrity. Conferida em 15/08/2026.
Bootstrap, Layout, Grid system, a estrutura container, row e coluna, e as 12 unidades por linha. Conferida em 15/08/2026.
Bootstrap, Layout, Breakpoints, a tabela dos cinco infixos com as larguras em pixels e o uso de min-width. Conferida em 15/08/2026.
Bootstrap, Getting started, JavaScript, onde os plugins aparecem como opcionais e a compatibilidade com React, Vue e Angular é tratada. Conferida em 15/08/2026.

O hello world desta página rodou de verdade em 15/08/2026. O arquivo foi salvo numa pasta descartável, servido com python3 -m http.server 8899 e aberto num navegador controlado por script. Com a janela em 1280 pixels, as três colunas mediram 380 pixels cada uma e ficaram na mesma altura na tela. Com a janela em 500 pixels, cada uma passou a medir 500 pixels e as três apareceram em alturas diferentes, empilhadas. O único erro no console foi o 404 do favicon, que a pasta de teste não tinha.

Para continuar

O caminho oposto ao do Bootstrap é o Tailwind, que dá classes pequenas de uma propriedade só e deixa o desenho por sua conta. Antes de escolher entre os dois, vale ter na mão o CSS puro, porque os dois são CSS embrulhado em nome de classe. O mapa inteiro fica no hub da stack web.

// conteúdo exclusivo

O curso desta trilha está em preparação. A lista paga menos.

Os tutoriais daqui continuam gratuitos. O que está a caminho é um curso pago que transforma esse mapa em formação guiada, na ordem certa e com projeto. Deixe seu e-mail: você recebe os estudos novos gratuitos e, no lançamento, o desconto de quem entrou na lista primeiro.