Flex Container

Flex Container

Der FlexContainer erlaubt dir deine Inhalte entweder mittig oder über die volle Seitenbreite darzustellen. Dabei kannst auch alle innere oder Außenabstände selbst definieren oder auch mehrere FlexContainer kombinieren z.B. um die Fläche mit einer Hintergrundfarbe zu versehen oder ein Parallax-Bild zu definieren.


Vordefinierte CSS-Klassen

Es gibt eine Reihe von vordefinierten CSS-Klassen z.B. für Abstände, Farben etc. Nachfolgend ein paar wichtige aufgelistet.

Abstände
  1. p-5: innerer Abstand von allen Seite mit ca. 20px
  2. px-5: innerer horizontaler Abstand mit ca. 20px
  3. py-5innerer vertikaler Abstand mit ca. 20px
  4. m-5: äußerer Abstand von allen Seite mit ca. 20px
  5. mx-5: äußerer horizontaler Abstand mit ca. 20px
  6. my-5: äußerer vertikaler Abstand mit ca. 20px
Dabei kann die Zahl zwischen 0 und 9 variieren, je nachdem wie groß der Abstand werden soll.

Farben
  1. text-primary: primäre Schriftfarbe
  2. text-secondary: sekundäre Schriftfarbe
  3. bg-primary: primäre Hintergrundfarbe
  4. bg-secondary: primäre Hintergrundfarbe

    • Related Articles

    • USP-Portlet mit Icon

      Zeige im Shop deine Alleinstellungsmerkmale (USP) mit Link, Icon, Überschrift und Text. Dabei kannst du die Position aller Elemente einstellen.
    • Navigation

      Das Navigation-Portlet erstellt eine interne Navigation der Lingruppe oder agiert als Inhaltsverzeichnis für die jew. Seite. Styles Durch Einsatz der CSS-Klassen kannst du deine Navigation nach belieben stylen. Folgende Styles kannst du verwenden: ...
    • Instagram Feed

      Das Instagram-Portlet stellt eine Liste deiner Instagram-Einträge in Form von Slider oder Liste bereit. So kannst du die Verbindung deaktivieren Um deine Instagram-Daten zu löschen und die Verbindung zu deaktivieren,  Gehe auf dein Facebook-Profil ...
    • SEO-Überschriften

      Mit diesem Portlet ist man in der Lage alle Formatierungen der Überschriften selbst zu steuern. Dabei kann man entscheiden, ob es eine H-Überschrift sein soll oder DIV, STRONG oder SPAN. Ferner kannst du entscheiden, ob die Überschrift verlinkt oder ...
    • Timeline

      Mit dem Portlet Timeline erstellt man einen Zeitstrahl der Ereignissen. Dabei kann man alle Elemente flexibel anlegen.