Bootstrap 4 Grades
Bootstrap 4 Grid System
O sistema de grade do Bootstrap é construído com flexbox e permite até 12 colunas na página.
Se você não quiser usar todas as 12 colunas individualmente, poderá agrupar as colunas para criar colunas mais amplas:
| período 1 | período 1 | período 1 | período 1 | período 1 | período 1 | período 1 | período 1 | período 1 | período 1 | período 1 | período 1 |
| período 4 | período 4 | período 4 | |||||||||
| período 4 | período 8 | ||||||||||
| período 6 | período 6 | ||||||||||
| período 12 | |||||||||||
O sistema de grade é responsivo e as colunas serão reorganizadas automaticamente dependendo do tamanho da tela.
Certifique-se de que a soma soma 12 ou menos (não é necessário que você use todas as 12 colunas disponíveis).
Classes de grade
O sistema de grade do Bootstrap 4 tem cinco classes:
.col-(dispositivos extra pequenos - largura da tela menor que 576px).col-sm-(pequenos dispositivos - largura da tela igual ou superior a 576px).col-md-(dispositivos médios - largura da tela igual ou superior a 768px).col-lg-(dispositivos grandes - largura da tela igual ou superior a 992px).col-xl-(dispositivos extragrandes - largura da tela igual ou superior a 1200px)
As classes acima podem ser combinadas para criar layouts mais dinâmicos e flexíveis.
Dica: Cada classe aumenta, então se você deseja definir as mesmas larguras para
sme md, você só precisa especificar sm.
Estrutura Básica de uma Grade Bootstrap 4
A seguir está uma estrutura básica de uma grade do Bootstrap 4:
<!-- Control the column width, and how they should appear on different
devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Primeiro exemplo: crie uma linha ( <div
class="row">). Em seguida, adicione o número desejado de colunas (tags com
.col-*-*classes apropriadas). A primeira estrela (*) representa a capacidade de resposta: sm, md, lg ou xl, enquanto a segunda estrela representa um número, que deve somar 12 para cada linha.
Segundo exemplo: em vez de adicionar um número a cada col, deixe o bootstrap manipular o layout, para criar colunas de largura igual: dois "col"elementos = 50% de largura para cada coluna. três colunas = 33,33% de largura para cada coluna. quatro cols = 25% de largura, etc. Você também pode usar .col-sm|md|lg|xlpara tornar as colunas responsivas.
Abaixo, coletamos alguns exemplos de layouts básicos de grade do Bootstrap 4.
Três Colunas Iguais
O exemplo a seguir mostra como criar três colunas de largura igual, em todos os dispositivos e larguras de tela:
Exemplo
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Colunas responsivas
O exemplo a seguir mostra como criar quatro colunas de largura igual começando em tablets e dimensionando para áreas de trabalho extra grandes. Em telefones celulares ou telas com menos de 576 pixels de largura, as colunas serão empilhadas automaticamente umas sobre as outras :
Exemplo
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Duas colunas responsivas desiguais
O exemplo a seguir mostra como obter duas colunas de várias larguras começando em tablets e dimensionando para grandes áreas de trabalho extras:
Exemplo
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Dica: Você aprenderá mais sobre as grades do Bootstrap 4 posteriormente neste tutorial.