Bootstraps gittersystem er bygget med flexbox og tillader op til 12 kolonner på tværs af siden.
Hvis du ikke ønsker at bruge alle 12 kolonner individuelt, kan du gruppere kolonnerne for at skabe bredere kolonner:
| 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 | |||||||||||
Gittersystemet er responsivt, og kolonnerne omarrangeres automatisk afhængigt af skærmstørrelsen.
Sørg for, at summen summerer til 12 eller færre (det er ikke påkrævet, at du bruger alle 12 tilgængelige kolonner).
Bootstrap 5-gittersystemet har seks klasser:
.col- (ekstra små enheder - skærmbredde mindre end 576px)
.col-sm- (små enheder - skærmbredde lig med eller større end 576px)
.col-md- (mellemstore enheder - skærmbredde lig med eller større end 768px)
.col-lg- (store enheder - skærmbredde lig med eller større end 992px)
.col-xl- (xlarge devices - skærmbredde lig med eller større end 1200px)
.col-xxl- (xxlarge enheder - skærmbredde lig med eller større end 1400px)
Ovenstående klasser kan kombineres for at skabe mere dynamiske og fleksible layouts.
Tip: Hver klasse skaleres op, så hvis du vil indstille de samme bredder for sm og md, behøver du kun at angive sm.
Følgende er en grundlæggende struktur for et Bootstrap 5-gitter:
<!-- 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>Prøv det selv →
<!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>Basic Grid Structure</h1>
<p>Resize the browser window to see the effect.</p>
<p>The first, second and third row will automatically stack on top of each other when the screen is less than 576px wide.</p>
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-6 bg-primary text-white">50%</div>
<div class="col-sm-6 bg-dark text-white">50%</div>
</div>
<br>
<div class="row">
<div class="col-sm-4 bg-primary text-white">33.33%</div>
<div class="col-sm-4 bg-dark text-white">33.33%</div>
<div class="col-sm-4 bg-primary text-white">33.33%</div>
</div>
<br>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col-sm bg-primary text-white">25%</div>
<div class="col-sm bg-dark text-white">25%</div>
<div class="col-sm bg-primary text-white">25%</div>
<div class="col-sm bg-dark text-white">25%</div>
</div>
<br>
<div class="row">
<div class="col bg-primary text-white">25%</div>
<div class="col bg-dark text-white">25%</div>
<div class="col bg-primary text-white">25%</div>
<div class="col bg-dark text-white">25%</div>
</div>
</div>
</body>
</html>
Første eksempel: opret en række (<div class="row">). Tilføj derefter det ønskede antal kolonner (tags med passende .col-*-* klasser). Den første stjerne (*) repræsenterer reaktionsevnen: sm, md, lg, xl eller xxl, mens den anden stjerne repræsenterer et tal, som skal lægge op til 12 for hver række.
Andet eksempel: i stedet for at tilføje et tal til hver col, lad bootstrap håndtere layoutet for at skabe kolonner med samme bredde: to " col"-elementer=50 % bredde til hver kolonne, mens tre kolonner=33,33 % bredde til hver kolonne. Fire cols=25% bredde osv. Du kan også bruge .col-sm|md|lg|xl|xxl for at få kolonnerne til at reagere.
Følgende tabel opsummerer, hvordan Bootstrap 5-gittersystemet fungerer på tværs af forskellige skærmstørrelser:
| Extra small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px) | XXL (>=1400px) | |
|---|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Suitable for | Portrait phones | Landscape phones | Tablets | Laptops | Laptops and Desktops | Laptops and Desktops |
| # of columns | 12 | 12 | 12 | 12 | 12 | 12 |
| Gutter width | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes | Yes | Yes |