Layouts grid básicos para você se familiarizar com desenvolvimento, dentro do sistema de grid Bootstrap.
Existem cinco brakpoints no sistema de grid Bootstrap, sendo um para cada extensão de dispositivos. Cada breakpoint começa em um tamanho de viewport mínimo e, automaticamente, extende-se aos dispositivos maiores, a não ser que seja sobrescrito.
Faça três colunas de larguras idênticas, começando em dispositivos médios e aumentando para desktops maiores. Em dispositivos abaixo, as colunas vão se empilhar autimaticamente.
Faça três colunas, começando em dispositivos médios e aumentando para desktops maiores, mas com larguras variadas. Além disso, lembre-se que a soma máxima das colunas deve ser doze, em um bloco horizontal. Acima disso, as colunas começarão a se empilhar, não importando a viewport.
Faça duas colunas, começando em dispositivos médios e escalando para telas maiores.
Nenhuma classe do grid é necessária, para elementos de largura máxima.
Como diz a documentação, aninhamento é fácil, bastando colocar uma linha de colunas dentro de uma coluna. Isso lhe dá duas colunas, começando em dispositivos médios e escalando para telas maiores, com outras duas (larguras iguais) dentro da coluna maior.
Em telas de tablets e abaixo, essas colunas suas colunas aninhadas vão se empilhar.
O sistema de grid da versão 4 do Bootstrap possui quatro breakpoints: xs (extra small), sm (small), md (medium), lg (large) e xl (extra large). Você pode usar quase qualquer combinação dessas classes, para criar layouts mais dinâmicos e flexíveis.
Cada breakpoint se exetende para cima, significando que se você planeja definir as mesmas larguras para xs e sm, só precisa especificar o xs.