Bootstrap-Beispiele
Die Shopware 6 Storefront basiert auf dem Bootstrap-Framework. Durch die HC-Architektur® ist ThemeWare® natürlich ebenfalls kompatibel mit Bootstrap. Auf dieser Seite findest du die gängigsten Bootstrap-Klassen und Bootstrap-Elemente, die du in deinen Erlebniswelten nutzen kannst. Darüber hinaus findest du zu jedem Element Code-Beispiele (Beispiele folgen...) und einen Link zur Bootstrap-Dokumentation für weitere Informationen.
Bitte beachte, dass der HTML-Editor von Shopware 6 (z.B. in CMS-Elementen) individuellen HTML-Code – aus Sicherheitsgründen – nicht alle HTML-Tags erlaubt und den Code automatisch bereinigt. Das bedeutet nicht, dass Shopware bzw. ThemeWare® nicht kompatibel mit Bootstrap ist. Alles was du auf dieser Seite findest wurde mit dem HTML-Editor von Shopware umgesetzt. Dafür wurde der eigentlich Bootstrap-Code teils modifiziert.
In Template-Dateien kannst du Bootstrap entsprechend der Bootstrap-Dokumentation nutzen. Hier gibt es lediglich die Einschränkung das Shopware nicht alle Elemente bereitstellt.
Im Bereich Erlebniswelten gibt es spezielle CMS-Elemente im Shopware Store, welche alternative HTML-Editoren bereitstellen und dir damit mehr Freiheiten bieten als der HTML-Editor von Shopware 6.
Mehr Informationen zu diesem Thema findest du in der ThemeWare® Wissensdatenbank: Bootstrap in der Storefront nutzen
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...