Bootstrap Grundraster für bis zu 12 Spalten

Variable Spalten und Anordnungen

Ein wesentlicher Bestandteil des Bootstrap-Frameworks ist ein flexibles Gestaltungsraster, welches nicht nur das Layout einer Website auf verschiedene Displaygrößen skalieren kann, sondern auch die variable Anordnung der Elemente für unterschiedliche Geräte ermöglicht.

In der Praxis lassen sich damit sehr individuelle Websites in responsivem Design umsetzen.

Referenzen

Grundlayout für große Displays (4 Spalten)

Großes Display

Layout-Breite 1170px

Dieses exemplarische Layout zeigt eine große Abbildung und einen Textblock. Beide Elemente füllen jeweils die Hälfte der maximalen Breite und sind nebeneinander angeordnet. Darunter befindet sich eine Reihe mit 4 Elementen.


Layout leicht skaliert für mittlere Displays

Medium Display

Layout-Breite 970px

Die gleiche Seite auf einem kleineren Gerät: die große Abbildung und der Textblock füllen wieder die Hälfte der Breite – sind aber schmaler als auf dem großen Display. Die 4 Elemente der unteren Reihe sind ebenfalls skaliert.



Alternatives Layout (2 Spalten) - oder erneut skaliert (4 Spalten)

Kleines Display

Layout-Breite 750px

Die große Abbildung kann die gesamte Breite füllen, dann wird der Text darunter angeordnet. Die 4 Elemente der unteren Reihe können auf zwei Reihen verteilt werden – oder das Bild und der Text füllen wieder die Hälfte der Breite.


Layout mit 2 Spalten - bzw 1spaltig für Smartphones

Mini Display

Layout-Breite = Displaybreite

Die große Abbildung füllt nun die gesamte Breite, der Text wird darunter angeordnet. Die untere 4er Reihe wird in zwei Reihen mit zwei Spalten angeordnet. Auf einem Smartphone wird jedes Element auf die maximale Breite des Displays skaliert.