BOOTSTRAP 5: GRID SYSTEM – SM, MD e LG NA PRÁTICA

No Bootstrap 5, as siglas sm, md, lg são tamanhos de tela (breakpoints) usados para deixar o site responsivo.

De forma simples:

sm (small) → telas pequenas (celulares maiores) ≥ 576px
md (medium) → tablets ≥ 768px
lg (large) → notebooks/desktops ≥ 992px

Na prática: você usa isso pra definir como o layout muda conforme o tamanho da tela.

Exemplo:

col-sm-12 col-md-6 col-lg-4

Significa:

No celular: ocupa 12 colunas (100%)
No tablet: ocupa 6 colunas (50%)
No desktop: ocupa 4 colunas (33%)

Exemplo prático com Bootstrap

<div class="container">
  <div class="row">
    
    <div class="col-sm-12 col-md-6 col-lg-4" style="background: lightblue;">
      Coluna 1
    </div>    
    <div class="col-sm-12 col-md-6 col-lg-4" style="background: lightgreen;">
      Coluna 2
    </div>    
    <div class="col-sm-12 col-md-12 col-lg-4" style="background: lightcoral;">
      Coluna 3
    </div>  
 </div>
</div>

O que acontece:

💻 Desktop (lg)
→ As três ficam lado a lado (4 + 4 + 4)

📱 Celular (sm)
→ Todas ficam uma embaixo da outra (12 colunas)

📲 Tablet (md)
→ Duas ficam lado a lado (6 + 6)
→ A terceira vai pra baixo (12)

Desmistificando e focando em GRID

Exemplo:

col-12 → ocupa tudo (12/12 = 100%)
col-6 → metade (6/12 = 50%)
col-4 → um terço (4/12 ≈ 33%)
col-3 → um quarto (3/12 = 25%)

E o “resto do espaço”?

Se não completar 12, o espaço fica livre.

Exemplo:

<div class="row">
  <div class="col-4">A</div>
  <div class="col-4">B</div>
</div>

Aqui usamos 8 colunas (4+4), então sobram 4 colunas vazias.

Exemplo simples de 12 colunas

Código abaixo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Grid simples</title>

  <style>
    .row {
      width: 100%;
      overflow: hidden; /* limpa o float */
      margin-bottom: 10px;
    }

    .col {
      float: left;
      text-align: center;
      padding: 20px;
      background: lightblue;
      border: 1px solid #000;
    }

    .col-4 {
      width: 33.33%;
    }

    .col-6 {
      width: 50%;
    }

    .col-12 {
      width: 100%;
    }
  </style>
</head>

<body>

  <h2>Exemplo simples de 12 colunas</h2>

  <div class="row">
    <div class="col col-4">4</div>
    <div class="col col-4">4</div>
  </div>

  <p>👉 Aqui sobra espaço</p>

  <div class="row">
    <div class="col col-6">6</div>
    <div class="col col-6">6</div>
  </div>

  <p>👉 Aqui ocupa tudo</p>

  <div class="row">
    <div class="col col-12">12</div>
  </div>

</body>
</html>

Por isso separa:

Classe	Função
`.col`	estilo base
`.col-4`	largura (33%)
`.col-6`	largura (50%)
`.col-12`	largura (100%)

Qualquer dúvida, deixe nos comentários!

Até a próxima!

BOOTSTRAP 5: GRID SYSTEM – SM, MD e LG NA PRÁTICA