Komplettbeispiel

Die meisten Design-Elemente und UI‑Komponenten.

Modal öffnen
Schnellnavigation

Klicke auf die Abschnitte in der Seitenleiste, um Beispiele anzusehen.

Zu den Komponenten

Typografie & Farben

.bg-
primary
.bg-
secondary
.bg-
success
.bg-
info
.bg-
warning
.bg-
danger
.bg-
light
.bg-
dark

Example body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

This line of text is meant to be treated as fine print.

The following is rendered as bold text.

The following is rendered as italicized text.

An abbreviation of the word attribute is attr.

ÄÖÜ äöü ß éèê @ €

ÄÖÜ äöü ß éèê @ €

Emphasis classes

.text-muted
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

.text-primary
Nullam id dolor id nibh ultricies vehicula ut id elit.

.text-secondary
Pellentesque ornare sem lacinia quam venenatis vestibulum.

.text-warning
Etiam porta sem malesuada magna mollis euismod.

.text-danger
Donec ullamcorper nulla non metus auctor fringilla.

.text-success
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

.text-info
Maecenas sed diam eget risus varius blandit sit amet non magna.

Headings, Lead, Inline‑Elemente, Badges, Farben, Code, Blockquote.

h1. Überschrift Neu

h2. Überschrift

h3. Überschrift

h4. Überschrift

h5. Überschrift
h6. Überschrift

Dies ist ein Lead‑Absatz.

Standardtext mit fett, kursiv, Link, markiert, <code> und Ctrl+K.

Gute Gestaltung ist so wenig Gestaltung wie möglich.

Primary Secondary Success Danger Warning Info Light Dark

Grid & Layout

Container, Rows, Spalten, Column‑Breakpoints, Karten im Grid.

col
col
col
col
Zufallsbild
Karte 1

Beispieltext für eine Karte.

Aktion
Karte 2

Varianten mit Schatten und ohne Bild.

Info
Header
Karte 3

Mit Header und Footer.

Bilder & Medien

Responsive Bild

Komponenten

Alerts
Progress & Spinner
60%
Lädt…
Lädt…
List Group & Badges
  • Eintrag A 14
  • Eintrag B
  • Aktiv
  • Deaktiviert
Accordion

Inhalt 1

Inhalt 2

Tabellen

#NameStatusAktion
1Max MustermannAktiv
2Erika MusterfrauWartend
3John DoeInaktiv

Buttons

Primary link Link

Formulare

Bitte Vornamen angeben.
Bitte Nachnamen angeben.
@
Bitte gültige E‑Mail eingeben.
Bitte Land wählen.

Feedback‑Komponenten

Alerts

Inhalt Home
Inhalt Profil
Inhalt Kontakt

Overlays

Modal öffnen

Utilities

Abstände, Flex, Display, Text, Position usw.

.d-flex .justify-content-between .align-items-center
.text-md-end .p-4
TL TR BL BR
Offcanvas Panel

Eine platzsparende Seitenleiste für zusätzliche Inhalte.