Bootstraps rutsystem är byggt med flexbox och tillåter upp till 12 kolumner över sidan.
Om du inte vill använda alla 12 kolumner individuellt kan du gruppera kolumnerna för att skapa bredare kolumner:
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 |
Rutnätssystemet är lyhört och kolumnerna kommer att omarrangeras automatiskt beroende på skärmstorleken.
Se till att summan blir 12 eller färre (det krävs inte att du använder alla 12 tillgängliga kolumner).
Bootstrap 5-rutnätssystemet har sex klasser:
.col-
(extra små enheter - skärmbredd mindre än 576px)
.col-sm-
(små enheter - skärmbredd lika med eller större än 576px)
.col-md-
(medelstora enheter - skärmbredd lika med eller större än 768px)
.col-lg-
(stora enheter - skärmbredd lika med eller större än 992px)
.col-xl-
(xlarge enheter - skärmbredd lika med eller större än 1200px)
.col-xxl-
(xxlarge enheter - skärmbredd lika med eller större än 1400px)
Klasserna ovan kan kombineras för att skapa mer dynamiska och flexibla layouter.
Tips: Varje klass skalas upp, så om du vill ställa in samma bredder för sm
och md
behöver du bara ange sm
.
Följande är en grundläggande struktur för ett Bootstrap 5-rutnät:
<!-- 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>
Prova själv →
<!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örsta exemplet: skapa en rad (<div class="row">
). Lägg sedan till önskat antal kolumner (taggar med lämpliga .col-*-*
-klasser). Den första stjärnan (*) representerar reaktionsförmågan: sm, md, lg, xl eller xxl, medan den andra stjärnan representerar ett tal som ska läggas till 12 för varje rad.
Andra exemplet: istället för att lägga till ett nummer till varje col
, låt bootstrap hantera layouten för att skapa lika breda kolumner: två " col"
element=50 % bredd för varje kolumn, medan tre kolumner=33,33 % bredd för varje kol. Fyra kolumner=25 % bredd, etc. Du kan också använda .col-sm|md|lg|xl|xxl
för att göra kolumnerna responsiva.
Följande tabell sammanfattar hur Bootstrap 5-rutnätssystemet fungerar över olika skärmstorlekar:
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 |