Standardcontainer lassen links und rechts Platz

Bootstrap-Inhalte werden in Container geglierdert.

Margin: Außenabstand
Der Margin wird in Bootstrap über die Klasse gesteuert. Je "Richtung" kann ein Wert von 0 bis 5 angegeben werden.

m-5: Abstand auf allen Seiten maximal.
mx-5: Abstand auf der x-Achse (l und r)
my-2: Abstand nach oben und unten
mt/mb/ms/me: Einzelne Abstände der Seiten

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

Fließender 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.

xxl

Das Grid-System

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

col-1

Aufgabe 1

Erstellen Sie eine Übersicht über die vorhandenen Vorder- und Hintergrundfarben indem Sie diese als Container in einem Grid anordenen.

Blau

Grau

Grün

Rot

Gelb

Türkis

Dunkles Grau

Schwarz

Weiß

Blau

Navbars

Navigationsleisten sind Bereiche mit Links, die meist oben auf der Website dargestellt werden und der Navigation zwischen den Unterseiten oder versch. Bereichen einer Website dienen.
Bootstrap-Navbars können in Abhängigkeit vom viewport zwischen horizontaöer, 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 Klassen verwendet werden, z.B. .container-fluid.