0

Estou usando o Bootstrap 4 para meu frontend e fiquei na dúvida se devo colocar sempre todo conteúdo do meu HTML dentro de uma div com classe col que por sua vez deve vir dentro de uma uma div com classe row.

Por exemplo, deve ser sempre assim:

<div class="container">
    <div class="row">
        <div class="col">
            <h1>Todo meu conteúdo deve ficar aqui?</h1>
        </div>
    </div>
</div>

Ou assim também é aceitável:

<div class="container">
    <h1>Conteúdo fora da div com classe "col"</h1>
    <div class="row">
        <div class="col">
            Mais conteúdo...
        </div>
    </div>
</div>
1
  • row refere-se a linha e col a coluna, é aconselhado utilizar o conteúdo dentro das cols dessa forma que você postou, não todo conteúdo é claro, mas do que você quer que seja exibido naquela coluna. Commented 28/06/2019 às 14:36

1 Resposta 1

3

A documentação restringe conteúdo dentro de .row, mas não dentro de .container:

In a grid layout, content must be placed within columns and only columns may be immediate children of rows.

Traduzindo:

Em um layout de grid, o conteúdo deve ser colocado dentro das colunas e apenas colunas podem ser filhos imediatos de linhas.

Em outro item explica que cada coluna tem padding para criar um "vão" (gutter em inglês) entre as colunas, e este "vão" é compensado com margens negativas nas .row.

Dito isso, as restrições parecem se aplicar apenas a .row e .col, o .container será apenas o elemento que limita o tamanho da sua tela.

Se você ver o código que cria as regras para o container verá:

@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

Nenhumas das regras CSS atrapalharia você usar um <h1> fora das .rows, mas o aconselhável é você usar e testar em diferentes tamanhos de tela para garantir o bom funcionamento.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .