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