Skip to main content
adicionou 98 caracteres ao conteúdo
Fonte Link
Pedro Camara Junior
  • 6,8mil
  • 3
  • 20
  • 55
.col {
  border: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <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>
</div>
.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>
.col {
  border: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <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>
</div>
adicionou 33 caracteres ao conteúdo
Fonte Link
Pedro Camara Junior
  • 6,8mil
  • 3
  • 20
  • 55

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

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

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.

Fonte Link
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 dcoumentação também é bem clara (porém em Inglês), porém há muito conteúdo em português também, veja esse pra começar.