Bootstrap 5 Container

 

Bei dem Designen von Websites spielen Container eine prominente Rolle. Es wird nicht empfohlen, sie zu verschachteln. Aber es können durchaus mehrere auf einer Website benutzt werden.

Container sind aktuell ein Standardwerkzeug in der Html Programmierung, aber kein offizielles Html Element. Dementsprechend werden sie auch nicht als <Tag>...</Tag> benutzt.
Vielmehr wird Container als Css3 Klasse implementiert. Bootstrap 5 hat seine Umsetzung, andere Systeme eventuell eine abweichende Implementierung.

Wichtig ist: Wer von dem Layoutsystem von Bootstrap 5 profitieren will, insbesondere das Bootstrap Grid System, kann die Benutzung von Container nicht vermeiden.  Betrachten wir einmal die drei Hauptvarianten. Beispiel-Code:

Wir sehen im Code oben schon den wichtigsten Punkt. Die container Klasse von Bootstrap 5 wird einem <-div>...</div> Tag zugewiesen. 

Dabei stellt Bootstrap drei Hauptvarianten zur Verfügung:

container: der Standard

container-fluid: Breite ist an allen Breakpoints 100%

container-{breakpoint}: z.b.: container-sm. Diese Variante legt den Breakpoint explizit fest. Im Beispiel Code oben die md, Medium Variante.

Breakpoints ?

Bootstrap 5 besitzt ein Breakpoint System mit Werten, die nach dem Prinzip gleich oder grösser funktionieren. 

container-md zum Beispiel hast seinen Breakpoint bei 768 Pixel. Aber wie ist das zu verstehen ?

Solange das Browserfenster die Breite von 768 nicht erreicht hat, wird der Container 100% der verfügbaren Breite nutzen. Sobald der Breakpoint erreicht ist, wird die Breite auf 720 Pixel gesetzt.  Hier die Tabelle dazu:

Quelle: Bootstrap 5

Was ist der Hintergrund für diese Breakpoints ?

Ziel moderner Webpages ist es auf verschiedenen Bildschirmgrössen ein möglichst einheitliches Layout zu erreichen. Waren früher Desktop Bildschirme die beherrschende Geräteklasse, kommen aktuell Mobile Geräte dazu. 

Mobile Geräte wie Phone's, Tabletts etc. verfügen aber über unterschiedliche Bildschirmauflösungen. Was bei dem Element Container noch ein relativ einfaches Thema ist, gewinnt bei Reihen und Spalten an Bedeutung.

Wenn Sie die Bedeutung von Breakpoints an einem Live-Beispiel testen möchten, empfehle ich das Demo hier. Scrollen Sie ganz nach unten und verkleinern / vergrößern Sie das Browserfenster. Sie sehen wie sich die verschiedenen Container anhand ihrer Spezifikation verhalten. Bauen wir den Beispielcode ein wenig aus, um den Effekt klarer zu sehen. Das heisst, wir brauchen mehr Inhalt:

In diesem Code verwenden wir einen Standard container . Innerhalb dieses div Tags erstellen wir eine Reihe und in dieser zwei col div's. Konzentrieren wir uns auf die col :

col-md-3 bg-light : Sie erinnern sich: Bootstrap 5 hat als Grundlage ein 12 Kolumnen Layout. Mit der Zuweisung von col-md-3 an das <div>...</div> Tag legen wir fest, das diese Kolumne davon 3 beansprucht. bg-light wiederum legt die Hintergrundfarbe fest. Wenn Sie mehr zu den Farben in Bootstrap 5 wissen wollen, hier der Link !

col-md-9 bg-dark text-light : Mit dieser Zuweisung legen Sie fest, das diese Kolumne 9 Kolumnen im Bootstrap 5 System beansprucht. bg-dark legt die Hintergrundfarbe fest und text-light, die Textfarbe.

Mit einmal 3 und 9 Kolumnen kommen wir wieder auf das total von 12.

Wenn Sie denn Code in Visual Studio Code mit LiveServer ausführen lassen, sollten Sie dieses Bild sehen :

Falls Sie Chrome verwenden, jetzt einen Rechtsclick auf diese Website und untersuchen aus der Auswahl wählen. Dann sollten Sie eine neue Ansicht der Website sehen:

Oben, auf dem Bild ist iPad Pro eingestellt, können Sie verschiedene Geräte auswählen. So können Sie prüfen, wie Ihr Layout auf verschiedenen Geräten dargestellt wird.

Das war es für diesen Post bis bald !