Skip to main content
2 de 3
adicionou 33 caracteres ao conteúdo
Pedro Camara Junior
  • 6,8mil
  • 3
  • 20
  • 55

Utilize os recursos do bootstrap para isso, no seu caso, use os conceitos do grid system

O que é o Grid System?

Grid System é usado para criar layouts de páginas utilizando uma série de linhas e colunas, sua página será dividida em 12 colunas, que irão váriar de tamanho conforme a resolução do navegador.

Veja abaixo um exemplo prático da ideia:

.col {
  border: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col col-xs-4">
    Coluna ocupando 4 de 12 colunas
  </div>
  <div class="col col-xs-4">
    Coluna ocupando 4 de 12 colunas
  </div>
  <div class="col col-xs-4">
    Coluna ocupando 4 de 12 colunas
  </div>
</div>
<div class="row">
  <div class="col col-xs-6">
    Coluna ocupando 6 de 12 colunas
  </div>
  <div class="col col-xs-2">
    Coluna ocupando 2 de 12 colunas
  </div>
  <div class="col col-xs-2">
    Coluna ocupando 2 de 12 colunas
  </div>
  <div class="col col-xs-2">
    Coluna ocupando 2 de 12 colunas
  </div>
  <div class="col col-xs-5">
    Coluna ocupando 5 de 12 colunas
  </div>
</div>

Note que dividi o html em duas linhas (div com a class row);

  • Na primeira linha defini 3 colunas e cada coluna ocupa o espaço de 4 colunas (div com a classe col-xs-4) no sistema de grid (lembre que o layout é dividido em 12 colunas)
  • Note que na segunda linha , defini mais que 12 colunas, foram 17 no total, sendo que a última, que não serviu automaticamente foi jogada para baixo, porém, ainda na mesma linha.

Configuração das resoluções

Agora, lembra que comentei que o Grid System é utilizado para tornar sua página responsiva? Então, você pode definir uma quantidade diferente de colunas em cada resolução, veja a definição:

  • lg - Dispositivos grandes (desktops, >= 1200px)
  • md - Dispositivos médios (desktops, >= 992px && < 1200px)
  • sm - Dispositivos pequenos (tablets, >= 768px && < 992px)
  • xs - Dispositivos extra pequenos (smartphones, < 768px)

Como usar as colunas por resolução?

Use os marcadores de resolução citados acima com a quantidade de colunas que deseja para cada resolução, veja um exemplo abaixo, vou definir

  • 6 colunas para mobile
  • 5 colunas para dispositivos pequenos
  • 4 colunas para dispositivos médios
  • 3 colunas para dispositivos grandes

A declaração da classe na div ficaria da seguinte maneira:

  • <div class="col-xs-6 col-sm-5 col-md-4 col-lg-3"></div>

Pode parecer um pouco complicado o Grid System à primeira vista, mas com o tempo você entende todo seu funcionamento e verá o quão mais rápido é criar layouts dessa maneira.

Há vários recursos na internet que explicam sobre esse recurso, e a documentação também é bem clara (porém em Inglês), no entanto há muito conteúdo em português também (só dar uma "googlada"), mas veja esse pra começar.

Pedro Camara Junior
  • 6,8mil
  • 3
  • 20
  • 55