Bootstrap-Spickzettel
Eine durchsuchbare, druckbare Bootstrap-5.3-Referenz — Grid, Abstände, Typografie, Farben, Flex-Utilities, Buttons, Formulare und Komponenten. Kostenlos.
Grid & Layout
12<div class="container">
Responsiver Container mit fester Breite
<div class="container-fluid">
Container in voller Breite bei jedem Breakpoint
<div class="container-md">
100 % breit bis zum md-Breakpoint
<div class="row">
Grid-Zeile, hält Spalten
<div class="col">
Auto-Spalte mit gleicher Breite
<div class="col-6">
Erstreckt sich über 6 von 12 Spalten
<div class="col-md-4">
4 Spalten ab dem md-Breakpoint
<div class="col-auto">
Spalte auf ihren Inhalt dimensioniert
<div class="offset-md-2">
Spalte 2 Spalten nach rechts verschieben
<div class="row g-3">
Gutter-Abstand zwischen Spalten
<div class="row row-cols-3">
3 gleiche Spalten pro Zeile erzwingen
<div class="order-2">
Eine Flex-/Grid-Spalte umordnen
Abstands-Utilities
12m-3
Margin auf allen Seiten (Skala 0-5)
mt-2
Margin oben
mx-auto
Automatische horizontale Margins zum Zentrieren
p-4
Padding auf allen Seiten
py-2
Vertikales Padding (oben und unten)
ms-3
Margin am Anfang (links in LTR, RTL-fähig)
me-3
Margin am Ende (rechts in LTR, RTL-fähig)
ps-2
Padding am Anfang, RTL-fähig
pe-2
Padding am Ende, RTL-fähig
gap-3
Abstand zwischen Flex-/Grid-Elementen
m-n1
Negativer Margin
p-md-5
Responsives Padding ab md
Typografie
14<h1>..<h6>
Überschriftsebenen mit Standard-Styling
<p class="display-1">
Große Display-Überschrift (display-1..6)
<p class="lead">
Hervorgehobener Lead-Absatz
fw-bold
Fette Schriftstärke
fw-semibold
Halbfette Schriftstärke
fst-italic
Kursiver Schriftstil
text-center
Text zentriert ausrichten
text-start
Text am Anfang ausrichten, RTL-fähig
text-end
Text am Ende ausrichten, RTL-fähig
text-truncate
Überlauf mit Auslassungspunkten kürzen
text-uppercase
Text in Großbuchstaben umwandeln
fs-1
Responsive Schriftgröße (fs-1..6)
lh-base
Basis-Zeilenhöhe (lh-1, lh-sm, lh-lg)
font-monospace
Monospace-Schriftfamilie
Farben & Hintergrund
10text-primary
Primäre Textfarbe
bg-primary
Primäre Hintergrundfarbe
bg-primary-subtle
Dezenter primärer Hintergrundton
text-primary-emphasis
Betonter primärer Text, theme-fähig
text-bg-primary
Primärer Hintergrund mit automatischem Kontrasttext
link-primary
Helfer für farbige Links
bg-opacity-50
50 % Hintergrund-Deckkraft anwenden
text-body-secondary
Gedämpfter sekundärer Fließtext
text-body-emphasis
Stark betonter Fließtext
border-primary-subtle
Dezente primäre Rahmenfarbe
Flex-Utilities
10d-flex
Flex-Container erstellen
flex-row
Elemente in einer Reihe anordnen
flex-column
Elemente in einer Spalte anordnen
justify-content-between
Elemente entlang der Hauptachse verteilen
align-items-center
Elemente an der Querachse zentrieren
flex-wrap
Elemente umbrechen lassen
flex-grow-1
Ein Element wachsen lassen, um Platz zu füllen
flex-fill
Gleiche flexible Breiten erzwingen
align-self-end
Ein einzelnes Element am Ende ausrichten
flex-md-row
Responsive Flex-Richtung ab md
Display & Position
12d-none
Das Element verbergen
d-md-block
Ab dem md-Breakpoint als Block anzeigen
position-relative
Relative Positionierung
position-absolute
Absolute Positionierung
position-fixed
Fixe Positionierung
position-sticky
Sticky-Positionierung
top-0 start-0
Oben links anheften, RTL-fähig
translate-middle
Per transform translate zentrieren
fixed-top
Element oben am Viewport fixieren
sticky-top
Beim Scrollen oben anheften
z-3
z-index setzen (z-0..3)
invisible
Verbergen, aber Layout-Platz behalten
Größen & Rahmen
12w-100
Breite 100 % des Elternelements
w-50
Breite 50 % des Elternelements
h-100
Höhe 100 % des Elternelements
mw-100
Max-Breite 100 %
vh-100
Höhe 100 % des Viewports
border
Einen Standardrahmen auf allen Seiten hinzufügen
border-0
Alle Rahmen entfernen
border-primary
Den Rahmen einfärben
rounded
Standard-border-radius
rounded-pill
Vollständig gerundete Pill-Form
rounded-circle
Kreisförmiger border-radius
shadow-sm
Kleiner Box-Schatten (shadow, shadow-lg)
Buttons
9<button class="btn btn-primary">
Gefüllter Primär-Button
<button class="btn btn-outline-primary">
Outline-Button-Variante
<button class="btn btn-lg">
Großer Button (auch btn-sm)
<button class="btn btn-link">
Wie ein Link gestylter Button
<button class="btn-close">
Generischer Schließen-Button (×)
<button class="btn disabled">
Deaktivierter Button-Zustand
<button class="btn active">
Aktiver Button-Zustand
<div class="d-grid"><button class="btn">
Block-Button in voller Breite via d-grid
<div class="btn-group">
Buttons zusammen gruppieren
Formulare
11<input class="form-control">
Gestyltes Texteingabefeld
<label class="form-label">
Formularfeld-Label
<select class="form-select">
Gestyltes Select-Dropdown
<div class="form-check">
Checkbox-/Radio-Wrapper
<input class="form-check-input">
Gestylte Checkbox- oder Radio-Eingabe
<div class="form-check form-switch">
Toggle-Switch-Komponente
<input class="form-control-lg">
Große Eingabe (auch form-control-sm)
<div class="input-group">
Eingaben mit Add-ons gruppieren
is-invalid
Ungültiger Validierungszustand (is-valid)
<div class="form-floating">
Eingabe mit schwebendem Label
col-form-label
Label für horizontale Formulare ausgerichtet
Komponenten
14<div class="card">
Flexible Inhaltskarte
<nav class="navbar navbar-expand-lg">
Responsive Navigationsleiste
data-bs-toggle="modal" data-bs-target="#m"
Einen modalen Dialog auslösen
data-bs-toggle="dropdown"
Ein Dropdown-Menü umschalten
data-bs-toggle="collapse"
Ein einklappbares Element umschalten
<div class="accordion">
Gestapelte einklappbare Panels
<div class="alert alert-dismissible">
Schließbare Hinweismeldung
<span class="badge text-bg-primary">
Kleines Zähler- oder Label-Badge
<ul class="list-group">
Gestylte Liste von Elementen
<ul class="nav nav-tabs">
Tab-Navigation
<div class="toast">
Leichte Toast-Benachrichtigung
<div class="offcanvas">
Off-Canvas-Seitenleisten-Panel
<div class="spinner-border">
Lade-Spinner-Anzeige
<nav><ul class="pagination">
Paginierte Navigationslinks
Helfer & Sonstiges
11data-bs-theme="dark"
Dunklen Farbmodus für einen Bereich aktivieren
<div class="ratio ratio-16x9">
Responsive Box mit Seitenverhältnis
visually-hidden
Visuell verbergen, für Screenreader behalten
visually-hidden-focusable
Versteckt bis fokussiert (Skip-Links)
stretched-link
Ein Elternelement vollständig klickbar machen
clearfix
Gefloatete Kinder clearen
<div class="vstack gap-2">
Vertikaler Stapel von Elementen
<div class="hstack gap-2">
Horizontaler Stapel von Elementen
<a class="icon-link">
Link mit einem Inline-Icon ausgerichtet
<div class="progress">
Fortschrittsbalken-Container
<nav class="breadcrumb">
Breadcrumb-Navigationspfad
Kein Eintrag passt zu „:q“.
Brauchen Sie Hilfe?
Ein Problem mit diesem Tool gefunden? Sagen Sie es unserem Team.