Layouts de grade básicos para você se familiarizar com a construção dentro do sistema de grade Bootstrap.
Nesses exemplos, a .themed-grid-colclasse é adicionada às colunas para adicionar alguns temas. Esta não é uma classe que está disponível no Bootstrap por padrão.
Existem cinco camadas no sistema de grade do Bootstrap, uma para cada faixa de dispositivos que suportamos. Cada camada começa em um tamanho mínimo de janela de visualização e se aplica automaticamente aos dispositivos maiores, a menos que seja substituído.
Obtenha três colunas de largura igual começando em desktops e dimensionando para desktops grandes . Em dispositivos móveis, tablets e inferiores, as colunas serão empilhadas automaticamente.
Obtenha três colunas começando em desktops e dimensionando para grandes desktops de várias larguras. Lembre-se, as colunas da grade devem somar até doze para um único bloco horizontal. Mais do que isso, as colunas começam a se empilhar independentemente da janela de visualização.
Obtenha duas colunas começando em desktops e escalando para desktops grandes .
Nenhuma classe de grade é necessária para elementos de largura total.
De acordo com a documentação, o aninhamento é fácil - basta colocar uma linha de colunas em uma coluna existente. Isso fornece duas colunas começando em desktops e dimensionando para desktops grandes , com outras duas (larguras iguais) dentro da coluna maior.
Em tamanhos de dispositivos móveis, tablets e inferiores, essas colunas e suas colunas aninhadas serão empilhadas.
O sistema de grade do Bootstrap v4 tem cinco camadas de classes: xs (extra pequeno), sm (pequeno), md (médio), lg (grande) e xl (extra grande). Você pode usar praticamente qualquer combinação dessas classes para criar layouts mais dinâmicos e flexíveis.
Cada camada de classes aumenta, ou seja, se você planeja definir as mesmas larguras para xs e sm, você só precisa especificar xs.