Optimizing Shopping Experiences with Bootstrap CSS classes
Attention: Shopware from version 6.5 uses Bootstrap 5, this article is then outdated and will be revised soon.
The Shopware 6 Storefront is based on the Bootstrap framework. Due to our HC Architecture®, ThemeWare® is also completely compatible with Bootstrap.
Note: This article is intended for professionals and experts. If you are not absolutely sure, we will be happy to support you: ThemeWare® Services at a glance
Bootstrap CSS classes
In this tutorial you will find an overview of the most important Bootstrap CSS classes, you can use in your Shopping Experiences.
You can easily add the following CSS Classes via the section or block settings.
Of course, you can also use the Shopware 6 HTML editor (e.g. in a CMS element) to integrate your own HTML code. Please note that the editor will automatically clean up your code – for security reasons – and not all HTML tags and CSS classes will work.
Note: dditionally we recommend our Bootstrap examples in our demo shops.
Text
For aligning texts Bootstrap provides CSS Classes you can use.
Text color
For coloring texts, Bootstrap already provides some classes for different colors. The following you will find examples of the available color variants.
Background Colour
Border
Bootstrap Classes can also be used to define the borders of Shopping Experience elements. The class "border-0" removes borders from elements, for example.
Spacings
With the following Bootstrap Classes, spacings can be defined for Shopping Experience elements. There are also spacing classes for different viewports.
The classes are named according to the format {property}{page}-{size}
for xs and {property}{page}-{breakpoint}-{size}
for sm, md, lg and xl.
Property:
m - margin (outer spacing)
p - padding (Inner spacing)
Sides:
t - top
b - bottom
l - left
r - right
x - both *-left and*-right
y - both *-top and*-bottom
without - all 4 sides
Breakpoint:
sm - ab 576px
md - ab 768px
lg - ab 992px
xl - ab 1200px
ohne - ab 0px
Size: ($spacer = 1rem)
0 - Setting spacing to 0
1 - setting spacing to $spacer * .25
2 - setting spacing to $spacer * .5
3 - setting spacing to $spacer
4 - setting spacing to $spacer * 1,5
5 - setting spacing to $spacer * 3
auto - setting spacing to 'auto'
Note: ThemeWare® also offers an extensive collection of pixel-based spacing classes.
Please find more information in the article:ThemeWare® CSS classes for Shopping Experiences
Additional links
Designing Shopping Experiences with Bootstrap CSS classesOptimizing Shopping Experiences with Bootstrap HTML elementsResponsive Shopping Experiences with BootstrapLast updated