Sistema grid · Bootstrap em Português
Não tem (auto) 540px 720px 960px 1140px
Prefixo em classe
Largura da gutter
30px (15px em cada lado da coluna)
Aninhável
Ordenamento de coluna
<div class="col">Coluna</div>
<!-- Empilhe as colunas, em dispositivos móveis, fazendo com que uma tenha largura total e a outra só metade -->
<!-- Colunas começam com largura de 50%, em dispositivos móveis, e caem para 33.3% nos desktops -->
<!-- Colunas sempre com metade da largura disponível, em dispositivos móveis e desktop -->
Aqui está um exemplo de customização do grid Bootstrap no breakpoint large (lg) e acima. Nós aumentamos o padding do .col com .px-lg-5 e, então, o neutralizamos com .mx-lg-n5 na .row pai.
<div class="col py-3 px-lg-5 border bg-light">Padding de coluna customizado.</div>
<div class="col-4">.col-4<br>Já que 9 + 4 é maior que 12, esta div de quatro colunas pula para essa nova linha.</div>
<div class="col-6">.col-6<br>Colunas subsequentes pulam junto para a nova linha.</div>
<!-- Force as próximas colunas quebrarem, em uma nova linha -->
<!-- Force as próximas colunas quebrarem, em uma nova linha, no breakpoint md ou maior -->
<div class="container-exemplo">
<div class="example-content-main">Conteúdo principal</div>
<div class="example-content-secondary">Conteúdo secundário</div>
O número de colunas pode ser modificado com variáveis Sass. $grid-columns é usada para gerar as larguras (em porcentagem) de cada coluna individual, enquanto $grid-gutter-width gera larguras para a coluna gutters.