Webentwicklung: Bootstrap 4.4 bringt responsive Container

Das aktuelle Release des CSS-Frameworks kann die Größe von Containern ebenso der Bildschirmgröße anpassen wie die Zahl der Spalten.

In Pocket speichern vorlesen Druckansicht 2 Kommentare lesen
Webentwicklung: Bootstrap 4.4 bringt responsive Container
Lesezeit: 2 Min.
Von
  • Rainald Menge-Sonnentag

Das Bootstrap-Team hat gut ein halbes Jahr nach Version 4.3 nun Bootstrap 4.4 herausgegeben. Die wichtigsten Neuerungen betreffen das responsive Design: Das CSS-Framework passt die Breite von Containern unterschiedlichen Bildschirmgrößen an. Die Zahl der Spalten lässt sich ebenfalls abhängig steuern.

Die Änderungen halten sich darüber hinaus in Grenzen, zumal die Entwickler bereits im Zuge der Veröffentlichung von Version 4.3 die Vorbereitungen auf die nächste Hauptversion angekündigt hatten. Fast alle Features aus Version 4 sollen auch in die kommende Version 5 einfließen.

Die beiden interessantesten Neuerungen betreffen das responsive Design. Bootstrap 4.4 führt responsive Container ein, die ihre Größe bis zu einem Breakpoint der jeweils maximalen Breite anpassen. Breakpoints sind in Bootstrap keine Haltepunkte zum Debuggen, sondern beschreiben den Übergang zwischen Größenangaben für die verfügbare Anzeigefläche. Damit lassen sich vor allem unterschiedliche Bildschirmgrößen für Gerätetypen wie Smartphone, Tablet und Desktop kategorisieren.

So beschreibt

<div class="container-sm">Inhalt</div>

einen Container der die Breite passend zum sm-Breakpoint für schmale Geräte nutzt und

<div class="container-md">Inhalt</div> 

gilt für die als md-Breakpoint festgelegten Größe für mittelgroße Geräte.

Die Zahl der Spalten lässt sich ebenfalls über die neuen responsiven .row-cols-Klassen für unterschiedliche Breakpoints festlegen.

Darüber hinaus bringt Bootstrap 4.4 ein paar neue Funktionen mit: escape-svg() soll das Einbinden von Hintergrundgrafiken im SVG-Format vereinfachen. Dei beiden Funktionen add() und subtract() haben die Entwickler eingeführt, um Fehler beziehungsweise Nullwerte zu vermeiden, die beim Rechnen mit calc aus CSS entstehen.

Weitere Neuerungen wie das make-col-auto()-Mixin lassen sich dem Bootstrap-Blog entnehmen. Derweil laufen die Arbeiten an Version 5 und das zugehörige Pflichtentheft findet sich auf GitHub. Ein Release-Datum steht derzeit jedoch noch nicht fest. (rme)