Bootstrap 4 Schnellstart – Grid Responsiveness
Responsiveness
Die Zeit der 15 Zoll Röhrenmonitore ist ja lange vorbei und wir leben in einer Zeit, in welcher wir auf Bildschirme der verschiedensten Größen starren.
Ob Smartphone oder Fernseher, jedes Gerät hat eigene Abmessungen und eine eigene Auflösung.
Das heißt deine Webseite oder Webanwendung sollte auf möglichst vielen Geräten anständig aussehen und benutzbar sein.
Mit Bootstrap ist das ein Kinderspiel!
Mit der col-Klasse ist das meiste bereits für die kleinsten Bildschirme getan. Möchtest du eine andere Darstellung für größere Bildschirme zeigen, dann kannst du folgende col-Klassen nutzen.
| Größe | Mini | Klein | Normal | Groß | Riesig |
| Bezeichnung | col | col-sm | col-md | col-lg | col-xl |
| Bildschirmgröße | <576px | >576px | >768px | >992px | >1200px |
| Max. Containergröße | Automatisch | 540px | 720px | 960px | 1140px |
Du kannst an einem Element Layouts für verschiedene Bildschirmgrößen definieren und das Ganze mit den Spaltengrößen kombinieren.
Du kannst die Spaltengröße an die anderen col-Klassen dranhängen z.B. col-md-6
Wie sieht sowas im Einsatz aus? Im Beispiel kombinieren wir die col-sm Klasse mit der col-md Klasse.
<div class="row">
<div class="col-sm-3 col-md-2">
</div>
<div class="col-sm-6 col-md-8">
</div>
<div class="col-sm-3 col-md-2">
</div>
</div>
Das Ganze kannst du dir hier in Aktion anschauen: