Containerelemente lassen links und rechts Platz

Bootstrap-Inhalte werde in Containern gegliedert

margin: Außenabstand
Der margin wird in bootstrap über die Klasse M gesteuert. Die "Richtung" kann mit Wert 0 bis 5 angegeben werden.

m-5 Abstand auf allen Seiten maximal
mx-5 Abstand auf der x-Achse (l und r
my-5 Abstand nach oben und unten
mt, mb, ms, mb Einzelne Abstände einstellen

Die Paddings werden genauso genutzt, nur mit einem p als Präfix

Fließende Container

fließende container nehmen die volle Breite des viewports ein

Responsive Container

Responsive Container nehmen 100% der Breite ein, bis ein bestimmter breakpoint erreicht ist. Danach werden sie in der Breite reduziert dargestellt.

100% breit bis zum Breakpoint

Das Grid-System

Container lassen sich in einem 12. spaltigen Grid System layouten/anordnen
Beispiel:

text

mehr

text

mehr

text

Aufgabe

erstellen Sie eine Übersicht über die vorhandenen Vor- und Hintergrundfarben Indem Sie diese als Container in einem Grid anordnen

light

info

dark

danger

warning

secondary

primary

light subtle

info subtle

dark subtle

Navbar

Navigationsleisten sind Bereiche mit Links, die meist oben auf der Website dargestellt werden und der Navigation zwischen den Unterseiten oder versch. Kennzeichen einer Website dienen.
Bootstrap-Navbars können in Abhängigkeit vom Viewport zwischen horizontaler, vertikaler und Hamburger-Darstellung wechseln.
Eine Navbar wird immer in ein Container-Div gepackt. Diesem wird die Klasse.navbar zugeordnet.
Zusätzlich sollte eine responsive Klasse verwendet werden, z.B. container-fluid