Designing Shopping Experiences with Bootstrap CSS classes
In this tutorial, you will learn how to design themes with Bootstrap CSS classes.
The Shopware 6 storefront is based on the Bootstrap framework. Due to our HC-Architecture® ThemeWare® of course it is also completely compatible with Bootstrap.
On this page you will find the most common Bootstrap classes which you can apply to CMS blocks in your Shopping Experiences . Without any programming knowledge!
Note: Shopware has removed !important instructions from Bootstrap utility classes with version 6.6.0 (see NEXT-29246). As a result, these classes no longer overwrite any predefined formatting as before.
Shopware 6.4
In Shopware 6.4, the Storefront uses Bootstrap 4.
Shopware 6.5
In Shopware 6.5, the Storefront uses Bootstrap 5.
Tip: You can find some examples of use in our demo shops on the "Bootstrap examples" pages.
Text alignment
For aligning texts Bootstrap already provides some CSS classes you can use. Please find more about this here.
CSS classes
text-start
text-left
Block
Align text to the left.
text-center
text-center
Block
Align text centered.
text-end
text-right
Block
Align text to the right.
Examples
Text colour (colour)
For colouring texts, Bootstrap already provides some classes for different colours. In the following you will find examples of the available colour variants. Please find more about this here.
CSS classes
text-primary
Block
Output text in primary colour.
text-secondary
Block
Output text in secondary colour.
text-success
Block
Output text in the colour "Success".
text-danger
Block
Output text in the colour "Error".
text-warning
Block
Output text in the colour "Notice".
text-info
Block
Output text in the colour "Information".
text-white
Block
Output text in the colour "white".
Examples
Background colour (background-color)
The Bootstrap framework also provides you with classes for adding backgrounds to Shopping Experience elements in different colours. For dark backgrounds it is recommended to choose a light text colour (see above). Please find more about this here.
CSS classes
bg-primary
Block
Display background with primary colour.
bg-secondary
Block
Display background with secondary colour.
bg-success
Block
Display background with the colour "Success".
bg-danger
Block
Display background with the colour "Error".
bg-warning
Block
Display background with the colour "Notice".
bg-info
Block
Display background with the colour "Information".
Examples
Border (additive)
Bootstrap classes can also be used to define the borders of CMS blocks. For example, the class "border-0" removes borders from elements. Please find more about it here.
Note: Please note that the "ThemeWare® CMS-Styling" already represents a framework and additive CSS classes then have no effect. Additive CSS classes are relevant for Shopping Experiences without "ThemeWare® CMS-Styling".
CSS classes
border
border
Block
Add border.
border-top
border-top
Block
Add border on top.
border-end
border-right
Block
Add border on the right.
border-bottom
border-bottom
Block
Add border at bottom.
border-start
border-left
Block
Add border on the left.
Border (subtractive)
CSS classes
border-0
border-0
Block
Remove border.
border-top-0
border-top-0
Block
Remove border at top.
border-end-0
border-right-0
Block
Remove border on the right.
border-bottom-0
border-bottom-0
Block
Remove border at bottom.
border-star-0
border-left-0
Block
Remove border on the left.
Examples
Border colour (border-color)
Change the border colour (or border-color) of CMS blocks using the following CSS classes. Please find more about this here.
CSS classes
border-primary
Block
Display border with the primary colour.
border-secondary
Block
Display border with the secondary colour.
border-success
Block
Display border with the colour "Success".
border-danger
Block
Display border with the colour "Error".
border-warning
Block
Display border with the colour "Notice".
border-info
Block
Display border with the colour "Information".
border-light
Block
Display border with the colour "light".
border-dark
Block
Display border with the colour "dark".
border-white
Block
Display border with the colour "white".
Examples
Border-radius
Add the following CSS classes to a CMS block to easily round off its corners. Please find more about it here.
CSS-Classes
rounded
rounded
Block
Round off element.
rounded-top
rounded-top
Block
Round off element at top
rounded-end
rounded-right
Block
Round off element on right.
rounded-bottom
rounded-bottom
Block
Round off element at bottom.
rounded-start
rounded-left
Block
Round off element on left.
rounded-0
rounded-0
Block
Do not round off element.
Example
Shadow
Adding or removing shadows to CMS blocks. Please find more here.
CSS-Classes
shadow-sm
Block
Small drop shadow.
shadow
Block
Normal drop shadow.
shadow-lg
Block
Large drop shadow.
Examples
Special case: CMS blocks with ThemeWare® CMS styling
Shopware has removed !important instructions from Bootstrap utility classes with version 6.6.0 (see NEXT-29246). As a result, some CSS classes available in Bootstrap are now overwritten by the CMS styling due to the corresponding CSS hierarchy.
If you would like to apply Bootstrap CSS classes to CMS blocks, please note that the ThemeWare® CMS styling overrides the border (border, border-radius), the background colour (background-color) and the margin at the bottom (margin-bottom).
Therefore, remove the CMS styling for the corresponding CMS block with the CSS class twt-cms-block-reset so that the bootstrap classes take effect.
Related links
Last updated
