Bootstrap Rastersystem // container-fluid / row / col-sm-6 & col-sm-3

Das Bootstrap-Rastersystem basiert auf einer in bootstrap.css vordefinierten Container-Klasse. Container haben einen vordefinierten Aussenabstand (margin) von 0px und einen vordefinierten Innenabstand (padding) von 15px an den Seiten und 0px oben und unten ( der obere und untere abstand definiert sich über den Zeilenabstand der Schriftgröße). Der Container kann mit Hilfe der .css-Anweisung: container-fluid auf die gesamte Bildschirmgröße ausgedehnt werden. Die Anordnung der Inhalte erfolgt dann über die Hierarchie: container/row/col.


You are free to use this template for personal and commercial projects and to modify it. // Download template or return to main site // Back
a bootstrap template by darko floreani I visuelle kommunikation.

Eine row besitzt keinen vordefinierten Innen- oder Aussenabstand. Das Bootstrap Rastersystem basiert auf Reihen und Spalten. Jede Reihe (row) kann bis zu 12 Spalten (col-umns) aufnehmen. Der Umbruch in die nächste Reihe erfolgt daraufhin automatisch. Eine Reihe kann vorzeitig beendet werden (auch wenn die Spalten nicht vollzählig genutzt worden sind.

Eine col-Klasse hat ebenso wie eine Row einen vordefinierten Aussenabstand (margin) von 0px und einen Innenabstand (padding) von 15px. Hier sehen wir, dass die cols einer Reihe sich dem Inhalt anpassen und nicht die gleiche Höhe haben.

Der Einsatz von col-Elementen ist nicht zwingend. Inhalte können, wie dieser Text, auch direkt in einer row platziert werden.

darko floreani
visuelle kommunikation
WORK

re:
construction
area

Responsives Bild

early HTML 4.0 WORKs


Download template or return to main site // Back
a bootstrap template by darko floreani I visuelle kommunikation.

Sollte die Gestaltung auf gleich hohe cols angewiesen sein, kann eine row per css-Anweisung als equal-row angelegt werden. Wie im vorliegenden Fall werden dann alle cols innerhalb einer row auf die gleiche Höhe gezogen.
WORK

NAVIGATION


Ein Logo ist ein grafisches Zeichen (Signet), das ein bestimmtes Subjekt.

read more

NAVIGATION


Ein Logo ist ein grafisches Zeichen (Signet), das ein bestimmtes Subjekt.

read more

darko floreani
visuelle kommunikation
WORK

re:
construction
area

Responsives Bild

early HTML 4.0 WORKs


Download template or return to main site // Back
a bootstrap template by darko floreani I visuelle kommunikation.

Sollte die Gestaltung auf gleich hohe cols angewiesen sein, kann eine row per css-Anweisung als equal-row angelegt werden. Wie im vorliegenden Fall werden dann alle cols innerhalb einer row auf die gleiche Höhe gezogen.

NAVIGATION


Ein Logo ist ein grafisches Zeichen (Signet), das ein bestimmtes Subjekt.

read more

NAVIGATION


Ein Logo ist ein grafisches Zeichen (Signet), das ein bestimmtes Subjekt.

read more