O sistema de grade do Bootstrap é construído com flexbox e permite até 12 colunas na página.
Se não quiser usar todas as 12 colunas individualmente, você pode agrupar as colunas para criar colunas mais largas:
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
O sistema de grade é responsivo e as colunas serão reorganizadas automaticamente dependendo do tamanho da tela.
Certifique-se de que a soma totalize 12 ou menos (não é necessário que você use todas as 12 colunas disponíveis).
O sistema de grade Bootstrap 5 possui seis classes:
.col- (dispositivos extra pequenos - largura da tela inferior a 576px)
.col-sm- (dispositivos pequenos - largura de tela igual ou superior a 576px)
.col-md- (dispositivos médios - largura de tela igual ou superior a 768px)
.col-lg- (dispositivos grandes - largura de tela igual ou superior a 992px)
.col-xl- (dispositivos xlarge - largura de tela igual ou superior a 1200px)
.col-xxl- (dispositivos xxlarge - largura de tela igual ou superior a 1400px)
As classes acima podem ser combinadas para criar layouts mais dinâmicos e flexíveis.
Dica: cada classe aumenta, então se você quiser definir as mesmas larguras para sm e md, você só precisa especificar sm.
A seguir está uma estrutura básica de uma grade Bootstrap 5:
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>Primeiro exemplo: crie uma linha:
<div class="row">Em seguida, adicione o número desejado de colunas (tags com classes .col-*-* apropriadas). A primeira estrela (*) representa a capacidade de resposta: sm, md, lg, xl ou xxl, enquanto a segunda estrela representa um número, que deve somar 12 para cada linha.
Segundo exemplo: em vez de adicionar um número a cada col, deixe o bootstrap cuidar do layout, para criar colunas de largura igual: duas " col" elementos=50% de largura para cada coluna, enquanto três colunas=33,33% de largura para cada coluna. Quatro colunas=25% de largura, etc. Você também pode usar .col-sm|md|lg|xl|xxl para tornar as colunas responsivas.
Abaixo, coletamos alguns exemplos de layouts de grade básicos do Bootstrap 5.
O exemplo a seguir mostra como criar três colunas de largura igual, em todas dispositivos e larguras de tela:
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>Experimente você mesmo →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Three equal width columns</h1>
<p>Note: Try to add a new div with class="col" inside the row class - this will create four equal-width columns.</p>
<div class="row">
<div class="col p-3 bg-primary text-white">.col</div>
<div class="col p-3 bg-dark text-white">.col</div>
<div class="col p-3 bg-primary text-white">.col</div>
</div>
</div>
</body>
</html>
O exemplo a seguir mostra como criar quatro colunas de largura igual começando em tablets e escalando para desktops extra grandes. Em celulares ou telas com menos de 576 px de largura, as colunas serão empilhadas automaticamente um em cima do outro:
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>Experimente você mesmo →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-dark text-white">.col</div>
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-dark text-white">.col</div>
</div>
</div>
</body>
</html>
O exemplo a seguir mostra como obter duas colunas de larguras variadas começando em tablets e dimensionamento para grandes desktops extras:
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>Experimente você mesmo →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Two Unequal Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-4 p-3 bg-primary text-white">.col</div>
<div class="col-sm-8 p-3 bg-dark text-white">.col</div>
</div>
</div>
</body>
</html>
Dica: você aprenderá mais sobre o sistema de grade posteriormente neste tutorial.