Resumo Bootstrap Grid

Por Natália Stoll Nogueira @nataliastoll

2023-11-11 20:34:48.790Z2023-11-11 22:48:09.862Z

No Bootstrap, um "grid" refere-se a um sistema de grade que organiza o conteúdo de uma página em linhas e colunas. Isso permite que você crie layouts responsivos, que se ajustam automaticamente a diferentes tamanhos de tela.

> Este sistema é baseado em 12 colunas.
Isso significa que a largura total da página é dividida em 12 partes iguais, e você pode distribuir seus elementos nessas colunas de maneira flexível. Cada coluna possui uma classe específica no Bootstrap, como col-md-6, que indica que a coluna ocupará 6 partes das 12 disponíveis em dispositivos médios.

> Para construir um grid é essencial ter a classe="container"

Segue código simplificado para o esquema acima:

<div class="container">

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

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

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

</div>

Aplicação no VS Code:

Segue código:

<body>

  <div class="container" style="background-color: rgb(204, 162, 232);">

    <div class="row" style="background-color: rgb(168, 199, 189);">
      <div class="col-12" style="background-color: rgb(137, 182, 167);">
        <p>coluna 1 col-12</p>
      </div>
    </div>

    <div class="row" style="background-color: rgb(181, 155, 188);">
      <div class="col-6" style="background-color: rgb(151, 71, 139);">
        <p>coluna 2 col-6</p>
      </div>
      <div class="col-6" style="background-color: rgb(107, 39, 97);">
        <p>coluna 3 col-6</p>
      </div>
    </div>

    <div class="row" style="background-color: rgb(182, 194, 153);">
      <div class="col-2" style="background-color: rgb(173, 180, 103);">
        <p>coluna 4 col-2</p>
      </div>
      <div class="col-4" style="background-color: rgb(102, 119, 41);">
        <p>coluna 5 col-4</p>
      </div>
      <div class="col-6" style="background-color: rgb(84, 85, 0);">
        <p>coluna 6 col-6</p>
      </div>
    </div>

  </div>

</body>

Podemos usar linhas dentro de colunas:

1. Container:

O conteúdo principal da sua página é geralmente colocado dentro de um elemento container ou container-fluid.

    <div class="container">
        <!-- Seu conteúdo aqui -->
    </div>

A diferença:
container tem uma largura máxima fixa, enquanto container-fluid ocupa toda a largura da viewport.

2. Row:

As linhas (row) são usadas para conter as colunas. Cada linha pode ter até 12 colunas.

<div class="row">
    <!-- Conteúdo aqui -->
</div>

IMPORTANTE: ao colocar a classe ROW, o display da div passa a ser
display: flex; , ou seja, trabalha com FLEXBOX, o que afeta como estrutura-se as columas.

//usando a classe ROW, o Bootstrap configura o display para:

display: flex;

3.Colunas:

As colunas (col-*) são colocadas dentro das linhas e são usadas para definir a largura dos elementos na página.

  <div class="col-6">
        <!-- Conteúdo da coluna -->
    </div>

3.1.Colunas com flexbox:

  <div class="col-md-6">
        <!-- Conteúdo da coluna -->
    </div>

No exemplo acima, a coluna ocupará metade da largura disponível em dispositivos médios (md), que é a configuração padrão. Você pode ajustar o tamanho conforme necessário.

Outros tópicos para guardar:

4.Responsividade:

As classes de coluna no Bootstrap são responsivas por padrão. Você pode usar prefixos como sm, md, lg, xl e xxl (este último não tenho muita certeza ainda, vou confirmar com o Ralf) para definir diferentes tamanhos de coluna para diferentes tamanhos de tela.

```
<div class="col-sm-12 col-md-6 col-lg-4">
    <!-- Conteúdo da coluna -->
</div>
```

Neste exemplo, a coluna ocupará 12 partes em dispositivos pequenos (sm), 6 partes em dispositivos médios (md), e 4 partes em dispositivos grandes (lg).

5.Offset e Ordem:

Além das classes básicas de coluna, você pode usar classes como offset-* para criar espaçamento entre colunas e order-* para controlar a ordem dos elementos em dispositivos específicos.

```
<div class="col-md-6 offset-md-3">
    <!-- Conteúdo da coluna com um espaçamento à direita em dispositivos médios -->
</div>
```

Corrijam e complementem, please!

Responder10 Curtem

5 respostas

Matheus Panobianco @matheus_panobianco
2023-11-11 20:47:27.457Z
Muito bem explicado Natália. Obrigado!
Responder 1 Curte
Em resposta anataliastoll⬆:
Antônio Agamenon Maciel Chaves Júnior @Agamenon
2023-11-11 20:47:48.361Z
Ficou muito bom @nataliastoll
Responder 1 Curte
Em resposta anataliastoll⬆:
Pedro Augusto de Souza Brandes @pedrobrandes
2023-11-13 01:24:44.955Z
Essas imagens ajudaram muito! Vou usar no meu resumo. Obrigado.
Responder 1 Curte
Em resposta anataliastoll⬆:
Janine Oliveira @Janine
2023-11-16 14:13:15.105Z
Adorei o resumo!!!
Responder 1 Curte
Em resposta anataliastoll⬆:
Christian Amsberg Janner @calemao
2023-12-05 20:49:41.287Z
Essas imagens ilustraram muito melhor para eu aprender, obrigado!!!!!
Responder

ResponderAdd progress note