O conceito
O espaço entre colunas do Bootstrap se chama gutter, e ele é feito de um jeito que quase ninguém imagina. Não existe margem entre as colunas. O que existe é:
- Padding em cada coluna — metade do gutter de cada lado. É o padding que afasta o conteúdo, não a coluna.
-
Margem negativa na
.row— também metade do gutter de cada lado. Ela puxa a row para fora do container, cancelando o padding da primeira e da última coluna.
Sem a margem negativa, as colunas das pontas ficariam com um recuo que o resto da página não tem, e nada alinharia.
A consequência prática: se você pintar o fundo
direto na
.col, o fundo ocupa também a área do padding —
e os blocos encostam um no outro, sem espaço visível. A solução é
pintar uma div interna, não a coluna. Ligue o botão
na simulação e veja os dois casos.
Classe resultante
g-3
16px 8px
Direção
Onde pintar o fundo
container
área da .row (margem negativa)
padding da coluna
conteúdo
O HTML que você acabou de montar