Você não consegue entender o sistema de grid do Bootstrap?
Termos como col-sm, col-md, col-offset soam confusos?

Bom, você não é o único.

Muita gente se atrapalha com a sintaxe do Bootstrap mas, acredite, depois que você compreende fica muito fácil desenvolver um layout tanto para desktop quanto para mobile.

A especificação diz:

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

O que isso quer dizer?

Assim como vários outros frameworks front-end, o Bootstrap faz uso de um grid de 12 colunas.

As 12 colunas do grid do Bootstrap
Na figura temos 12 colunas cuja classe .col-**-1 determina que cada “col” tenha o tamanho igual a 1. Os asteriscos devem ser substituídos por xs, sm, md ou lg (extra small, small, medium e large respectivamente). Falo sobre “breakpoints” mais abaixo.

Continue reading