Grids
Die drei Layout-CTypes t3bs_container, t3bs_fluidrow und t3bs_column bilden das Bootstrap-5-Grid in TYPO3 ab. Diese Seite zeigt alle Varianten und Optionen anhand sichtbar markierter Demo-Bereiche.
Container sind blau, Rows rot, Columns grün umrandet — die Markierung erscheint nur, wenn t3bs-demo-outline als zusätzliche CSS-Klasse gesetzt ist.
Container-Typen
Bootstrap bietet sechs Container-Varianten. container ist responsiv mit Max-Breite je Breakpoint (540 / 720 / 960 / 1140 / 1320 px). Die Varianten container-sm bis container-xl sind unterhalb ihres Breakpoints 100 % breit, ab dem Breakpoint dann identisch mit .container. container-fluid ist immer 100 %.
Die Unterschiede sind nur an kleineren Viewports sichtbar — Browser-Fenster schmal ziehen, um den Effekt zu sehen.
container
Standard responsiv: Max-Breite passt sich je Breakpoint an (540 / 720 / 960 / 1140 / 1320 px). Verhalten bei jeder Viewport-Breite.
container-sm
Unterhalb sm (576 px) 100 % breit, ab sm identisch mit .container. Ergibt Edge-to-Edge auf Mobile.
container-md
Unterhalb md (768 px) 100 % breit, ab md identisch mit .container.
container-lg
Unterhalb lg (992 px) 100 % breit, ab lg identisch mit .container.
container-xl
Unterhalb xl (1200 px) 100 % breit, ab xl identisch mit .container.
container-fluid
Immer 100 % Viewport-Breite, ohne Max-Breite-Cap.
Row-Optionen
t3bs_fluidrow bietet drei Konfigurationen: vertikale Ausrichtung (align-items-*), horizontale Verteilung (justify-content-*) und Display-Modus (flex vs. block).
Demo 1 — justify-content: between
A
B
C
Demo 2 — align-items: center
Spalten mit unterschiedlicher Höhe werden vertikal mittig ausgerichtet.
Kurz
Drei Zeilen Text füllen diese Spalte vertikal deutlich höher als die Nachbarn. Damit wird die Wirkung von align-items-center erkennbar.
Mittel lang
Spalten & Breakpoints
Jede Column trägt pro Breakpoint eine eigene Breite (tx_t3bs_col_xs bis tx_t3bs_col_xxl). Werte sind 1–12. Wird ein Wert leer gelassen, gilt der zuletzt definierte. Browser-Breite ändern, um das Verhalten zu sehen.
Spalte 1
xs:12 · sm:6 · md:4 · lg:3
Spalte 2
xs:12 · sm:6 · md:4 · lg:3
Spalte 3
xs:12 · sm:6 · md:4 · lg:3
Spalte 4
xs:12 · sm:6 · md:4 · lg:3
Verhalten: unter sm 1 Spalte (volle Breite) · sm 2 Spalten · md 3 Spalten · lg 4 Spalten.
Offset & Reihenfolge
Spalten lassen sich versetzen (offset-md-*) und visuell umsortieren (order-*), ohne die HTML-Reihenfolge zu ändern. Beides wird über das Feld Additional CSS Class an der Column gesetzt.
md=4 + offset-md-2
beginnt bei Spalte 3
md=4
direkt anschließend
Verschachtelung
Innerhalb einer Column kann eine weitere Row platziert werden. Das ist nützlich für Sub-Layouts und vermeidet das Aufblähen der Spaltenanzahl auf 12.
Äußere Spalte (md=8)
Innere Spalte (md=6)
Innere Spalte (md=6)
Äußere Spalte (md=4)