Typography

Überschriften

h1. Bootstrap Überschrift

h2. Bootstrap Überschrift

h3. Bootstrap Überschrift

h4. Bootstrap Überschrift

h5. Bootstrap Überschrift
h6. Bootstrap Überschrift

Display Überschriften

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Lead Paragraph

Dies ist ein Lead-Paragraph. Er hebt sich vom normalen Text ab und eignet sich perfekt für Einleitungen oder wichtige Aussagen.

Inline Text Elemente

Text mit Hervorhebung durch mark-Tag.

Dieser Text wurde gelöscht.

Dieser Text ist nicht mehr relevant.

Dieser Text wurde eingefügt.

Dieser Text ist unterstrichen.

Dieser Text ist kleiner.

Dieser Text ist fett.

Dieser Text ist kursiv.

HTML ist eine Abkürzung.

Blockquote

Ein bekanntes Zitat, das die Qualität eines Templates demonstriert.

Max Mustermann in Berühmte Zitate

Code

Inline Code: <section>

<div class="container">
  <div class="row">
    <div class="col">Spalte</div>
  </div>
</div>

Keyboard Input: Ctrl + C

Sample Output: Dies ist Beispiel-Output.

Farben

Template Farben

Primary / Blau
#009DFF
Font / Grau
#737373
Grün / Accent
#5EC604
White
#FFFFFF

Bootstrap Farben

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Body Secondary
Body Tertiary

Text Farben

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-muted

Grid System

Grundlegende Grid-Spalten

col-12
col-6
col-6
col-4
col-4
col-4
col-3
col-3
col-3
col-3

Responsive Breakpoints

col-12 col-md-6 col-lg-4
col-12 col-md-6 col-lg-4
col-12 col-md-12 col-lg-4

Offset & Order

col-md-4
col-md-4 offset-md-4
Erste (order-3)
Zweite (order-1)
Dritte (order-2)

Tabellen

Standard Tabelle

# Name Stadt Alter
1 Max Mustermann Berlin 32
2 Erika Musterfrau München 28
3 Hans Schmidt Hamburg 45

Striped & Hover

# Produkt Preis Menge
1 Laptop 999,00 € 5
2 Maus 29,99 € 25
3 Tastatur 79,99 € 15

Bordered & Dark

Bordered Tabelle
Zelle 1 Zelle 2
Dark Tabelle
Zelle 1 Zelle 2

Responsive Tabelle

Spalte 1 Spalte 2 Spalte 3 Spalte 4 Spalte 5 Spalte 6 Spalte 7 Spalte 8
Daten 1 Daten 2 Daten 3 Daten 4 Daten 5 Daten 6 Daten 7 Daten 8

Formulare

Text Inputs

Textarea

Select

Checkboxes & Radios

Switches

Range

Input Groups

@
@beispiel.de
€ ,00
Kommentar

Validation States

Sieht gut aus!
Bitte korrigieren Sie dieses Feld.

Floating Labels

Buttons

Standard Buttons

Outline Buttons

Button Größen

Deaktivierte Buttons

Deaktivierter Link

Block Buttons

Icon Buttons

Button Groups


Button Toolbar

Cards

Card image
Card Titel

Ein kurzer Beispieltext für die Card-Beschreibung, der den Inhalt zusammenfasst.

Mehr erfahren
Featured
Card mit Header

Diese Card hat einen Header und einen Footer für zusätzliche Informationen.

Aktion
Vor 2 Tagen aktualisiert
Header
Primary Card

Eine farbige Card mit dem Primary-Hintergrund für besondere Hervorhebung.

Success Card

Für positive Nachrichten oder Erfolgs-Meldungen.

Warning Card

Für Warnungen oder Hinweise an den Benutzer.

Danger Card

Für wichtige Fehler oder kritische Informationen.

Horizontale Card

Card image
Horizontale Card

Eine Card mit Bild links und Text rechts für ein anderes Layout.

Zuletzt aktualisiert vor 3 Minuten

Card Group

Card 1
Card 1

Erste Card in der Gruppe.

Card 2
Card 2

Zweite Card in der Gruppe.

Card 3
Card 3

Dritte Card in der Gruppe.

Accordion

Dies ist das erste Accordion-Element. Es ist standardmäßig geöffnet. Sie können hier beliebige Inhalte platzieren, einschließlich Text, Bilder oder andere HTML-Elemente.

Dies ist das zweite Accordion-Element. Es ist standardmäßig geschlossen. Klicken Sie auf den Header, um den Inhalt anzuzeigen oder auszublenden.

Dies ist das dritte Accordion-Element. Accordion-Elemente eignen sich hervorragend für FAQs, Produktbeschreibungen oder andere strukturierte Inhalte.

Accordion ohne Parent (mehrere geöffnet)

Inhalt für Flush Element 1. Mehrere können gleichzeitig geöffnet sein.

Inhalt für Flush Element 2. Mehrere können gleichzeitig geöffnet sein.

Alerts

Alert mit Link

Alert mit zusätzlichem Inhalt

Schließbarer Alert

Badges

Standard Badges

Primary Secondary Success Danger Warning Info Light Dark

Pill Badges

Primary Secondary Success Danger Warning Info Light Dark

Badges in Überschriften

Überschrift h1 Neu

Überschrift h2 Neu

Überschrift h3 Neu

Überschrift h4 Neu

Überschrift h5 Neu
Überschrift h6 Neu

Badges in Buttons

Positionierte Badges

Pagination

Standard Pagination

Mit Icons

Mit deaktivierten States

Größen

Progress Bars

Standard Progress

25%
50%
75%
100%

Farbvarianten

Success
Info
Warning
Danger

Gestreifte Progress Bars

 
 
 
 

Animierte Progress Bars

 

Mehrere Segmente

15%
30%
20%

Modals

Klicken Sie auf die Buttons, um verschiedene Modal-Varianten zu öffnen.

Modal Größen

Tooltips & Popovers

Tooltips

Fahren Sie mit der Maus über die Buttons, um Tooltips zu sehen.

Popovers

Klicken Sie auf die Buttons, um Popovers anzuzeigen.

Hinweis: Tooltips und Popovers müssen mit JavaScript initialisiert werden. Fügen Sie folgenden Code am Ende Ihres Artikels ein: 
<script>
document.addEventListener('DOMContentLoaded', function() {
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
  tooltipTriggerList.map(function(el) { return new bootstrap.Tooltip(el); });
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
  popoverTriggerList.map(function(el) { return new bootstrap.Popover(el); });
});
</script>

Listen

Ungeordnete Liste

  • Listenelement 1
  • Listenelement 2
    • Verschachtelt 1
    • Verschachtelt 2
  • Listenelement 3

Geordnete Liste

  1. Erster Punkt
  2. Zweiter Punkt
    1. Unterpunkt 2.1
    2. Unterpunkt 2.2
  3. Dritter Punkt

Beschreibungsliste

Begriff 1
Beschreibung für Begriff 1
Begriff 2
Beschreibung für Begriff 2
Begriff 3
Beschreibung für Begriff 3

List Group

Standard

  • Erstes Element
  • Zweites Element
  • Drittes Element
  • Viertes Element
  • Fünftes Element

Mit aktiv & deaktiviert

  • Aktives Element
  • Normales Element
  • Deaktiviert
  • Normales Element

Farbvarianten

  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info

List Group mit Badges

  • Posteingang 14
  • Gesendet 2
  • Entwürfe 1

Bilder

Responsive Image

Responsive Image

Thumbnail

Thumbnail

Rounded Image

Rounded

Circle Image

Circle

Figure

Figure Image
Eine Bildunterschrift für das obige Bild. Dies ist ein Figure-Element mit Caption.

Bild Alignment

Float Start

Dies ist ein Beispieltext, der um ein links ausgerichtetes Bild fließt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Float End

Dies ist ein Beispieltext, der um ein rechts ausgerichtetes Bild fließt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Spinners

Border Spinners

Growing Spinners

Spinner Größen

Spinners in Buttons

Custom Template Utilities

Template Padding Klassen

.padding-top5 + .padding-bottom5
5% Padding oben und unten
.padding-top40 + .padding-bottom40
40px Padding oben und unten

Template Farbschema

$color-blau
Primary
#009DFF
$color-grau
Font Color
#737373
$color-gruen
Accent
#5EC604
$color-white
Background
#FFFFFF

OpenSans Font Family

OpenSans Regular (400)

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

OpenSans Medium (600)

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

OpenSans Bold (700)

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

1234567890

Blog Card Styling (Template-spezifisch)

Blog Card
Blog Artikel Titel

Eine kurze Beschreibung des Blog-Artikels mit Template-spezifischem Styling.

08.01.2026 Autor
Blog Card
Weiterer Artikel

Noch ein Blog-Artikel mit Hover-Effekt beim Überfahren der Card.

07.01.2026
Blog Card
Dritter Artikel

Blog Cards mit dem Template-eigenen Hover-Effekt und Schatten.

Mehr lesen