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 brug 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, du behøver kun at angive sm kode>.
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>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.
Nedenfor har vi samlet nogle eksempler på grundlæggende Bootstrap 5-gitterlayouts.
Følgende eksempel viser, hvordan du opretter tre kolonner med lige bredde på alle enheder og skærmbredder:
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.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>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>
Følgende eksempel viser, hvordan du opretter fire kolonner med lige bredde, der starter ved tablets og skalerer til ekstra store desktops. På mobiltelefoner eller skærme, der er mindre end 576px brede, stables kolonnerne automatisk oven på hinanden:
<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>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>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>
Følgende eksempel viser, hvordan du får to kolonner med forskellige bredder, der starter kl tablets og skalering til store ekstra desktops:
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</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>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>
Tip: Du vil lære mere om gittersystemet senere i denne øvelse.