Entendendo o layout da grade no Bootstrap

Neste post, abordaremos vários aspectos do sistema Bootstrap Grid com vários exemplos. Para começar, vamos criar um layout de quatro colunas iguais para dispositivos de tamanho médio no sistema Bootstrap Grid.

Dhananjay Kumar Last Updated Feb 25, 2025 11min read

A cada dia que passa, novos dispositivos com novos tamanhos de tela estão surgindo – e, como desenvolvedores da Web, precisamos criar aplicativos da Web que respondam a esses vários tamanhos de tela. Existem várias maneiras de criar um layout responsivo, no entanto, acho o layout de grade do Bootstrap o mais fácil.

4 Layout de colunas iguais

Para criar o layout, você precisa concluir as seguintes etapas:

Crie um div com contêiner de classe para largura fixa ou container-fluid para toda a largura da tela
Crie um div com a linha da classe. Div com a linha de classe deve estar dentro do contêiner
Crie 4 divs para 4 colunas. Div da coluna deve ser o filho imediato da linha div
O conteúdo estará dentro da coluna div

Para criar quatro colunas iguais em uma linha, criei quatro divs com a classe definida em col-md-3, conforme mostrado na listagem abaixo:

<div class="row">
    <div class="col-md-3">
        <button class="btn btn-success">column1</button>
    </div>
    <div class="col-md-3">
        <button class="btn btn-info">column2</button>
    </div>
    <div class="col-md-3">
        <button class="btn btn-danger">column3</button>
    </div>
    <div class="col-md-3">
        <button class="btn btn-warning">column4</button>
    </div>
</div>

O sistema Bootstrap Grid divide a largura disponível da tela em 12 colunas. Então, para criar quatro colunas, usamos a classe col-md-3 (para dispositivos médios).

3 Unequal Columns Layout

Para criar três colunas desiguais em uma linha, criei três divs com a classe definida em col-md-3, col-md-6 e col-md-4, conforme mostrado na listagem abaixo:

<div class="row">
    <div class="col-md-3">
        <h2>some text</h2>
    </div>
    <div class="col-md-6">
        <h2>some text</h2>
    </div>
    <div class="col-md-4">
        <h2>some text</h2>
    </div>
</div>

Usamos a classe .col-md-* para criar o layout, uma com colunas iguais e outra com colunas desiguais para dispositivos médios. Para outros dispositivos, temos outras classes disponíveis que discutiremos mais adiante no post. Vamos mais longe para discutir o conceito teórico de sistema de grade.

Sistema de grade de bootstrap

O sistema Bootstrap 3.0 Grid foi projetado com dispositivos móveis em mente. É responsivo e nos dá aulas para criar layouts para dispositivos extra pequenos, dispositivos pequenos, desktops e desktops extra maiores. Várias classes fornecidas a nós para vários tipos de dispositivos são mostradas na imagem abaixo:

Várias classes fornecidas a nós para vários tipos de dispositivos são mostradas

O sistema Bootstrap Grid divide cada tipo de tela em 12 colunas. A largura das colunas depende do tamanho da tela, mas o Bootstrap considera vários tamanhos de tela e seus tamanhos de colunas são os seguintes:

A largura das colunas depende do tamanho da tela, mas o Bootstrap considera vários tamanhos de tela e seus tamanhos de colunas

Essas 12 colunas podem ser ampliadas ou reduzidas em diferentes variações, dependendo do tamanho da tela, conforme mostrado abaixo:

Podemos criar o layout acima para dispositivos de tamanho médio usando a lista abaixo:

<div class="container">
    <div class="row">
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>
        <div class="col-md-1">
            col-md-1
        </div>

    </div>

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

    <div class="row">
        <div class="col-md-3">
            col-md-3
        </div>
        <div class="col-md-3">
            col-md-3
        </div>
        <div class="col-md-3">
            col-md-3
        </div>
        <div class="col-md-3">
            col-md-3
        </div>
    </div>

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

    <div class="row">
        <div class="col-md-6">
            col-md-6
        </div>
        <div class="col-md-6">
            col-md-6
        </div>
    </div>
</div>

Regras para usar o sistema Bootstrap Grid

Para trabalhar com o layout do Bootstrap Grid, precisamos cuidar dos seguintes pontos:

As linhas devem ser colocadas dentro de um contêiner (para largura fixa) ou container.fluid (para largura total) para buscar preenchimento e alinhamento adequados.
As colunas devem ser filhos imediatos de linhas.
O conteúdo deve ser colocado dentro das colunas.
Cada linha tem duas colunas disponíveis.
Se mais de 12 colunas forem colocadas em uma única linha, cada grupo de colunas extras será, como uma unidade, quebrado em uma nova linha.

Criando layout para dispositivos médios

Digamos que precisamos criar um layout para dispositivo médio com o seguinte requisito

Should have three columns
A largura da 1ª coluna deve ser igual à largura de 2 colunas.
A largura da 2ª coluna deve ser igual à largura de 6 colunas.
A largura da 3ª coluna deve ser igual à largura de 4 colunas.

Este layout pode ser criado conforme mostrado na listagem abaixo:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            <h2>.col-md-2</h2>
            <p>some text</p>
        </div>
        <div class="col-md-6">
            <h2>.col-md-6</h2>
            <p>some text</p>
        </div>
        <div class="col-md-4">
            <h2>.col-md-4</h2>
            <p>some text</p>
        </div>
    </div>
</div>

Isso criará um layout conforme mostrado abaixo:

O código acima criará um layout conforme mostrado

Se você não quiser trabalhar com a largura total do dispositivo e quiser usar uma largura fixa, coloque a linha div dentro da classe de contêiner, conforme mostrado na listagem abaixo:

<div class="container">
    <div class="row">
        <div class="col-md-2">
            <h2>.col-md-2</h2>
            <p>some text</p>
        </div>
        <div class="col-md-6">
            <h2>.col-md-6</h2>
            <p>some text</p>
        </div>
        <div class="col-md-4">
            <h2>.col-md-4</h2>
            <p>some text</p>
        </div>
    </div>
</div>

Aqui o layout seria criado conforme mostrado na imagem abaixo, que está usando a largura fixa:

Se colocarmos mais de 12 colunas em uma única linha, as colunas extras como unidade serão empilhadas na próxima linha.

Criando layout para dispositivos pequenos

Digamos que precisamos criar um layout para um dispositivo pequeno com os seguintes requisitos:

Should have three columns
A largura da 1ª coluna deve ser igual à largura de 2 colunas.
A largura do ^2º deve ser igual à largura das 6 colunas.
A largura da 3ª deve ser igual à largura das 4 colunas.

Este layout pode ser criado para dispositivos pequenos, conforme mostrado na listagem abaixo:

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-2">
            <h2>.col-sm-2</h2>
            <p>some text</p>
        </div>
        <div class="col-sm-6">
            <h2>.col-sm-6</h2>
            <p>some text</p>
        </div>
        <div class="col-sm-4">
            <h2>.col-sm-4</h2>
            <p>some text </p>
        </div>
    </div>
</div>

Este snippet fornecerá o layout mostrado na imagem abaixo. Como você pode notar, a largura da segunda coluna é três vezes maior que a largura da primeira coluna. Além disso, o outro ponto importante que você pode notar é que as colunas não estão empilhadas verticalmente, mesmo quando a largura dos navegadores é reduzida (simulando pequenos dispositivos).

Da mesma forma, layouts para dispositivos grandes e extra pequenos podem ser criados usando as classes .col-mg-* e .col-xs.* respectivamente.

Criando layouts para tablet e desktop

Podemos combinar a classe col-md-* e a classe col-sm-* para criar layouts para desktops e tablets. Podemos criar um layout de três colunas desiguais, conforme mostrado na listagem abaixo:

<div class="row">
    <div class="col-md-2 col-sm-2">
        <h2>some text</h2>
    </div>
    <div class="col-md-6 col-sm-6">
        <h2>some text</h2>
    </div>
    <div class="col-md-4 col-sm-4">
        <h2>some text</h2>
    </div>
</div>

O layout criado acima seria responsivo tanto para desktops de tamanho médio quanto para tablets.

Criando layout para tablet, desktop e celular

Podemos combinar a classe col-md-*, col-xs-* e col-sm-* para criar layouts para desktops e tablets – vamos ver como criar um layout de três colunas desiguais, conforme mostrado na listagem abaixo:

<div class="row">
    <div class="col-md-2 col-sm-2 col-xs-2">
        <h2>some text</h2>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6">
        <h2>some text</h2>
    </div>
    <div class="col-md-4 col-sm-4 col-xs-4">
        <h2>some text</h2>
    </div>
</div>

O layout criado acima seria responsivo a desktops, dispositivos móveis e tablets de tamanho médio de tela.

Nesting Columns

O Bootstrap também permite o aninhamento de colunas, o que significa que podemos colocar linhas e colunas dentro de uma coluna existente. Lembre-se de que, mesmo no aninhamento, a soma do total de colunas não deve ser maior que 12 em uma mesma linha. Para entender isso melhor, vamos considerar o seguinte cenário:

Há uma linha.
Há duas colunas na linha.
A primeira coluna é da classe col-md-4.
A segunda coluna é da classe col-md-8.
Há uma coluna aninhada dentro da primeira coluna.

Aqui, o número máximo de colunas aninhadas seria 12 dentro do col-md-4. Mais de 12 colunas seriam empilhadas na próxima linha da primeira coluna. Vamos considerar a listagem abaixo, onde mantivemos mais de 12 colunas aninhadas.

<div class="row">
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-2">
                <h2>text here</h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
            <div class="col-md-2">
                <h2>text here </h2>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <h1>I am level - col-md-8 </h1>
    </div>
</div>

Aqui colocamos mais de 12 colunas aninhadas na primeira coluna da linha principal. Colunas aninhadas extras seriam empilhadas na próxima linha, conforme mostrado na imagem abaixo:

Column Offset

O Bootstrap nos permite mover colunas para a direita usando a classe .col-md-offset-*. Então, digamos que queremos mover uma coluna por 4 colunas para a direita, então teremos que usar a classe col-md-offset-4. Isso pode ser feito conforme mostrado na lista abaixo:

<div class="row">
    <div class="col-md-5 col-md-offset-4">
        <h2>moved 4 columns right</h2>
    </div>
    <div class="col-md-3">
        <h2>col-md-3 </h2>
    </div>
</div>

As colunas de deslocamento são exibidas conforme mostrado na imagem abaixo:

Empurrar e puxar colunas

O Bootstrap também nos permite reordenar colunas. Podemos usar as classes col-md-push-* ou col-md-pull-* para fazer isso:

<div class="row">
    <div class="col-md-9 col-md-push-3">col-md-9 col-md-push-3</div>
    <div class="col-md-3 col-md-pull-9">col-md-3 col-md-pull-9</div>
 </div>

Aqui, a primeira coluna seria empurrada por 3 colunas para a direita e a segunda coluna seria puxada para 9 colunas para a esquerda, conforme mostrado abaixo:

Conclusão

Como demonstramos, você pode usar várias classes fornecidas pelo Bootstrap para criar layouts responsivos para seus aplicativos Web. Nesta postagem, nos concentramos nas classes de linha e colunas, juntamente com deslocamento, push, pull e aninhamento das colunas. Espero que você ache este post útil e obrigado por ler!

Crie aplicativos Web modernos para qualquer cenário com suas estruturas favoritas.BaixeIgnite UI hoje e experimente o poder de Infragistics controles jQuery.

Como