Nachfolgend haben wir einige Beispiele für Bootstrap 5-Rasterlayouts zusammengestellt.
Verwenden Sie die Klasse .col
für eine bestimmte Anzahl von Elementen und Bootstrap erkennt, wie viele Elemente vorhanden sind (und erstellt Spalten gleicher Breite). Im folgenden Beispiel verwenden wir drei col-Elemente, die jeweils eine Breite von 33,33 % erhalten.
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
Probieren Sie es selbst aus →
<!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">
<h2>Three Equal Columns</h2>
<p>Use the .col class on a specified number of elements and Bootstrap will recognize how many elements there are (and create equal-width columns). In the example below, we use three col elements, which gets a width of 33.33% each.</p>
<div class="row">
<div class="col bg-success">.col</div>
<div class="col bg-warning">.col</div>
<div class="col bg-success">.col</div>
</div>
</div>
</body>
</html>
Sie können auch Zahlen verwenden, um die Spaltenbreite zu steuern. Stellen Sie einfach sicher, dass die Summe 12 oder weniger ergibt (es ist nicht erforderlich, dass Sie alle 12 verfügbaren Spalten verwenden):
<div class="row">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
Probieren Sie es selbst aus →
<!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">
<h2>Three Equal Columns</h2>
<p>You can also use numbers to control the column width. Just make sure that the sum always adds up to 12:</p>
<div class="row">
<div class="col-4 bg-success">.col-4</div>
<div class="col-4 bg-warning">.col-4</div>
<div class="col-4 bg-success">.col-4</div>
</div>
</div>
</body>
</html>
Um ungleiche Spalten zu erstellen, müssen Sie Zahlen verwenden. Das folgende Beispiel erstellt eine Aufteilung von 25 %/50 %/25 %:
<div class="row">
<div class="col-3">col-3</div>
<div class="col-6">col-6</div>
<div class="col-3">col-3</div>
</div>
Probieren Sie es selbst aus →
<!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">
<h2>Three Unequal Columns</h2>
<p>To create unequal columns, you have to use numbers. The following example will create a 25%/50%/25% split:</p>
<div class="row">
<div class="col-3 bg-success">.col-3</div>
<div class="col-6 bg-warning">.col-6</div>
<div class="col-3 bg-success">.col-3</div>
</div>
</div>
</body>
</html>
Es reicht jedoch aus, nur die Breite einer Spalte festzulegen und die Größe der Geschwisterspalten automatisch um diese herum anzupassen. Das folgende Beispiel erstellt eine Aufteilung von 25 %/50 %/25 %:
<div class="row">
<div class="col">col</div>
<div class="col-6">col-6</div>
<div class="col">col</div>
</div>
Probieren Sie es selbst aus →
<!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">
<h2>Three Unequal Columns</h2>
<p>It is enough to only set the width of one column, and have the sibling columns automatically resize around it. The following example will create a 25%/50%/25% split:</p>
<div class="row">
<div class="col bg-success">.col</div>
<div class="col-6 bg-warning">.col-6</div>
<div class="col bg-success">.col</div>
</div>
</div>
</body>
</html>
<!-- Two equal columns -->
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<!-- Four equal columns -->
<div class="row">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
<!-- Six equal columns -->
<div class="row">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3 of 6</div>
<div class="col">4 of 6</div>
<div class="col">5 of 6</div>
<div class="col">6 of 6</div>
</div>
Probieren Sie es selbst aus →
<!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">
<h2>More Equal Columns</h2>
<div class="row">
<div class="col bg-success">1 of 2</div>
<div class="col bg-warning">2 of 2</div>
</div>
<br>
<div class="row">
<div class="col bg-success">1 of 4</div>
<div class="col bg-warning">2 of 4</div>
<div class="col bg-success">3 of 4</div>
<div class="col bg-warning">4 of 4</div>
</div>
<br>
<div class="row">
<div class="col bg-success">1 of 6</div>
<div class="col bg-warning">2 of 6</div>
<div class="col bg-success">3 of 6</div>
<div class="col bg-warning">4 of 6</div>
<div class="col bg-success">5 of 6</div>
<div class="col bg-warning">6 of 6</div>
</div>
</div>
</body>
</html>
Mit den .row-cols-*
-Klassen können Sie auch steuern, wie viele Spalten nebeneinander angezeigt werden sollen (unabhängig von der Anzahl der Spalten):
<div class="row row-cols-1">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row row-cols-2">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
<div class="row row-cols-3">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3 of 6</div>
<div class="col">4 of 6</div>
<div class="col">5 of 6</div>
<div class="col">6 of 6</div>
</div>
Probieren Sie es selbst aus →
<!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">
<h2>Row Cols</h2>
<p>The .row-cols-* classes are used to set the number of columns that should appear next to each other.</p>
<div class="row row-cols-1">
<div class="col bg-success">1 of 2</div>
<div class="col bg-warning">2 of 2</div>
</div>
<br>
<div class="row row-cols-2">
<div class="col bg-success">1 of 4</div>
<div class="col bg-warning">2 of 4</div>
<div class="col bg-success">3 of 4</div>
<div class="col bg-warning">4 of 4</div>
</div>
<br>
<div class="row row-cols-3">
<div class="col bg-success">1 of 6</div>
<div class="col bg-warning">2 of 6</div>
<div class="col bg-success">3 of 6</div>
<div class="col bg-warning">4 of 6</div>
<div class="col bg-success">5 of 6</div>
<div class="col bg-warning">6 of 6</div>
</div>
</div>
</body>
</html>
<!-- Two Unequal Columns -->
<div class="row">
<div class="col-8">1 of 2</div>
<div class="col-4">2 of 2</div>
</div>
<!-- Four Unequal Columns -->
<div class="row">
<div class="col-2">1 of 4</div>
<div class="col-2">2 of 4</div>
<div class="col-2">3 of 4</div>
<div class="col-6">4 of 4</div>
</div>
<!-- Setting two column widths -->
<div class="row">
<div class="col-4">1 of 4</div>
<div class="col-6">2 of 4</div>
<div class="col">3 of 4</div>
<div class="col">4 of 4</div>
</div>
Probieren Sie es selbst aus →
<!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">
<h2>More Unequal Columns</h2>
<div class="row">
<div class="col-8 bg-success">1 of 2</div>
<div class="col-4 bg-warning">2 of 2</div>
</div>
<br>
<div class="row">
<div class="col-2 bg-success">1 of 4</div>
<div class="col-2 bg-warning">2 of 4</div>
<div class="col-2 bg-success">3 of 4</div>
<div class="col-6 bg-warning">4 of 4</div>
</div>
<br>
<div class="row">
<div class="col-4 bg-success">1 of 4</div>
<div class="col-6 bg-warning">2 of 4</div>
<div class="col bg-success">3 of 4</div>
<div class="col bg-warning">4 of 4</div>
</div>
</div>
</body>
</html>
Wenn eine der Spalten höher als die andere ist (aufgrund der Text- oder CSS-Höhe), folgt der Rest:
<div class="row">
<div class="col">Lorem ipsum...</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
Probieren Sie es selbst aus →
<!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">
<h2>Equal Height</h2>
<p>If one of the column is taller than the other, the rest will follow.</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col bg-success">Lorem ipsum dolor sit amet, cibo sensibus interesset no sit. Et dolor possim volutpat qui. No malis tollit iriure eam, et vel tale zril blandit, rebum vidisse nostrum qui eu. No nostrud dolorem legendos mea, ea eum mucius oporteat platonem.Eam an case scribentur, ei clita causae cum, alia debet eu vel.</div>
<div class="col bg-warning">.col</div>
<div class="col bg-success">.col</div>
</div>
</div>
</body>
</html>
Das folgende Beispiel zeigt, wie ein zweispaltiges Layout mit zwei weiteren Spalten in einer der Spalten erstellt wird:
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
Probieren Sie es selbst aus →
<!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">
<h2>Nested Columns</h2>
<p>Add columns inside other columns:</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-8 bg-warning p-4">
.col-8
<div class="row">
<div class="col-6 bg-light p-2">.col-6</div>
<div class="col-6 bg-secondary p-2">.col-6</div>
</div>
</div>
<div class="col-4 bg-success p-4">.col-4</div>
</div>
</div>
</body>
</html>
Das Bootstrap 5-Rastersystem verfügt über fünf Klassen:
.col-
(extra kleine Geräte - Bildschirmbreite weniger als 576 Pixel)
.col-sm-
(kleine Geräte - Bildschirmbreite gleich oder größer als 576 Pixel)
.col-md-
(mittlere Geräte - Bildschirmbreite gleich oder größer als 768 Pixel)
.col-lg-
(große Geräte - Bildschirmbreite gleich oder größer als 992 Pixel)
.col-xl-
(xlarge-Geräte - Bildschirmbreite gleich oder größer als 1200 Pixel)
.col-xxl-
(XXL-Geräte - Bildschirmbreite gleich oder größer als 1400 Pixel)
Die oben genannten Klassen können kombiniert werden, um dynamischere und flexiblere Layouts zu erstellen.
Tipp: Jede Klasse skaliert, wenn Sie also die gleichen Breiten für sm
und festlegen möchten md
, Sie müssen nur sm
angeben.
Das folgende Beispiel zeigt, wie Sie ein Spaltenlayout erstellen, das auf besonders kleinen Geräten gestapelt beginnt, bevor es auf größeren Geräten (sm, md, lg und xl) horizontal wird:
<div class="row">
<div class="col-sm-9">col-sm-9</div>
<div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div><
Probieren Sie es selbst aus →
<!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>Stacked to Horizontal</h1>
<p>Resize the browser window to see the effect.</p>
<p>This example demonstrates a 75%/25% split on small, medium, large and xlarge devices. On extra small devices, it will stack (100% width).</p>
<div class="container-fluid">
<div class="row">
<div class="col-sm-9 bg-success">col-sm-9</div>
<div class="col-sm-3 bg-warning">col-sm-3</div>
</div>
</div>
<br>
<p>This example demonstrates a 33% split on small, medium, large and xlarge devices. On extra small devices, it will stack (100% width).</p>
<div class="container-fluid">
<div class="row">
<div class="col-sm bg-success">col-sm</div>
<div class="col-sm bg-warning">col-sm</div>
<div class="col-sm bg-success">col-sm</div>
</div>
</div>
</div>
</body>
</html>
<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices -->
<div class="row">
<div class="col-6 col-sm-9">col-6 col-sm-9</div>
<div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>
<!-- 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices -->
<div class="row">
<div class="col-7 col-lg-8">col-7 col-lg-8</div>
<div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>
<!-- 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%) -->
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
<div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>
Probieren Sie es selbst aus →
<!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>Mix and Match</h1>
<p>Resize the browser window to see the effect.</p>
<p>This example demonstrates a 50%/50% split on extra small devices and 75%/25% split on larger devices.</p>
<div class="container-fluid">
<div class="row">
<div class="col-6 col-sm-9 bg-success">col-6 col-sm-9</div>
<div class="col-6 col-sm-3 bg-warning">col-6 col-sm-3</div>
</div>
</div>
<br>
<p>This example demonstrates a 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices.</p>
<div class="container-fluid">
<div class="row">
<div class="col-7 col-lg-8 bg-success">col-7 col-lg-8</div>
<div class="col-5 col-lg-4 bg-warning">col-5 col-lg-4</div>
</div>
</div>
<br>
<p>This example demonstrates a 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%).</p>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 bg-success">col-sm-3 col-md-6 col-lg-4</div>
<div class="col-sm-9 col-md-6 col-lg-8 bg-warning">col-sm-9 col-md-6 col-lg-8</div>
</div>
</div>
</div>
</body>
</html>
Um die Zwischenräume (zusätzlichen Abstand) zwischen den Spalten zu ändern, verwenden Sie eine der .g-1|2|3|4|5
-Klassen (.g-4
ist Standard).
Um die Dachrinne vollständig zu entfernen, verwenden Sie .g-0
:
<div class="row g-0">
Probieren Sie es selbst aus →
<!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>No Gutters</h1>
<p>To change the gutters (extra space) between columns, use any of the <code class="w3-codespan">.g-1|2|3|4|5</code> classes
(<code class="w3-codespan">.g-4</code> is default). </p>
<p>To remove the gutters completely, use <code class="w3-codespan">.g-0</code>:</p>
<div class="container-fluid">
<div class="row g-0">
<div class="col-3 bg-success">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="col-9 bg-warning">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
</div>
</div>
</div>
</body>
</html>