Introdução
Responsividade de um site faz com que o layout de suas páginas sejam moldados conforme o dispositivo do usuário - ou seja, a responsividade adapta o conteúdo do site de acordo com o dispositivo que acessou, podendo ser um smartphone, um tablet ou um desktop. O sistema de responsividade divide uma página HTML em doze colunas, pelo número doze ser mais flexível em sua divisão (Figura 1).
Figura 1 - Colunas de uma página html e algumas formas de combinação
Os tiposTipos de coluna
Quando trabalha bootstrap, as classes col-*, col-sm-*, col-md-*, col-lg-* e col-xl-* são utilizadas para criar responsividade aos elementos de uma página HTML. O * em cada uma dessas classes significa quantas colunas esse elemento utilizará, por exemplo ao usar a classe col-sm-6 ou col-md-6 fará com que o elemento ocupe seis colunas de 12 de uma página.
Agora, o comportamente desse elemento com os dispositivos é através da escolha da classe. A tabela abaixo explica qual dispositivo cada classe é utilizada.
| Classe | Tamanho | Dispositivos |
|---|---|---|
| col-* | Largura de tela deve ser menor que 576px. | Celulares. |
| col-sm-* | Largura de tela deve ser maior ou igual que 576px. | Smartphones. |
| col-md-* | Largura de tela deve ser maior ou igual que 768px. | Tablets, monitores. |
| col-lg-* | Largura de tela deve ser maior ou igual que 992px. | Monitores. |
| col-xl-* | Largura de tela deve ser maior ou igual que 1200px. | TVs. |
| Painel | ||
|---|---|---|
| ||
|