Helpers

Wenn du in der custom.scss folgende Zeile hinzufügst, kannst du bei den Inhaltselementen verschiedene Klassen nutzen um die Abstände (margin/padding) anzupassen.

@import 'spacing-helpers';
Klassen Erklärung
für alle Bildschirmgrößen
m-10, m-20 … m-100 Außenabstand (10px, 20px … 100px)
mt-10, mt-20 … mt-100 Außenabstand nach oben (10px, 20px … 100px)
mb-10, mb-20 … mb-100 Außenabstand nach unten (10px, 20px … 100px)
ml-10, ml-20 … ml-100 Außenabstand nach links (10px, 20px … 100px)
mr-10, mr-20 … mr-100 Außenabstand nach rechts (10px, 20px … 100px)
p-10, p-20 … p-100 Innenabstand (10px, 20px … 100px)
pt-10, pt-20 … pt-100 Innenabstand nach oben (10px, 20px … 100px)
pb-10, pb-20 … pb-100 Innenabstand nach unten (10px, 20px … 100px)
pl-10, pl-20 … pl-100 Innenabstand nach links (10px, 20px … 100px)
pr-10, pr-20 … pr-100 Innenabstand nach rechts (10px, 20px … 100px)
nur für Bildschirmgröße > 600px
m-m-10, m-m-20 … m-m-100 Innenabstand (10px, 20px … 100px)
mt-m-10, mt-m-20 … mt-m-100 Außenabstand nach oben (10px, 20px … 100px)
mb-m-10, mb-m-20 … mb-m-100 Außenabstand nach unten (10px, 20px … 100px)
ml-m-10, ml-m-20 … ml-m-100 Außenabstand nach links (10px, 20px … 100px)
mr-m-10, mr-m-20 … mr-m-100 Außenabstand nach rechts (10px, 20px … 100px)
p-m-10, p-m-20 … p-m-100 Innenabstand (10px, 20px … 100px)
pt-m-10, pt-m-20 … pt-m-100 Innenabstand nach oben (10px, 20px … 100px)
pb-m-10, pb-m-20 … pb-m-100 Innenabstand nach unten (10px, 20px … 100px)
pl-m-10, pl-m-20 … pl-m-100 Innenabstand nach links (10px, 20px … 100px)
pr-m-10, pr-m-20 … pr-m-100 Innenabstand nach rechts (10px, 20px … 100px)
nur für Bildschirmgröße > 992px
m-l-10, m-l-20 … m-l-100 Innenabstand (10px, 20px … 100px)
mt-l-10, mt-l-20 … mt-l-100 Außenabstand nach oben (10px, 20px … 100px)
mb-l-10, mb-l-20 … mb-l-100 Außenabstand nach unten (10px, 20px … 100px)
ml-l-10, ml-l-20 … ml-l-100 Außenabstand nach links (10px, 20px … 100px)
mr-l-10, mr-l-20 … mr-l-100 Außenabstand nach rechts (10px, 20px … 100px)
p-l-10, p-l-20 … p-l-100 Innenabstand (10px, 20px … 100px)
pt-l-10, pt-l-20 … pt-l-100 Innenabstand nach oben (10px, 20px … 100px)
pb-l-10, pb-l-20 … pb-l-100 Innenabstand nach unten (10px, 20px … 100px)
pl-l-10, pl-l-20 … pl-l-100 Innenabstand nach links (10px, 20px … 100px)
pr-l-10, pr-l-20 … pr-l-100 Innenabstand nach rechts (10px, 20px … 100px)
nur für Bildschirmgröße > 1200px
m-xl-10, m-xl-20 … m-xl-100 Innenabstand (10px, 20px … 100px)
mt-xl-10, mt-xl-20 … mt-xl-100 Außenabstand nach oben (10px, 20px … 100px)
mb-xl-10, mb-xl-20 … mb-xl-100 Außenabstand nach unten (10px, 20px … 100px)
ml-xl-10, ml-xl-20 … ml-xl-100 Außenabstand nach links (10px, 20px … 100px)
mr-xl-10, mr-xl-20 … mr-xl-100 Außenabstand nach rechts (10px, 20px … 100px)
p-xl-10, p-xl-20 … p-xl-100 Innenabstand (10px, 20px … 100px)
pt-xl-10, pt-xl-20 … pt-xl-100 Innenabstand nach oben (10px, 20px … 100px)
pb-xl-10, pb-xl-20 … pb-xl-100 Innenabstand nach unten (10px, 20px … 100px)
pl-xl-10, pl-xl-20 … pl-xl-100 Innenabstand nach links (10px, 20px … 100px)
pr-xl-10, pr-xl-20 … pr-xl-100 Innenabstand nach rechts (10px, 20px … 100px)