Bootstrap-Grid
Das Grid-System (12 Spalten) von Bootstrap verwendet eine Reihe von Containern, Reihen und Spalten zum Anordnen und Ausrichten von Inhalten. Es nutzt Flexbox und ist responsive.
Im Auslieferungszustand müssen Sie die Grid-Klassen von Hand im Bereich Experten-Einstellungen > CSS-ID/klasse in das 2. Feld eintragen. Einfacher geht es mit dem Modul dma_simple_grid. Mehr Infos dazu hier.
Zum besseren Verständnis der nachfolgenden Tabellen und Erläuterungen, sollten Sie sich unbedingt die Demo-Inhalte ansehen!
Grid Optionen
| Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|
|---|---|---|---|---|---|
| Klassenpräfix | col- | col-sm- | col-md- | col-lg- | col-xl- |
| Anzahl Spalten | 12 | 12 | 12 | 12 | 12 |
| Abstände (Gutter width) |
30px einer Spalte) | (15 Pixel auf jeder | Seite einer Spalte) | ||
| Verschachtelbar (Nestable) |
Ja |
| Max. Containerbreite | Mögliche Grid-Klassen | Geräte |
|---|---|---|
| Alle Breiten | col-1 bis col-12 | Alle Geräte |
| min-width: 576px | col-sm-1 bis col-sm-1 | Smartphone |
| min-width: 768px | col-md-1 bis col-md-12 | Tablet - Hochkant |
| min-width: 992px | col-lg-1 bis col-col-lg-12 | Tablet - Quer |
| min-width: 1200px | col-xl-1 bis col-xl-1 | Desktop |
Beispiele
Elemente die immer über die volle Breite gehen sollen, benötigen Sie keinen Row-Container und Grid-Klassen!
Benötigte Elemente
- Als Elementtyp wählen Sie Include-Element > Modul
- Im Bereich Include-Einstellungen das Modul Grid - Row - Start auswählen.
- Schritt 1 wiederholen.
- Im Bereich Include-Einstellungen das Modul Grid - Row - Stop auswählen.
- Zwischen diese beiden Elemente (Module) setzen Sie die von Ihnen gewünschten Elemente und tragen im Bereich Experten-Einstellungen > CSS-ID/Klasse in das 2. Feld die Grid-Klassen ein.
4 Elemente in einem row - Container
Auf dem Smartphone die ganze Breite, Tablett-Hochkant 2 Elemente nebeneinander und auf dem Tablet-Quer und Desktop 4 Blöcke nebeneinander.
Benötigte Grid-Klassen: col-sm-6 col-lg-3
Wichtig: Die Leerstelle zwischen Klassen!