Bootstrap 4 — Das wird sich ändern

Neuerungen und Anpassungen

1 Allgemeines — Fakten, Fakten, Fakten

Bootstrap 4 setzt nun auf Sass, anstatt wie in der vorherigen Version auf Less.

Eine große Veränderung mit Bootstrap 4 ist die Umstellung auf das Flexbox-Modell als Standard-Einstellung, viele Elemente und Komponenten wurden auf dieses Modell umgestellt. Im Bezug auf das Responsive Webdesign bietet das Flexbox-Modell viele Möglichkeiten, Inhalte für jedes Endgerät optimiert darzustellen.

Bootstrap 4 verwendet nun rem anstatt px als primäre Größeneinheit. Jedoch werden die Media Queries und das Grid-System weiterhin mit der alten Größeneinheit definiert, außerdem wurde die Standardschriftgröße von 0.9rem(14px) auf 1rem(16px) geändert. Mit rem und em, als relative Größe, ist es leichter Anpassungen vorzunehmen. Größen können somit für jede Media Query individuell bestimmt werden und erleichtern somit die Umsetzung des Responsive Webdesigns.

2 Browser-Support — Sorry Herr IE9, aber Sie sind hier nicht mehr erwünscht

Das Apple Betriebssystem iOS 6 und die Browser Internet Explorer 8 und 9 werden nicht weiter unterstützt. Bootstrap 4 unterstützt nur noch IE10+ und iOS 7+. Es wird nun auch der Android v5.0+ und die neuste Version von WebView offiziell unterstützt. Früherer Android-Versionen werden nur inoffiziell unterstützt.

2.1 Desktop Browser

2.2 Mobile Browser

3 Elemente — Vieles ist gewöhnungsbedürftig

3.1 Tables — Speziellere Klassen für Tabellen
Die neue Klasse .table-inverse beschreibt eine Tabelle mit dunklem Hintergrund
und heller Schrift. Um die Abstände zwischen den Inhalten zu halbieren kann die Klasse .table-sm hinzugefügt werden (früher .table-condensed). Alle Kontext-Klassen, wie z.B. die Klassen .active oder .success müssen jetzt mit .table- als Prefix versehen werden, d.h. aus der Klasse .active muss .table-active werden.
Der Kindselektor > wurde weitestgehend entfernt, sodass nun auch verschachtelte
Tabellen die Eigenschaften Ihrer Eltern-Elemente erben.
Die Klasse .table-responsive wird jetzt direkt auf die Tabelle gelegt und nicht auf ein neues div-Element um die Tabelle.

Des Weiteren gibt es für den Tabellenkopf die neue Klasse .thead-inverse mit dem gleichen Erscheinungsbild wie die invertierte Tabelle. Die Klasse .thead-default stellt ein Tabellenkopf mit einem leicht dunkleren Hintergrund dar.

3.2 Typography — Mehr Möglichkeiten, bessere Trennung zwischen Markup und Design
Die bekannten kleineren und farblich schwächeren Textabschnitte einer Überschrift benötigen wie gewohnt den <small>-Tag, aber nun auch die Helfer-Klasse (utility class) .text-muted.

Des Weiteren gibt es von nun an weitere Klassen (display-1,...,display-4) für Überschriften angeboten, welche durch eine größere und dünnere Darstellung herausstechen sollen.

Auch Textfelder bekommen einen responsiven Anteil. Aus .text-{left,center,right} kann nun .text-{sm,md,lg,xl}-{left,center,right} gemacht werden. Die Anpassung gilt für die angegebene Größe und alle darüber liegenden Größen, sofern keine weitere Klasse eingetragen wird.

Block-Zitate (blockquotes) benötigen in der neuen Version immer die Klasse .blockquote. Das Block-Zitat Footer muss mit der Klasse .blockquote-footer ausgewiesen werden.

Inline-Listen haben wie gewohnt die Klasse .list-inline, jedoch müssen die Einträge mit der Klasse .list-inline-item erweitert werden.

3.3 Images — Es wird ein Leben nach img-responsive geben
Die bekannte Klasse .img-responsive wird durch .img-fluid ersetzt. Die Bilder-Klassen
.img-rounded und .img-circle, wurden durch die Klassen .rounded und .rounded-circle
ersetzt.

Für SVG-Bilder im Internet Explorer 8 und 9 kann es zur unproportionalen Skalierung kommen, in diesem Fall müssen Sie width: 100% \9; hinzufügen.

Bilder mit der Eigenschaft display: block; können über die Helfer-Klasse .mx-auto zentriert werden. Bilder ohne diese Eigenschaft können durch die float und text alignment Helfer-Klassen (Utility Classes) positioniert werden.

3.4 Figures — Endlich auch in Bootstrap
Um Bilder mit Bildunterschriften darzustellen gibt es den bekannten <figure>-Tag, Bootstrap liefert in der Version 4 nun auch spezielle Klassen für <figure class="figure">, <img class="figure-img"> und <figcaption class="figure-caption">. Mit weiteren Helfer-Klassen können das Erscheinungsbild und die Ausrichtung definiert werden.

4 Komponenten — Weniger ist mehr

Im Bereich der Komponenten hat sich viel geändert, mehrere Komponenten sind entfallen bzw. wurde zu einer neuen Komponente zusammengefügt (z.B. Cards). Des Weiteren wurden einige Komponenten erweitert und verbessert.

Das Affix-Plugin wurde komplett entfernt, das heißt es muss jetzt mit position: sticky oder anderen externen Bibliotheken gearbeitet werden.

Des Weiteren werden die Glyphicons als freies Icon-Paket in Bootstrap 4 nicht mehr vorhanden sein. Eine gute Alternative bietet FontAwesome, es bietet eine viel größere Icon-Base und viele ähnliche Icons.


4.1 Buttons — Endlich Outline Buttons
Für jede Kontext-Klasse werden jetzt Outline-Button-Styles zur Verfügung gestellt. Für diese wird anstatt der Klasse .btn-primary wird die Klasse .btn-outline-primary verwendet. Bei den Outline-Buttons ist die Schriftfarbe (color) und der Rand (border) farblich angepasst und als Hover-Effekt werden die Buttons ausgefüllt und die Schriftfarbe weiß, wie bei den normalen Buttons im Normalzustand.

Die Klasse button-xs ist standardmäßig nicht mehr vertreten und die Klasse .btn-default wurde in .btn-secondary umbenannt.

Das jQuery Plugin button.js wurde entfernt (die Methoden $().button('reset') und $().button('string') sind nicht mehr verfügbar), aber Checkboxen, Radio-Buttons und die Toggle-Funktion wurden behalten.

4.2 Cards — Wells und Panels werden zu Karten
Cards sind die neuen Komponenten, die die bisherigen "Thumbnails", "Panels" und "Wells" ersetzen. Die 3 Komponenten wurden entfernt bzw. zu der Komponente Card zusammengefasst. Mit Modifizierer-Klassen können Funktionalitäten der alten Komponenten wieder genutzt werden.

Ein äußeres div-Element mit der Klasse .card bildet den Container der Komponente. Diese Komponente kann auch durch Helfer- und Kontext-Klassen erweitert werden, wie zum Beispiel mit .card-inverse, .card-primary, .card-outline-danger, .text-center und .mb-2.
Vordefinierte Inhalte:

div.card-header → Kopfzeile
div.card-footer → Fußzeile
img.card-img-top/bottom → Bild oben/unten
img.card-img + div.card-img-overlay → Hintergrundbild
(+ .card-inverse auf die Karte, für helle Schrift bei dunklem Bild)
div.card-block → Inhaltscontainer
h*.card-title/subtitle → h*-Elemente für Titel und Untertitel
p.card-text → einfache Textelemente
a.card-link → Textlinks
blockquote.card-blockquote → Zitat
ul.list-group.list-group-flush → Liste
(.list-group-flush entfernt doppelte Ränder)
li.list-group-item → Listen Eintrag

Karten werden mit dem Container div.card-group mit dem Flexbox-Modell zu einer einheitlichen Gruppe aus gleich großen und breiten Karten zusammengefasst.
Der Container div.card-deck führt zum gleichen Ergebnis, jedoch werden hier die
Abstände zwischen den Karten nicht entfernt. Ein Masonry-Layout erhält man, wenn man die Karten mit einem Container div.card-columns umschließt. Über die Eigenschaft column-count kann die Anzahl der Spalten für verschiedene Media Queries bestimmt werden. Bei dieser Variante erhalten die Karten nicht mehr die Eigenschaften der Flexbox, um besser geordnet zu werden. Die Anordnung erfolgt von oben nach unten und links nach rechts.

4.3 Figures — Mehr Kontrolle, mehr Klassen
Nahezu alle > Selektoren wurden abgelöst durch unverschachtelte Klassen der Elemente. Z.B .nav navbar > li > a wird zu einzeln ansprechbaren .nav, .nav-item und .nav-link.
Auch die Navbar selbst bekommt nun endlich eine Klasse für die Bildschirmumbruchstelle: .navbar-toggleable-{breakpoint}. Nun kann bestimmt werden, wann der Umbruch zum Burger menü passieren soll.
.navbar-default wird nun zu .navbar-light, .navbar-inverse behält hingegen seinen Namen. Neu ist allerdings, dass diese Klassen keinen Einfluss mehr auf die Hintergrundfarbe haben, sondern nur noch auf die Schriftfarbe. Auch margin-bottom und der border-radius wurden entfernt.
Der Hintergrund demnach bestimmt werden. Hierfür können die Klassen für Background-color genommen werden: .bg-{primary,inverse}.
.navbar-toggle wird zu .navbar-toggler, hat andere Styles und setzt nun nicht mehr auf die drei <span>s sondern ein .navbar-toggler-icon.
Navigations Formulare (.navbar-form) wurden komplett abgelöst durch .form-inline, welches nun überall genutzt werden kann.

5 Layout

5.1 Grid — Eine weitere Unterscheidung für Smartphones
Eine neue Stufe wurde dem Grid hinzugefügt. Sie ersetzt das xs und gilt für Bildschirme die kleiner als 576px breit sind. Daraus folgt, dass alle anderen Stufen um eine Bezeichnung nach oben geschoben werden (.col-lg-{size} ist nun .col-xl-{size}).

Für die kleinste Stufe (xs) werden die Klassen .col-verwendet, nicht wie vermutet .col-xs-. Eine weitere Neuerung besteht darin, dass an gleich breite Spalten einer Reihe keine Zahlen an den Klassen angehängt werden müssen. Die Breite ist hierbei abhängig von der Anzahl der Spalten und wird durch das Flexbox-Modell definiert. Wird eine Spalte mit einer festen Größe ausgewiesen (.col-{breakpoint}-{size}), wird der restliche Platz der Reihe an alle anderen Spalten gleich aufgeteilt.

Dank des Flexbox-Modells können die Reihen über .align-{start,center,end} und die Spalten über .align-self-{start,center,end} vertikal im Bezug auf das Eltern-Element ausgerichtet werden. Für die horizontale Ausrichtung der Inhalte der Reihen werden die Klassen .justify-content-{start,center,end,around,between} verwendet. Die Helfer-Klasse .no-gutters (auf die Reihe anzuwenden) entfernt den Außenabstand der Reihe (margin-right/left) und den Innenabstand der Spalten (padding-right/left).

Des Weiteren wurden die Grid-Modifizierer (modifier) push,pull und offset von der ehemaligen Schreibweise .col-{breakpoint}-{modifier}-{size} (.col-sm-push-3) zu .{modifier}-{breakpoint}-{size} (.push-sm-3) gekürzt.

Die Klassen .col-{breakpoint}-auto bewirken eine an den Inhalt angepasste Breite der Spalten. So können zum Beispiel einzeilige, horizontale Kontaktformulare dadurch möglichst flexibel und ausgewogen dargestellt werden. Um eine neue Reihe zu beginnen kann ein div-Element mit der Helfer-Klasse .w-100 eingeschoben werden.

Die mixins make-col und make-col-span wurden zu make-col zusammengefasst, so wird sichergestellt, dass vordefinierte Klassen und mixins die gleichen Eigenschaften aufweisen.

Die Klassen .pull-left und .pull-right wurden umbenannt und werden fortan mit .float-{sm,md,lg,xl}-{left,right,none} aufgerufen.

5.2 Media Object — Hier muss angepasst werden
Die Klasse .media-object entfällt, das heißt Bilder(<img>) oder Links (<a>) benötigen nun eine andere Eigenschaft (einige Browser behandeln inline-Elemente nicht nach dem Flexbox-Modell (siehe Flexbugs). Deshalb wird empfohlen die Helfer-Klasse .d-flex auf das Element anzuwenden. Mit weiteren Helfer-Klassen (Utility Classes) können Abstände und Ausrichtung bestimmt werden. Notwendig sind Abstände aufgrund der fehlenden .media-right und .media-left Klassen, welche in Bootstrap 3 mit Abstandshaltern zwischen den Elementen dienten.
Die Klasse .media-heading entfällt ebenfalls, eine mögliche Klasse mit gleichem Effekt (Abstand nach oben auf 0 setzen) wäre .mt-0. Mit .mb-{size} können Sie einen individuellen Abstand nach unten bestimmen.
Des Weiteren wird die Klasse .media-list durch die Helfer-Klasse .list-unstyled ersetzt.

5.3 Responsive Utilities — Anders aber praktischer
Media Queries werden durch die neuen Deklarationen deutlich kürzer und einfacher. Möglich ist nun @include media-breakpoint-up/down/only/between, z.B. für alle Bildschirme ab 576px wird @include media-breakpoint-up(sm){...} verwendet. Die vordefinierten Grid Umbruchstellen und die Containerbreiten werden jetzt mit $grid-breakpoints und $container-max-widths bestimmt, das heißt es gibt keine Vielzahl an Variablen mehr und die @screen-* Variablen entfallen vollkommen.

Die Klassen .hidden und .show wurden entfernt, aufgrund von Konflikten mit den jQuery-Methoden $(...).hide() und $(...).show(). Erreicht können diese Effekte nun über Inline-Style-Eigenschaften (style="display: none;" oder style="display: block;" ) oder durch Einfügen/Entfernen (toggle) der Klasse .invisible. Die Klassen .visible-{breakpoint}-{style}, .visible-{breakpoint} und .hidden-{breakpoint} werden jetzt über .hidden-{breakpoint}-{up,down} realisiert. Es wird nicht mehr angegeben auf welcher Größe etwas dargestellt wird, sondern auf welchen Größen nicht.
.visible-* → .hidden-sm-down.hidden-xl-up

6 Helfer-Klassen (Utility Classes)

6.1 Border — Endlich die volle Kontrolle über den Rahmen
Den Rahmen eines Elementes kann ganz einfach bestimmt werden. Durch die Klasse .border-0 wird der rand komplett entfernt, bzw. durch .border-{top,right,bottom,left}-0 wird der Rand an der angegebenen Seite entfernt. Auch für den Border-Radius gibt es neue Klassen: .rounded gibt dem Element leicht abgerundete Ecken. Durch .rounded-{top,right,bottom,left} kann die Seite bestimmt werden, an der die Rundungen auftreten. Bei rounded-top beispielsweise, würden die obere linke und obere rechte Ecke abgerundet werden. Mit .rounded-circle Wird das Element kreisförmig abgerundet. Soll keine Rundung vorhanden sein, so kann dies mit .rounded-0 bestimmt werden.

6.2 Flexbox — Wir waren skeptisch, wurden aber überzeugt
Die Darstellung als Flexbox wird in den meisten Elementen bereits über die elementspezifischen Klassen bestimmt. Für eigene Flexbox-Container gibt es weitere Helferklassen. Um die Eigenschaften einer Flexbox aufzurufen, verwenden Sie die Klassen .d-flex oder .d-inline-flex, für verschiedene Breakpoints gibt es .d-{breakpoint}-....
Die Klassen .flex-row und .flex-row-reverse helfen bei einer horizontalen Ausrichtung der Flexbox-Elemente, hierbei werden die Elemente in normaler Reihenfolge oder umgekehrter Reihenfolge dargestellt.
Für die vertikale Ausrichtung gibt es .flex-column und .flex-column-reverse. Wie schon bei den ersten Helfer-Klassen können diese Klassen auch für jeden Breakpoint definiert werden (.flex-{breakpoint}-...).
Umbrüche werden mit .flex-wrap oder .flex-nowrap definiert.
Sortierungen der Elemente sind durch die Klassen .flex-first und .flex-last möglich.

6.3 Darstellungseigenschaften
Die CSS-Befehle für display: {block,inline-block,inline} wurden auf Klassen übertragen .d-{block,inline-block,inline}.

6.4 Responsive Einbettung
Durch die neuen Klasse .embed-responsive können <iframe>, <embed>, <video> und <object> responsive eingebettet werden. Zudem muss die Klasse .embed-responsive-{21by9,16by9,4by3,1by1} für die unterschiedlichen Seitenverhältnisse eingefügt werden. Die Klassen gehören zu einem <div>, welches um das Element gelegt wird. Das Element selbst bekommt die Klasse .embed-item.

6.5 Screenreader — Barrierefreiheit wird noch besser utnerstützt
Zu der bereits bekannten klasse .sr-only bekommt eine zusätzliche Klasse .sr-only-focusable, die das Element durch focus wieder sichtbar macht. Zum Beispiel durch reine Tastatur Nutzer. Dies kann auch durch die mixins @include sr-only und @include sr-only-focusable direkt im Sass genutzt werden.

6.6 Größenbestimmung — Keine JavaScript-Lösung mehr erforderlich
Mit den Classen .w-{25,50,75,100}wird die Breite, in Prozent, des Elements (relativ zum höher liegenden Element) bestimmt. Durch .mw-100 kann die maximale Breite auf 100% gesetzt werden.
Ebenso kann durch .h-{25,50,75,100} und .mh-100 wird äquivalent die Höhe angepasst.

6.7 Abstände (Spacing) — Das hatte uns immer gefehlt
Auch Margin und Padding werden nun durch Klassen darstellbar.
Sie werden mit .{Eigenschaft}{Ausrichtung}-{Umbruch}-{Größe} angegeben.
Die angegebenen Breakpoints geben immer die min-width an. Bei xs wird der Umbruch weggelassen: .{Eigenschaft}{Ausrichtung}-{Größe}.
Eigenschaft beschreibt hierbei Margin und Padding die jeweils nur mit dem Anfangsbuchstaben beschrieben werden.
Ausrichtung wird mit t für top, b für bottom, l für left, r für right, x für links und rechts, y für oben und unten oder blank für alle vier Seiten angegeben.
Die Größe kann eine beliebige Zahl sein. Diese wird mit der variable $spacers multipliziert.
Das heißt:
.{Eigenschaft}{Ausrichtung}-{Umbruch}-{Größe}
.{m,p}{t,b,l,r}-{,{sm,md,lg,xl}}-{1,2,3...}
Horizontale Zentrierung kann durch die Klasse .mx-auto bestimmt werden.