Bootstrap examples
The Shopware 6 Storefront is based on the Bootstrap framework. Thanks to its HC-Architecture®, ThemeWare® is also compatible with Bootstrap. On this page you will find the most common Bootstrap classes and Bootstrap elements that you can use in your Shopping Experiences. In addition, you will find code examples for each element (examples follow...) and a link to the Bootstrap documentation for more information.
Please note that the HTML editor of Shopware 6 (e.g. in CMS elements) does not allow all HTML tags in individual HTML code and automatically sanitises the code for security reasons. This does not mean that Shopware or ThemeWare® are not compatible with Bootstrap. Everything you find on this page was implemented with the Shopware HTML editor. Some of the actual Bootstrap code has been modified for this purpose.
You can use Bootstrap in template files according to the Bootstrap documentation. The only restriction here is that Shopware does not provide all elements.
In terms of Shopping Experiences, there are special CMS elements in the Shopware Store that provide alternative HTML editors and thus offer you more freedom than the HTML editor in Shopware 6.
You can find more information on this topic in the ThemeWare® Knowledge Base: Using Bootstrap in the Storefront
Headings
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
Text
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined.
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
Text alignment
Start aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
End aligned text on all viewport sizes.
Text transform
Lowercased text.
Uppercased text.
CapiTaliZed text.
Font size
.fs-1 text
.fs-2 text
.fs-3 text
.fs-4 text
.fs-5 text
.fs-6 text
Font weight and italics
Bold text.
Bolder weight text (relative to the parent element).
Semibold weight text.
Normal weight text.
Light weight text.
Lighter weight text (relative to the parent element).
Italic text.
Text with normal font style
Line height
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.
Text decoration
This text has a line underneath it.
This text has a line going through it.
This link has its text decoration removedBlockquotes
A well-known quote, contained in a blockquote element.
Example
Coming soon...
Example
Coming soon...
Colored links
Colored links with hover states.
Example
Coming soon...
Background color
Examples for Bootstrap background colors.
Example
Coming soon...
Borders
Use border utilities to quickly style the border and border-radius of an element.
Color
Width
Radius
Size
Example
Coming soon...
Grid system
Use a powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system.
Examples
Setting one column width
More examples
Example
Coming soon...
Vertical alignment
Horizontal alignment
Offsetting columns
Example
Coming soon...
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Striped rows
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Striped columns
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Hoverable rows
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Variants
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Example
Coming soon...
Forms
Forms cannot be integrated into Shopping Experiences via HTML. Shopware, however, has a dedicated form CMS element.
Example
Coming soon...
Buttons
Use Bootstrap's custom button styles for actions.
Example
Coming soon...
List group
List groups are a flexible and powerful component for displaying a series of content.
- An item
- A second item
- A third item
- A fourth item
- And a fifth one
Custom content
-
14SubheadingContent for list item
-
14SubheadingContent for list item
-
14SubheadingContent for list item
List group item heading
3 days agoSome placeholder content in a paragraph.
And some small print.List group item heading
3 days agoSome placeholder content in a paragraph.
And some muted small print.List group item heading
3 days agoSome placeholder content in a paragraph.
And some muted small print.Example
Coming soon...
Shadows
Add or remove shadows to elements with box-shadow utilities.
Example
Coming soon...