Layout no Bootstrap 5

Bootstrap lida com o layout de um website de maneira simples e elegante. Neste capítulo, você irá conhecer as principais classes relacionadas ao layout no Bootstrap.

Pontos de quebra (colapso)

Quando desenvolvemos sites responsivos, devemos prestar atenção nos chamados Pontos de Interrupção (breakpoints). Eles permitem controlar como o layout se adaptará em um determinado dispositivo. Por exemplo, não queremos que um layout planejado para ser exibido em uma tela Full-HD seja exibido da mesma forma em um celular: os elementos ficariam muito pequenos e o site não estaria legível. Por isso, o design responsivo visa oferecer ao cliente versões diferentes de um mesmo site dependendo do dispositivo que ele utiliza para acessar.

Bootstrap usa as chamadas media queries para aplicar estilos condicionalmente com base em um conjunto de parâmetros do navegador e do sistema operacional (um exemplo é a propriedade min-width). Segundo a documentação do Bootstrap, isso otimiza o código CSS, melhora o tempo de renderização e oferece uma ótima experiência para visitantes do site (https://getbootstrap.com/docs/5.1/layout/breakpoints/).

Breakpoint	Sufixo da classe	Dimensões
Extra-pequeno (PP)	–	<576px
Pequeno (P)	sm	≥576px
Médio (M)	md	≥768px
Grande (G)	lg	≥992px
Extra-grande (GG)	xl	≥1200px
Extra extra-grande (GGG)	xxl	≥1400px

Contêineres de dados

Bootstrap permite delimitar o conteúdo em um contêiner que manterá as margens direita e esquerda homogêneas. Há basicamente três versões de classes contêiner: “.container”, “.container-fluid” e “container-*” (onde * pode ser um dos tipos sm, md, lg, xl ou xxl).

A tabela a seguir apresenta o “ponto de colapso”, ou seja, quando uma classe container altera as margens do conteúdo com base nas especificações:

Classe / tela	PP <576px	P ≥576px	M ≥768px	G ≥992px	GG ≥1200px	GGG ≥1400px
.container	100%	540px	720px	960px	1140px	1320px
.container-sm	100%	540px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.container-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px
.container-fluid	100%	100%	100%	100%	100%	100%

Sistema de grade

O sistema de grade (grid system) do Bootstrap permite posicionar elementos com precisão. Para isso, Bootstrap divide a página em 12 colunas.

Ao estruturar uma página, devemos utilizar as seguintes classes:

• Contêiner (.container)
  • Linha (.row)
    • Coluna (.col-*)

Note que, neste caso, o * indica quantos espaços de colunas queremos alocar para determinado elemento (lembrando que o máximo é 12). Por exemplo, se quisermos dividir uma página em duas colunas, podemos alocar um tamanho 6 para cada coluna. Veja:

1 <div class=”container”>

2 <div class=”row”>

3 <div class=”col-6 bg-primary p-5″>Coluna 1</div>

4 <div class=”col-6 bg-danger p-5″>Coluna 2</div>

5 </div>

6 </div>

Note que declaramos um contêiner para delimitar o conteúdo, ou seja, uma linha e duas colunas dentro dessa mesma linha. Note que a soma dos valores das colunas dentro de uma linha deve ser igual a 12 (um valor acima disso provocaria uma quebra para uma outra linha, o que não é desejado). Não se preocupe com as classes bg-primary e bg-danger, pois elas foram incluídas apenas para inserir uma cor de fundo. O mesmo vale para a classe p-5, que foi incluída apenas para aumentar o espaçamento interno. Veja o resultado:

Note que Bootstrap divide cada elemento em 12 colunas. Logo, seria possível dividir a coluna 1 da figura em 12 outras partes.

Podemos definir um ponto de quebra para a coluna, informando os tamanhos desejados no meio da classe:

.col-[ponto-de-quebra]-[valor]

Por exemplo:

col-xl-6 col-sm-12

Essas duas classes aplicadas juntas indicam que, em uma tela grande (xl), o elemento deve ocupar metade do espaço. Já em uma tela pequena (sm), o elemento deve ocupar 100% do espaço disponível.

Distribuindo colunas

Digamos que desejamos adicionar colunas cujos valores de soma são inferiores a 12. Nesse caso, teríamos espaços remanescentes no final da linha. Caso desejemos distribuir essas colunas, podemos utilizar as classes de alinhamento.

Para isso, podemos distribuir as colunas usando, junto com a classe row, uma das seguintes classes:

• justify-content-start: alinha à esquerda (padrão);
• justify-content-xcenter: centraliza;
• justify-content-end: alinha à direita;
• justify-content-around: margens à direita e à esquerda iguais;
• justify-content-between: alinha cada item em uma ponta (quando há dois itens);
• justify-content-evenly: parecido com o *-around.

Observe como ficaria uma linha com duas colunas de tamanho col-4:

O código para gerar uma figura similar ficaria assim:

 1 <div class=”container”>

 2  <div class=”row justify-content-*”>

 3   <div class=”col-4″>

 4    1 de 2 colunas

 5   </div>

 6   <div class=”col-4″>

 7    1 de 2 colunas

 8   </div>

 9  </div>

10 </div>

Substitua o * pela classe desejada.

Classes offset

Podemos ainda adicionar o espaçamento antes de uma div usando as classes offset. No exemplo a seguir, vamos adicionar um desvio de 1 coluna (offset-1).

1 <div class=”container”>

2  <div class=”row”>

3   <div class=”offset-1 col-4 bg-primary p-5″>Coluna 1</div>

4   <div class=”offset-1 col-4 bg-danger p-5″>Coluna 2</div>

5  </div>

6 </div>

Observe o resultado:

As classes offset também suportam breakpoint, ou seja, pode-se usar offset-md-6, offset-sm-12, etc.

Calhas (gutters)

Calhas (gutters) representam o espaçamento entre colunas no sistema de grade. Por padrão, o espaçamento que separa colunas no Bootstrap 5 é de 1.5rem ou 24px. Entretanto, podemos alterar esses valores padrão usando as propriedades g-*, sendo * um número que vai de 0 a 5, onde 0 representa uma remoção completa de margens, 3 o tamanho de margem padrão e 5 uma margem 3x maior (consulte a seção de margens e preenchimento para compreender como essa numeração funciona).

Por exemplo, vamos testar a margem máxima entre itens:

1 <div class=”container”>

2  <div class=”row g-5″>

3

4   <div class=”col-6″><div class=”bg-primary”>1</div></div>

5   <div class=”col-6″><div class=”bg-danger”>2</div></div>

6   <div class=”col-6″><div class=”bg-warning”>3</div></div>

7   <div class=”col-6″><div class=”bg-secondary”>4</div></div>

8   <div class=”col-6″><div class=”bg-success”>5</div></div>

9   <div class=”col-6″><div class=”bg-info”>6</div></div>

10

11  </div>

12

13 </div>

Observe o resultado:

Note que apenas os espaçamentos internos são alterados. A margem para o topo do primeiro item não pode ser modificada pela classe g-5.

Observe como podemos reduzir as calhas e ainda adicionar uma margem para o topo:

1 <div class=”container”>

2  <div class=”row g-2 mt-2″>

3

4   <div class=”col-6″><div class=”bg-primary”>1</div></div>

5   <div class=”col-6″><div class=”bg-danger”>2</div></div>

6   <div class=”col-6″><div class=”bg-warning”>3</div></div>

7   <div class=”col-6″><div class=”bg-secondary”>4</div></div>

8   <div class=”col-6″><div class=”bg-success”>5</div></div>

9   <div class=”col-6″><div class=”bg-info”>6</div></div>

10

11  </div>

12 </div>

Para reduzir as calhas usamos g-2. Além disso, usamos mt-2, que aumenta a margem para o topo. Observe o resultado:

Podemos ainda aplicar valores diferentes para calhas horizontais e calhas verticais. Para isso basta usar as classes gx-* e gy-*, e assim, alterar os valores de margem horizontal, eixo x, e margem vertical, eixo-y.

As variantes x e y podem ser usadas em outros contextos. Veremos isso na seção de margem e preenchimento.

Margem e preenchimento

No box model, um elemento HTML pode receber uma borda, além de margens internas (preenchimento ou padding) e margens externas (chamado apenas de margem ou margin). Bootstrap 5 trouxe uma maneira eficiente para lidar com espaçamentos. Para isso, usamos a seguinte sintaxe:

[tipo][posição]-[nível]

Onde tipo pode ser “p” ou “m”; posição pode ser “t” (top ou topo), “e” (end ou final), “b” (bottom ou rodapé), “s” (start ou início), “x” (eixo x: esquerda e direita), “y” (eixo y: topo e rodapé), ou ainda, pode-se deixar este valor em branco para aplicar aos quatro lados; por fim, nível pode ser 0, 1, 2, 3, 4 ou 5. Veja a figura:

Em resumo, no Bootstrap podemos alterar a margem usando classes com a letra “m” e o preenchimento usando a letra “p”. Opcionalmente, podemos definir quais as posições queremos alterar. O nome da classe deve receber, separado por um hífen, um valor numérico, que vai de 0 a 5. A tabela a seguir ilustra esse valor numérico:

Valor	Cálculo	Classe-exemplo	Descrição exemplo
0	Espaçamento-padrão x 0	m-0	Margem de 0px
1	Espaçamento-padrão x 0,25	pl-1	Preenchimento esquerdo (left) reduzido para ¼ do tamanho padrão.
2	Espaçamento-padrão x 0,5	my-1	Margem superior e inferior (eixo y) reduzida pela metade do tamanho padrão.
3	Espaçamento-padrão x 1	pt-1	Preenchimento superior (top) com valor padrão.
4	Espaçamento-padrão x 1,5	px-4	Preenchimento esquerdo e direito (eixo x) 1,5x maior que o tamanho padrão.
5	Espaçamento-padrão x 3	mb-5	Margem inferior (bottom) triplicada.
auto	Margem definida automaticamente	p-auto	Preenchimento automático.

Posicionamento fixo e visibilidade

Podemos fixar um elemento no topo ou no rodapé usando as classes “fixed-top” e “fixed-bottom”. Além disso, podemos esconder um elemento usando a classe “visually-hidden”. Observe o exemplo:

1 <div class=”bg-warning col-2 fixed-top p-5″>Fixo no topo</div>

2 <div class=”bg-success col-2 fixed-bottom p-5″>Fixo no rodapé</div>

3 <div class=”bg-danger col-3 visually-hidden p-5″>Texto escondido</div>

Esse código irá produzir a seguinte interface:

Note que o texto escondido não aparece. Tente remover a classe visually-hidden e você verá um fragmento da div logo abaixo da div fixada no topo:

Note que podemos alterar a visibilidade com as classes “visible” e “invisible”.

Além disso, podemos ainda alterar a posição com as classes “position-*”, onde * pode ser absolute, relative, fixed, static e stick. Ao usar a classe “position-absolute” podemos combinar isso com as propriedades top (superior), end (direita), bottom (inferior) e start (esquerda), seguido de uma propriedade numérica que indica a posição (0 indica começo da página, 50 indica meio e 100 indica final). Observe um exemplo:

1 <div class=”bg-warning col-2 fixed-top p-5″>Fixo no topo</div>

2 <div class=”bg-success col-2 fixed-bottom p-5″>Fixo no rodapé</div>

3 <div class=”bg-danger col-3 p-5 position-absolute start-50 top-50″>

4   Texto Escondido

5 </div>

Observe o resultado:

Perceba que usamos start-50 e top-50 para posicionar um item no meio exato da tela. Mesmo assim, a div não parece centralizada. Isso acontece pois o alinhamento é feito com base na ponta superior esquerda. Podemos corrigir o alinhamento apenas adicionando a classe “translate-middle”:

1 <div class=”bg-danger col-3 p-5 position-absolute start-50 top-50 translate-middle”>

2   Texto escondido

3 </div>

Agora nosso item está corretamente centralizado:

Poderíamos alinhar à direita usando a classe “end-0” e à esquerda com “start-0”. Podemos centralizar itens com “top-50” ou “bottom-50” (use a classe “translate-middle-y” ou “translate-middle-x” para corrigir o alinhamento horizontal e vertical). Observe um exemplo:

1 <div class=”bg-warning col-2 fixed-top p-5 position-absolute start-0 top-50 translate-middle-y”>Fixo no topo</div>

2 <div class=”bg-success col-2 p-5 position-absolute bottom-0 end-0″>Fixo no rodapé</div>

3 <div class=”bg-danger col-3 p-5 position-absolute start-50 top-50 translate-middle”>

4   Texto escondido

5 </div>

Por fim, podemos alterar o posicionamento com as classes “float-start” (alinhar à esquerda) ou “float-end” (alinhar à direita). Caso tenha problemas ao usar essas classes, experimente aplicar a classe “clearfix” ao próximo elemento. Perceba que há muitas formas de fazer a mesma coisa usando classes diferentes. A forma que você irá utilizar dependerá do seu gosto pessoal.

Altura e largura

Podemos alterar a largura e a altura de um elemento usando as classes “w-*” e “h-*”, respectivamente, onde * representa o percentual de tamanho e pode ser 0, 25, 50, 75, 100 ou auto. Por exemplo:

1 <div class=”bg-warning fixed-top p-5 w-50″>w-50</div>

2 <div class=”bg-success p-5 position-absolute bottom-0 end-0 w-25″>

3   w-25

4 </div>

5 <div class=”bg-danger p-5 position-absolute start-50 top-50

6  translate-middle w-100″> w-100

7 </div>

Este código gera os seguintes tamanhos:

Agora vamos brincar um pouco com a altura:

1 <div class=”bg-warning fixed-top p-5 h-50 w-50″>h-50</div>

2 <div class=”bg-success p-5 position-absolute bottom-0 end-0 w-100 h-100″>

3   w-25

4 </div>

5 <div class=”bg-danger p-5 position-absolute start-50 top-50

6  translate-middle w-25 h-100″>

7   w-100

8 </div>

Observe o resultado:

Sombras e opacidade

Podemos alterar a opacidade de um item usando as classes “opacity-*”, onde * indica o percentual (0, 25, 50, 75 ou 100). Além disso, vamos aproveitar este exemplo e testar a adição de sombras a elementos. Podemos incluir sombras usando a classe “shadow”. Veja:

1 <div class=”bg-warning fixed-top p-5 h-50 w-50 shadow opacity-75″>

2.   h-50

3 </div>

4 <div class=”bg-success p-5 position-absolute bottom-0 end-0

5  w-100 h-100 shadow”>

6   w-25

7 </div>

8 <div class=”bg-danger p-5 position-absolute start-50 top-50

9  translate-middle w-25 h-100 opacity-75 shadow”>

10   w-100

11 </div>

Observe o resultado:

---