COMO USAR O SISTEMA DE GRID DO BOOTSTRAP

Conteúdo

espaço no bootstrap

Como dar espaço no bootstrap?

Neste artigo será mostrado como usar padding e margin nos elementos do bootstrap em elementos como divs e grids para dar espaçamento.

Como tudo no bootstrap o espaçamento definido utilizando suas classes nativas dão suporte a responsividade. Por isso é sempre bom usar elas para não quebrar o leiaute.

Neste vou mostrar como utilizar as principais propriedades de espaço que são padding e margin e como configurar o espaço das colunas do grid bootstrap.

Como configurar os espaçamentos externos e internos dos elementos no bootstrap

Sabendo como usar a propriedade de margin e padding você já resolve a maioria dos problemas de espaço. Por exemplo com o padding pode dar espaço entre linhas e margin para separar os elementos.

Se você não sabe qual a diferença e quando usar margin ou padding veja clicando no link aqui em baixo.

Qual a diferen entre margin e padding?

Sintaxe das classes

{propriedade}{lados}-{tamanho}

Explicação:

Propriedade: é a inicial que define se trata de uma margin ou padding, m ou p respectivamente.
Lado: é a inicial do lado, top para cima, bottom para baixo, left para esquerda e right para direita, sendo t, b, l ou r respectivamente. Também pode ser usado x para horizontal ou seja esquerda e direita e y para vertical para cima e para baixo. Caso nenhum lado seja informado o valor será aplicado em todos.
Tamanho: são valores de 0 a 5 sendo o zero para remover a propriedade e os outros números seguindo uma tabela de multiplicação do $spacer, como mostrado abaixo.

1 = $spacer * 0.25;
2 = $spacer * 0.5;
3 = $spacer;
4 = $spacer * 1.5;
5 = $spacer * 3;

Ainda sobre o tamanho existe o valor auto, com a mesma finalidade do valor auto em CSS.

Exemplos:

Para criar uma margem médio em cima de um elemento é usado:

mt-3

Para criar uma interna pequena nas laterais de um elemento é usado:

px-1

Aplicando isso em um elemento ficaria algo como:

<div class="mt-3 px-1">

Esses valores são pré-definidos nas classes nativas do bootstrap, mas pode ser acrescentado outros usando o mapa Sass $spacers.

O que é Sass?
Como configurar o Sass das classes bootstrap?

Como configurar o espaçamento entre colunas da grid no bootstrap

O problema normalmente é o seguinte se quer alinhar as colunas horizontalmente, mas os elementos ficam grudados.

Para isso existe uma propriedade nos grids do bootstrap que é o offset. Não sei se essa é a definição real dele, mas ele serve como uma coluna negativa gerando um espaço igual o col, anterior ao elemento, empurrando o elemento visível para frente.

Sintaxe:

offset-{padrão de tela}-{valor}

Padrão de tela: é tamanho da tela configurado no leiaute.
valor: a quantidade de colunas do grid.

Exemplo:

Para deixar dois blocos com tamanho iguais, alinhados na lateral da tela com um espaço central vazio.

<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 offset-md-2"></div>
</div>

O que é o valor auto em CSS?

Veja mais em:
Como usar o sistema de grid do bootstrap?