Home / Cupons / Publicacoes

Bootstrap 5 - Usando o Sistema de Grid com row e col

Veja como utilizar o sistema de #Grid do #Bootstrap 5 com #row e #col para Diferentes Tamanhos de Tela.

O sistema de grid do Bootstrap 5 é uma ferramenta poderosa para criar layouts responsivos. Ele utiliza um sistema de 12 colunas que se adapta a diferentes tamanhos de tela usando classes como row e col. Neste tutorial, vamos criar um layout onde as colunas ocupam:

  • 12 colunas em telas pequenas (xs e sm, <768px);

  • 6 colunas em telas médias (md, ≥768px);

  • 4 colunas em telas grandes (lg, ≥992px).

Passo 1: Configurando o Bootstrap 5

Para começar, inclua o Bootstrap 5 no seu projeto. Você pode fazer isso via #CDN ou instalando localmente. Aqui está um exemplo de #HTML com o CDN:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tutorial Bootstrap 5 Grid</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- Conteúdo do grid aqui -->
</body>
</html>

Passo 2: Entendendo o Sistema de Grid

O Bootstrap divide a largura da tela em 12 colunas. As classes de coluna (col) permitem definir quantas colunas um elemento ocupa em diferentes tamanhos de tela:

  • col-12: Ocupa todas as 12 #colunas em telas pequenas (xs e sm).

  • col-md-6: Ocupa 6 #colunas em telas médias (md) ou maiores.

  • col-lg-4: Ocupa 4 #colunas em telas grandes (lg) ou maiores.

A classe row é usada para agrupar as colunas e garantir que elas sejam organizadas corretamente.

Passo 3: Criando o Layout

Vamos criar um layout com 3 colunas que seguem as especificações solicitadas. Adicione o seguinte código dentro do <body>:

<div class="container my-5">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      <div class="p-3 bg-primary text-white">Coluna 1</div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <div class="p-3 bg-secondary text-white">Coluna 2</div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <div class="p-3 bg-success text-white">Coluna 3</div>
    </div>
  </div>
</div>

Explicação do Código:

  • .container: Centraliza o conteúdo com margens laterais.

  • .my-5: Adiciona margem vertical (topo e base) para melhor espaçamento.

  • .row: Define uma linha para agrupar as colunas.

  • .col-12 col-md-6 col-lg-4: Cada coluna ocupa:

    • 12 colunas em #telas pequenas (xs e sm, largura total).

    • 6 colunas em #telas médias (md, metade da largura).

    • 4 colunas em #telas grandes (lg, um terço da largura).

  • .p-3: Adiciona padding interno nas colunas.

  • .bg-primary, .bg-secondary, .bg-success: Aplica cores de fundo para visualização.

Explicação do Código:

  • .container: Centraliza o conteúdo com margens laterais.

  • .my-5: Adiciona margem vertical (topo e base) para melhor espaçamento.

  • .row: Define uma linha para agrupar as colunas.

  • .col-12 col-md-6 col-lg-4: Cada coluna ocupa:

    • 12 colunas em telas pequenas (xs e sm, largura total).

    • 6 colunas em telas médias (md, metade da largura).

    • 4 colunas em telas grandes (lg, um terço da largura).

  • .p-3: Adiciona padding interno nas colunas.

  • .bg-primary, .bg-secondary, .bg-success: Aplica cores de fundo para visualização.

Passo 4: Visualizando o Resultado

  • Telas pequenas (<768px): Cada coluna ocupará a largura total (col-12), empilhando verticalmente.

  • Telas médias (≥768px): As colunas ocuparão metade da largura (col-md-6), com duas colunas por linha.

  • Telas grandes (≥992px): As colunas ocuparão um terço da largura (col-lg-4), com três colunas por linha.

Passo 5: Testando e Personalizando

  1. Teste o layout: Abra o HTML em um navegador e redimensione a janela para ver as mudanças responsivas.

  2. Adicione mais estilos: Use classes utilitárias do Bootstrap (como text-center, border, etc.) ou CSS personalizado para estilizar ainda mais.

  3. Adicione mais colunas: Você pode adicionar mais elementos <div class="col-12 col-md-6 col-lg-4"> para criar mais colunas, desde que respeite a soma de 12 colunas por linha.

Exemplo Completo

Aqui está o código completo para referência:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tutorial Bootstrap 5 Grid</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container my-5">
    <h1>Exemplo de Grid Responsivo</h1>
    <div class="row">
      <div class="col-12 col-md-6 col-lg-4">
        <div class="p-3 bg-primary text-white">Coluna 1</div>
      </div>
      <div class="col-12 col-md-6 col-lg-4">
        <div class="p-3 bg-secondary text-white">Coluna 2</div>
      </div>
      <div class="col-12 col-md-6 col-lg-4">
        <div class="p-3 bg-success text-white">Coluna 3</div>
      </div>
    </div>
  </div>
</body>
</html>

Saiba mais em: Site oficial do boostrap