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
Tipos 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.