CSS spacing classes for Shopping Experiences
In addition to the Bootstrap distance classes, ThemeWare® offers you an extended collection of distance classes based on pixel values.
Our classes are named according to the following pattern:
Example
Bootstrap 4 vs. Bootstrap 5
When updating from Bootstrap 4 to Bootstrap 5 (as of Shopware 6.5), some classes were renamed to use logical property names instead of direction names.
Starting with Shopware 6.5, you have the option in ThemeWare® to choose whether you want to use the old Bootstrap 4 or the new Bootstrap 5 notation:
Tab "More" => Block "Advanced settings" => Section "Additional CSS classes" => Field "Load CSS spacing classes (optional)"
Bootstrap 5 (default)
If you are using the old writing and don't want to change it everywhere, just load the CSS spacing classes for Bootstrap 4. New ThemeWare® installations automatically load the Bootstrap 5 spacing classes.
Below you will find the syntax for both variants:
Bootstrap 5 (Shopware 6.5)
CSS classes
Examples
Bootstrap 4 (Shopware 6.4)
CSS classes
Examples
Note: You can activate or deactivate the ThemeWare® "CSS spacing classes" as required. You can find the configuration in the Tab "Others" => Block "Advanced settings" => Section "Additional CSS classes".
Last updated