Layout de 12 Colunas

O sistema de grid do Bootstrap divide a página em 12 colunas, proporcionando uma estrutura de layout flexível e responsiva. Isso permite que desenvolvedores criem designs visualmente atraentes e bem estruturados, que se adaptam perfeitamente a diferentes tamanhos de tela e dispositivos.

Classes de Grid

• container: A classe container envolve e centraliza o conteúdo dentro de um contêiner de largura fixa. Ela fornece padding, margem e garante o alinhamento adequado do conteúdo;
• row: A classe row cria um grupo horizontal de colunas. Ela serve como um contêiner para as colunas, garantindo o alinhamento e espaçamento corretos entre elas;
• col: As colunas dentro de uma linha são definidas usando a classe col. Os desenvolvedores especificam a largura das colunas utilizando classes como col-6, col-md-4 ou col-lg-3.

Design Responsivo

O sistema de grid do Bootstrap é projetado para ser responsivo, permitindo que o conteúdo se adapte dinamicamente com base no tamanho da janela de visualização e no tipo de dispositivo. Os desenvolvedores podem usar classes de grid responsivas como col-md-6 ou col-lg-4 para especificar larguras de coluna para diferentes tamanhos de tela, como dispositivos médios ou grandes.

Nota

No Bootstrap, as classes sm, md, lg e xl representam diferentes tamanhos de tela

Exemplos

Exemplo 1: Layout de Grade Básico

Neste exemplo, há um container com uma única linha contendo três colunas de largura igual. Cada coluna ocupa uma parte igual da largura da linha, resultando em um layout horizontal com três colunas.

Exemplo 2: Layout de Grade Responsivo

Neste exemplo, um container possui uma linha com três colunas. As duas primeiras colunas (col-md-6) ocupam metade da largura da linha em telas médias e maiores. A terceira coluna (col-md-12) ocupa toda a largura da linha em telas médias e maiores. Isso garante que a terceira coluna ocupe toda a largura da linha.

Resultado do comportamento responsivo da grade