Standartcontainer lassen links und rechts Platz

Bootstrapinhalte 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 (links und rechts)
my-2: Abstand auf der y-Achse (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 sie 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 (1/12)

.col-6 (6/12)

.col (passt sich individuell an(hier: 5/12))

.col-2 (2/12)

.col-4 (4/12)

.col (passt sich individuell an(hier: 6/12))

.col-3 (3/12)

.col-5 (5/12)

.col (passt sich individuell an(hier: 4/12))

Aufgabe

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

Hintergrund

Info/Hell-blau

Primary/Blau

Success/Grün

Warning/Gelb

Danger/Rot

Light/Weiß

Secondary/Grau

Dark/Schwarz

Vordergrund