Section-Styles

Container-Breiten

Volle Breite mit der CSS-Klasse „container-fluid“

1920px mit der CSS-Klasse „container-1920“

1600px mit der CSS-Klasse „container-1600“

1440px mit der CSS-Klasse „container-1440“

1280px mit der CSS-Klasse „container-1280“

1170px mit der CSS-Klasse „container-1170“

920px mit der CSS-Klasse „container-920“

Grids (CSS-Klasse "grid-xxx") z.B. grid-50-50 oder grid-33-33-33

50

50

66

33

33

66

75

25

25

75

33

33

33

25

25

25

25

20

20

20

20

20

Hintergrundfarben

Die Hintergrundfarben können zum einen über den Inspektor ausgewählt werden, zum anderen über folgende CSS-Klassen:

CSS-Klasse „bg-primary“

CSS-Klasse „bg-primary-gradient“

CSS-Klasse „bg-secondary“

CSS-Klasse „bg-secondary-gradient“

CSS-Klasse „bg-gray“

CSS-Klasse „bg-lightgray“

Hintergrundbilder

CSS-Klassen „container-fluid container-background-image“ im umgebenden Section-Element. Für Die Desktop-Ansicht und die Mobile-Ansicht können zwei unterschiedliche Bilder eingefügt werden, die jeweils über die CSS-Klassen „img-desktop“ und „img-mobile“ ein- bzw- ausgeblendet werden.

Die Positionierung der Caption erfolgt über diese CSS-Klassen: „align-top-left“, „align-top-center“, „align-top-right“, „align-center-left“, „align-center-center“, „align-center-right“, „align-bottom-left“, „align-bottom-center“, „align-bottom-right“. 

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit

Parallaxe Hintergrundbilder

Um dem Hintergrund-Bild einen Parallax-Effekt hinzuzufügen, wird die CSS-Klasse „container-parallax“ beim umgebenden Section-Element ergänzt. Mit der Bildausrichtung (Mitte, Rechts) kann die Positionierung etwas beinflusst werden.

Mit der SWM auf der Überholspur

Lorem ipsum dolor sit

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit