Bootstrap HowTo

Hier sind die wichtigsten Bootstrap Elemente wenn möglich mit Beispielen erklärt, welche man beim Entwickeln von Webseiten mit Bootstrap ständig braucht.

Geschrieben für Bootstrap Version 4.3

Ich verweise ausdrücklich auf die Offizielle Bootstrap Dokumentation, welche alle Komponenten und noch vieles weitere mit Beispielen und auch Code dazu beschreibt.

Inhaltsverzeichnis

INFO: Ich gehe in diesem How To davon aus, dass du Bootstrap bereits in deine Webseite eingebunden hast. Falls dies nicht der Fall ist, klicke hier.

Container

Jeder Inhalt einer Bootstrap Seite sollte in einem Container verschachtelt sein, bzw. die ganze Seite sollte mindestens einen Container enthalten. Z.B. ist der gerade für dich sichtbare Inhalt dieser Seite auch in einem Container.

Container sind die Grundlage des Bootstrap Grid Systems, was später für die Anordnung und Größenänderung von z.B. div’s oder span’s benutzt wird.

Um Elemente wie oben genannt in einen Container zu schließen, kannst du am Beispiel Angular, einfach dein router-outlet in einen Container packen, um jeden Inhalt deiner Seite dann innerhalb eines Containers zu haben:

Den Container gibt es natürlich auch in allen Standard Bootstrap Breiten (sm, md, lg, xl und fluid), wobei keine angegeben werden muss und dieser dann mit den Grenzen des container-sm gleichgesetzt wird.


Grid System

Das Bootstrap Grid System ist ein ziemlich mächtiges Layoutsystem um deine Seite an alle Geräteformate schnell und leicht anzupassen.
Grundsätzlich gehören bei Bootstrap die 12 Breiteneinheiten dazu, welche man sehr Häufig verwendet.

Möchtest du z.B. am PC mit einem großen Monitor 2 Elemente mit jeweils halber Seitenbreite nebeneinander Anzeigen, funktioniert das dort gut. An einem Handy wiederum nicht, da die Displays dort viel zu klein sind.
Mit Bootstrap kann man diese Elemente ganz einfach am PC nebeneinander und am Handy untereinander Anzeigen lassen:

Dazu verwendet man einfach zwei div’s mit entsprechenden Bootstrap Klassen und schon funktioniert es wie gewünscht:

Im Codebeispiel habe ich zuerst eine row erstellt, damit Bootstrap weiß, dass die folgenden Elemente in eine Zeile bzw. einen Block gehören (näheres zur row weiter unten).
Danach habe ich einen div mit den Klassen col-12 und col-md-6 erstellt. Diese bewirken, dass auf einem sehr kleinem Gerät der div die vollen 12 Einheiten bekommt und somit kein Platz mehr für den zweiten div in der gleichen Zeile ist. Auf einem größeren Gerät bekommt der div hingegen nur 6 Einheiten zugewiesen, wehalb der zweite div auch noch in die gleiche Zeile passt.


Größenangaben

Wie oben im Grid System erleutert besteht das Bootstrap Grid System aus insgesamt 12 Breiteneinheiten. Diese kannst du an verschiedene Elemente verteilen um so z.B. ein Mehrspaltiges Seitenlayout zu erstellen.

Bei Bootstrap 4 fängt man immer zuerst mit der kleinsten Größe an. Dabei gibt es folgende Größen:

GrößenangabeMinimale Gerätegröße zum Zutreffen der Größe (Breite in Pixel)
Ohne (z.B. col-12)Handy bzw. alles kleiner als 576px (<576px)
sm (z.B. col-sm-12)Tablet im Porträtmodus (>576px)
md (z.B. col-md-12)Tablet im Landschaftsmodus oder kleiner Desktop (>768px)
lg (z.B. col-lg-12)Desktop mit kleiner HD Auflösung (>992px)
xl (z.B. col-xl-12)Desktop mit mind. FullHD Auflösung (>1200px)

Möchte ich jetzt meine Seite für Handys und mindestens kleine Desktops unterschiedlich anpassen würde ich wie oben im Codebeispiel den div’s die Klassen col-12 für Vollständige Breite bei Handys (bzw. bei jeder Displaygröße) und Tablets im Porträtmodus und col-md-6 für halbe Breite bei kleinen Desktops und größer. Dadurch, dass ich die Größe sm nicht explizit angebe, benutzt Bootstrap dafür die nächst kleinere angegebene, was in meinem fall die für Handys ist.


Zeilen (rows)

In Bootstrap kannst du mit der Klasse row eine Zeile definieren. Möchtest du z.B. zwei Elemente nebeneinander mit wenig Abstand darstellen musst du dieses mit einer row erledigen, da Bootstrap ansonsten zwischen 2 Elementen (div’s) mehr Platz anzeigt, und so z.B. keine zwei Spalten mit 6 Breiteneinheiten nebeneinander passen:

Im folgenden Beispiel habe ich das Codebeispiel genommen und mit einer border zu besseren Verdeutlichung versehen.
Um das Beispiel zu laden, klicke bitte den Button „Run Pen“ an:


Hast du weitere Wünsche oder Vorschläge für dieses HowTo? Schreib mir per Mail an support@unbekannt3.eu oder eröffne ein Support Ticket unter support.unbekannt3.eu 🙂