12-Spalten-Layout

Das Rastersystem von Bootstrap unterteilt die Seite in 12 Spalten und bietet damit eine flexible und responsive Layoutstruktur. Dies ermöglicht es Entwicklern, ansprechende und gut strukturierte Designs zu erstellen, die sich nahtlos an verschiedene Bildschirmgrößen und Geräte anpassen.

Grid-Klassen

• container: Die Klasse container umschließt und zentriert den Inhalt innerhalb eines Containers mit fester Breite. Sie sorgt für Abstände, Ränder und gewährleistet die korrekte Ausrichtung des Inhalts;
• row: Die Klasse row erstellt eine horizontale Gruppe von Spalten. Sie dient als Container für Spalten und sorgt für die richtige Ausrichtung und Abstände zwischen ihnen;
• col: Spalten innerhalb einer Zeile werden mit der Klasse col definiert. Entwickler geben die Breite der Spalten mit col-Klassen wie col-6, col-md-4 oder col-lg-3 an.

Responsives Design

Das Rastersystem von Bootstrap ist für responsives Design konzipiert und ermöglicht es, dass sich Inhalte dynamisch an die Größe des Viewports und den Gerätetyp anpassen. Entwickler können responsive Grid-Klassen wie col-md-6 oder col-lg-4 verwenden, um Spaltenbreiten für verschiedene Bildschirmgrößen, wie mittlere oder große Geräte, festzulegen.

Hinweis

In Bootstrap stehen die Klassen sm, md, lg und xl für verschiedene Bildschirmgrößen

Beispiele

Beispiel 1: Grundlegendes Grid-Layout

In diesem Beispiel enthält ein Container eine einzelne Zeile mit drei gleich breiten Spalten. Jede Spalte nimmt einen gleichen Anteil der Zeilenbreite ein, was zu einem horizontalen Layout mit drei Spalten führt.

Beispiel 2: Responsives Grid-Layout

In diesem Beispiel enthält ein Container eine Zeile mit drei Spalten. Die ersten beiden Spalten (col-md-6) sind so eingestellt, dass sie auf mittelgroßen Bildschirmen und größer jeweils die Hälfte der Zeilenbreite einnehmen. Die dritte Spalte (col-md-12) ist so eingestellt, dass sie auf mittelgroßen Bildschirmen und größer die gesamte Zeilenbreite einnimmt. Dadurch wird sichergestellt, dass die dritte Spalte die gesamte Breite der Zeile belegt.

Ergebnis des responsiven Grid-Verhaltens