Bootstrap 5: Grid-System


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Das Gittersystem

Das Rastersystem von Bootstrap basiert auf Flexbox und ermöglicht bis zu 12 Spalten auf der Seite.

Wenn Sie nicht alle 12 Spalten einzeln verwenden möchten, können Sie die Spalten gruppieren, um breitere Spalten zu erstellen:

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

Das Rastersystem reagiert und die Spalten werden je nach Bildschirmgröße automatisch neu angeordnet.

Stellen Sie sicher, dass die Summe 12 oder weniger beträgt (es ist nicht erforderlich, dass Sie alle 12 verfügbaren Spalten verwenden).

Grid-Klassen

Das Bootstrap 5-Rastersystem verfügt über sechs 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- (xxlarge-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.

Grundstruktur eines Bootstrap 5 Grids

Das Folgende ist eine Grundstruktur eines Bootstrap 5-Rasters:

<!-- 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>

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>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>

Erstes Beispiel: Erstellen Sie eine Zeile (<div class="row">). Fügen Sie dann die gewünschte Anzahl von Spalten hinzu (Tags mit entsprechenden .col-*-*-Klassen). Der erste Stern (*) stellt die Reaktionsfähigkeit dar: sm, md, lg, xl oder xxl, während der zweite Stern eine Zahl darstellt, die sich für jede Zeile auf 12 summieren sollte.

Zweites Beispiel: Anstatt jeder Spalte eine Zahl hinzuzufügen, überlassen Sie Bootstrap das Layout, um Spalten gleicher Breite zu erstellen: zwei " col" Elemente=50 % Breite für jede Spalte, während drei Spalten=33,33 % Breite für jede Spalte. Vier Spalten=25 % Breite usw. Sie können auch .col-sm|md|lg|xl|xxl verwenden, um die Spalten responsiv zu machen.

Rasteroptionen

Die folgende Tabelle fasst zusammen, wie das Bootstrap 5-Rastersystem auf verschiedenen Bildschirmgrößen funktioniert:

  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