Umsatzsteigernd
Extrem anpassbar
SEO/Pagespeed-optimiert
Video-Tutorials
Exzellenter Support

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

Typography


Examples for Bootstrap typography.

https://getbootstrap.com/docs/5.3/content/typography/

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 removed

Blockquotes

A well-known quote, contained in a blockquote element.

Example

Coming soon...

Colors


Examples for Bootstrap colors.

https://getbootstrap.com/docs/5.3/customize/color/

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Example

Coming soon...

Background color


Examples for Bootstrap background colors.

https://getbootstrap.com/docs/5.3/helpers/color-background/

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-body
.bg-white
.bg-transparent

Example

Coming soon...

Borders


Use border utilities to quickly style the border and border-radius of an element.

https://getbootstrap.com/docs/5.3/utilities/borders/

Color

                 

Width

1 2 3 4 5

Radius

  top end bottom start circle pill

Size

1 2 3 4 5

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.

https://getbootstrap.com/docs/5.3/layout/grid/

Examples

col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
col-7
col-5
col-8
col-4
col-9
col-3
col-10
col-2
col-11
col-1

Setting one column width

col
col-6
col
col
col-8
col

More examples

col-2
col-2
col-2
col-2
col-2
col-2
col-3
col-3
col-3
col-3
col-4
col-4
col-4

Example

Coming soon...

Columns


Examples for Bootstrap columns.

https://getbootstrap.com/docs/5.3/layout/columns/

Vertical alignment

One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns

Horizontal alignment

One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns

Offsetting columns

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3

Example

Coming soon...

Tables


Examples for opt-in styling of tables.

https://getbootstrap.com/docs/5.3/content/tables/

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped rows

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped columns

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Hoverable rows

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Variants

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

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.

https://getbootstrap.com/docs/5.3/components/buttons/

Example

Coming soon...

List group


List groups are a flexible and powerful component for displaying a series of content.

https://getbootstrap.com/docs/5.3/components/list-group/

  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
The current link item
A second link item
A third link item
A fourth link item
A disabled link item

Custom content

  1. Subheading
    Content for list item
    14
  2. Subheading
    Content for list item
    14
  3. Subheading
    Content for list item
    14
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.
List group item heading
3 days ago

Some placeholder content in a paragraph.

And some muted small print.

Example

Coming soon...

Shadows


Add or remove shadows to elements with box-shadow utilities.

https://getbootstrap.com/docs/5.3/utilities/shadows/

No shadow
Small shadow
Regular shadow
Larger shadow

Example

Coming soon...