Standardcontainer lassen links und rechts Platz

Bootstrap-Inhalte werden in Containern gegliedert.

Margin: Außenabstand
Der Margin wird in Bootstrap über die Klasse m 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 gesetzt, 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.

100% breit bis zum sm-Breakpoint.

100% breit bis zum md-Breakpoint.

100% breit bis zum lg-Breakpoint.

100% breit bis zum xl-Breakpoint.

100% breit bis zum xxl-Breakpoint.

Das Grid-System

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

.col-1

Aufgabe

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

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 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 Klassen verwendet werden, z.B. .container-fluid.