Grid system

Bootstrap beinhaltet ein anpassungsfähiges, Mobile-First-basiertes Flexbox-Raster, das bis zu 12 Spalten über verschiedene Geräte- oder Viewport-Größen skaliert.

Mit “T3S Bootstrap” wird dieses 12-Spalten-System mit Raster-Elemente (Gridelements oder Container) für Redakteure bedienbar gemacht.

Hier ist die einfache Erklärung der Grundbausteine:

Die Hierarchie: 
Container > Row > Col
Das Grid funktioniert nur, wenn diese drei Elemente in der richtigen Reihenfolge verschachtelt sind.

Container (.container oder .container-fluid):
Die äußere Klammer. Er zentriert den Inhalt und gibt ihm eine maximale Breite (oder nutzt die volle Breite bei fluid).

Row (.row): 
Die Class .row dient als Wrapper für die Spalten. Stell dir ein horizontales Band vor, das die einzelnen Spalten (.col-*) umschließt und ordnet.

Col (.col-*):
Die eigentlichen "Spalten". Hier liegen deine Texte, Bilder oder Buttons.
Jede Spalte (.col) hat links und rechts einen Innenabstand (Gutter), damit die Inhalte einen Abstand haben.
Diese heben das Padding der äußeren Spalten genau auf.

Wichtig: Deshalb muss eine .row immer innerhalb eines .container stehen, da dieser den Platz bereitstellt

Gutter:
Die Abstände zwischen den Spalten heißen Gutter. 
In Bootstrap steuerst du diese mit der Klasse .g-* (z. B. .g-0 für keinen Abstand oder .g-4 für den Standardabstand):
.g-0: Kein Abstand zwischen den Spalten.
.gx-5: Nur horizontal ein sehr großer Abstand.
.gy-3: Vertikaler Abstand, falls Spalten umbrechen (sehr nützlich für Card-Layouts).

Responsive Breakpoints:
Das Grid passt sich der Bildschirmgröße an. Dafür nutzt Bootstrap “Breakpoints”:
xs: Extra klein (Handy hochkant) – Standard, wenn nichts angegeben ist.
sm: Klein (Handy quer) – ab 576px.
md: Mittel (Tablet) – ab 768px.
lg: Groß (Laptop) – ab 992px.
xl/xxl: Extra groß (Desktop) – ab 1200px/1400px.

Beispiel:
Eine Spalte mit der Klasse col-12 col-md-6 col-lg-4 bedeutet:
Auf dem Handy ist sie 100% breit (12/12).
Ab dem Tablet rutschen zwei davon nebeneinander (6/12).
Ab dem Laptop stehen drei davon nebeneinander (4/12).