Bootstrap-Komponenten sind vorgefertigte UI-Elemente, die konsistentes Design und bewährte Usability-Patterns umsetzen. Diese Komponenten lösen häufige Interface-Probleme und beschleunigen die Entwicklung erheblich. Anstatt jedes UI-Element von Grund auf zu entwickeln, können Sie auf getestete, zugängliche Lösungen zurückgreifen.
Der große Vorteil von Bootstrap-Komponenten liegt in ihrer Durchdachtheit. Jede Komponente folgt etablierten Design-Prinzipien, berücksichtigt Barrierefreiheit und funktioniert auf allen Geräten. Gleichzeitig sind sie flexibel genug, um an verschiedene Designanforderungen angepasst zu werden.
Cards sind Container für verwandte Inhalte und Aktionen. Sie funktionieren wie digitale Karteikarten, die Informationen strukturiert und visuell abgegrenzt präsentieren. Die Card-Struktur folgt einem logischen Aufbau, der Nutzern hilft, Inhalte schnell zu erfassen.
Eine Bootstrap-Card besteht aus mehreren optionalen Bereichen, die je nach Bedarf kombiniert werden können:
<!-- Vollständige Card-Struktur mit allen Bereichen -->
<div class="card" style="width: 18rem;">
<!-- Card Header: Titel oder Meta-Informationen -->
<div class="card-header">
<h6 class="mb-0">Card Header</h6>
</div>
<!-- Card Image: Visueller Fokuspunkt -->
<img src="..." class="card-img-top" alt="Card image">
<!-- Card Body: Hauptinhalt -->
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
<p class="card-text">
Der Haupttext der Card. Hier stehen die wichtigsten
Informationen, die der Nutzer benötigt.
</p>
<a href="#" class="btn btn-primary">Hauptaktion</a>
<a href="#" class="card-link">Zusätzlicher Link</a>
</div>
<!-- Card Footer: Zusätzliche Aktionen oder Meta-Daten -->
<div class="card-footer text-muted">
<small>Zuletzt aktualisiert vor 3 Minuten</small>
</div>
</div>Warum ist diese Struktur so effektiv? Der Header schafft Kontext, das Bild zieht Aufmerksamkeit, der Body liefert Inhalte und Aktionen, während der Footer ergänzende Informationen bietet. Diese Hierarchie entspricht der natürlichen Art, wie Menschen Informationen verarbeiten.
Cards sind vielseitig und passen sich verschiedenen Inhaltstypen an. Hier sind bewährte Patterns für häufige Szenarien:
<!-- Produkt-Card: Verkaufsorientiertes Design -->
<div class="card h-100" style="width: 18rem;">
<div class="position-relative">
<img src="..." class="card-img-top" alt="Produktbild">
<!-- Sale Badge als Overlay -->
<span class="position-absolute top-0 start-0 badge bg-danger m-2">-20%</span>
</div>
<div class="card-body d-flex flex-column">
<h5 class="card-title">Premium Kopfhörer</h5>
<p class="card-text flex-grow-1">
Hochwertige Bluetooth-Kopfhörer mit aktiver Geräuschunterdrückung
und 30 Stunden Akkulaufzeit.
</p>
<!-- Preis und Bewertung prominent platziert -->
<div class="d-flex justify-content-between align-items-center mb-2">
<div>
<span class="h5 text-primary mb-0">€149,99</span>
<small class="text-muted text-decoration-line-through ms-2">€189,99</small>
</div>
<div>
<span class="text-warning">★★★★☆</span>
<small class="text-muted">(24)</small>
</div>
</div>
<button class="btn btn-primary">In den Warenkorb</button>
</div>
</div>
<!-- Blog-Artikel-Card: Informationsorientiertes Design -->
<div class="card h-100" style="width: 20rem;">
<img src="..." class="card-img-top" alt="Artikel-Bild">
<div class="card-body d-flex flex-column">
<!-- Meta-Informationen am Anfang -->
<div class="d-flex justify-content-between align-items-center mb-2">
<span class="badge bg-primary">Technologie</span>
<small class="text-muted">15. März 2024</small>
</div>
<h5 class="card-title">Die Zukunft des Webdesigns</h5>
<p class="card-text flex-grow-1">
Ein Blick auf kommende Trends und Technologien, die das
Webdesign in den nächsten Jahren prägen werden...
</p>
<!-- Autor und Lesezeit -->
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">Von Max Mustermann • 5 Min Lesezeit</small>
<a href="#" class="btn btn-outline-primary btn-sm">Weiterlesen</a>
</div>
</div>
</div>
<!-- Team-Mitglied-Card: Personenorientiertes Design -->
<div class="card text-center" style="width: 16rem;">
<div class="card-body">
<!-- Profilbild zentriert -->
<img src="..." class="rounded-circle mb-3" width="80" height="80" alt="Profilbild">
<h5 class="card-title">Dr. Sarah Weber</h5>
<h6 class="card-subtitle mb-3 text-muted">Senior UX Designer</h6>
<p class="card-text">
Spezialisiert auf nutzerzentriertes Design mit über 8 Jahren
Erfahrung in der Produktentwicklung.
</p>
<!-- Soziale Links -->
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-outline-primary btn-sm">LinkedIn</a>
<a href="#" class="btn btn-outline-secondary btn-sm">Portfolio</a>
</div>
</div>
</div>Beachten Sie, wie jede Card-Variation auf ihren Zweck zugeschnitten ist. Produkt-Cards betonen Preis und Kaufaktion, Blog-Cards strukturieren Informationen für schnelles Scannen, und Team-Cards schaffen persönliche Verbindungen.
Cards zeigen ihre wahre Stärke in responsiven Layouts. Hier ist ein bewährtes Pattern für Card-Grids:
<div class="container">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
<!-- Card 1 -->
<div class="col">
<div class="card h-100">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Starter Plan</h5>
<p class="card-text flex-grow-1">
Perfekt für kleine Projekte und Einzelpersonen.
</p>
<div class="h4 text-primary mb-3">€9/Monat</div>
<button class="btn btn-outline-primary">Auswählen</button>
</div>
</div>
</div>
<!-- Card 2 mit Hervorhebung -->
<div class="col">
<div class="card h-100 border-primary">
<div class="card-header bg-primary text-white text-center">
<small>Beliebteste Wahl</small>
</div>
<div class="card-body d-flex flex-column">
<h5 class="card-title">Professional Plan</h5>
<p class="card-text flex-grow-1">
Ideal für wachsende Teams und Unternehmen.
</p>
<div class="h4 text-primary mb-3">€29/Monat</div>
<button class="btn btn-primary">Auswählen</button>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="col">
<div class="card h-100">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Enterprise Plan</h5>
<p class="card-text flex-grow-1">
Maßgeschneiderte Lösungen für große Organisationen.
</p>
<div class="h4 text-primary mb-3">Individuell</div>
<button class="btn btn-outline-primary">Kontakt</button>
</div>
</div>
</div>
</div>
</div>Die Klasse row-cols-* definiert, wie viele Cards pro
Zeile auf verschiedenen Bildschirmgrößen angezeigt werden. Die
Kombination mit h-100 und Flexbox sorgt für einheitliche
Höhen trotz unterschiedlicher Inhalte.
Bilder sind oft die größten Dateien einer Website, aber auch entscheidend für das visuelle Erlebnis. Bootstrap bietet Klassen für responsive Bilder, die sich automatisch an ihre Container anpassen und dabei ihre Proportionen beibehalten.
Die img-fluid Klasse macht jedes Bild responsive:
<!-- Responsive Bild, das nie größer als sein Container wird -->
<img src="beispiel.jpg" class="img-fluid" alt="Responsive Bild">
<!-- Vergleich: Nicht-responsives Bild (kann überlaufen) -->
<img src="beispiel.jpg" alt="Normales Bild">Was passiert hier technisch? Die img-fluid Klasse wendet
max-width: 100% und height: auto an. Das
bedeutet, das Bild wird nie breiter als sein Container, behält aber
seine ursprünglichen Proportionen bei.
Bootstrap bietet verschiedene Stile für Bilder, die häufige Design-Anforderungen abdecken:
<!-- Thumbnail mit Rahmen und Padding -->
<img src="..." class="img-thumbnail" width="200" height="200" alt="Thumbnail">
<!-- Abgerundete Ecken -->
<img src="..." class="rounded" width="200" height="200" alt="Abgerundet">
<!-- Kreisrund (funktioniert am besten mit quadratischen Bildern) -->
<img src="..." class="rounded-circle" width="200" height="200" alt="Kreis">
<!-- Abgerundete Ecken mit verschiedenen Radien -->
<img src="..." class="rounded-3" width="200" height="200" alt="Stark abgerundet">Das HTML5 <figure>-Element mit Bootstrap-Styling
eignet sich perfekt für Bilder mit Bildunterschriften:
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="Landschaftsfoto">
<figcaption class="figure-caption">
Eine wunderschöne Landschaft bei Sonnenuntergang in den Alpen.
</figcaption>
</figure>
<!-- Zentrierte Beschriftung -->
<figure class="figure text-center">
<img src="..." class="figure-img img-fluid rounded" alt="Architektur">
<figcaption class="figure-caption">
Moderne Architektur in der Münchener Innenstadt.
</figcaption>
</figure>
<!-- Rechtsbündige Beschriftung -->
<figure class="figure">
<img src="..." class="figure-img img-fluid rounded" alt="Portrait">
<figcaption class="figure-caption text-end">
Portrait eines lokalen Künstlers in seinem Atelier.
</figcaption>
</figure>Kombination aus Grid-System und responsiven Bildern für Galerien:
<div class="container">
<div class="row g-3">
<!-- Große Hauptbild -->
<div class="col-12 col-md-8">
<img src="hauptbild.jpg" class="img-fluid rounded" alt="Hauptbild">
</div>
<!-- Kleinere Nebenbilder -->
<div class="col-12 col-md-4">
<div class="row g-3">
<div class="col-6 col-md-12">
<img src="bild2.jpg" class="img-fluid rounded" alt="Bild 2">
</div>
<div class="col-6 col-md-12">
<img src="bild3.jpg" class="img-fluid rounded" alt="Bild 3">
</div>
</div>
</div>
</div>
</div>Alerts und Badges sind wichtige Kommunikationswerkzeuge in Benutzeroberflächen. Alerts liefern Feedback oder wichtige Informationen, während Badges Status, Zähler oder Kategorien kennzeichnen.
Alerts verwenden Farben zur semantischen Kommunikation. Jede Farbe hat eine etablierte Bedeutung:
<!-- Primary: Neutrale Informationen -->
<div class="alert alert-primary" role="alert">
<strong>Information:</strong> Ihre Einstellungen wurden geladen.
</div>
<!-- Success: Positive Bestätigungen -->
<div class="alert alert-success" role="alert">
<strong>Erfolg!</strong> Ihr Profil wurde erfolgreich gespeichert.
</div>
<!-- Info: Hilfreiche Hinweise -->
<div class="alert alert-info" role="alert">
<strong>Tipp:</strong> Verwenden Sie Strg+S zum schnellen Speichern.
</div>
<!-- Warning: Vorsichtsmaßnahmen -->
<div class="alert alert-warning" role="alert">
<strong>Achtung:</strong> Ihre Sitzung läuft in 5 Minuten ab.
</div>
<!-- Danger: Kritische Situationen -->
<div class="alert alert-danger" role="alert">
<strong>Fehler:</strong> Die Verbindung zum Server ist fehlgeschlagen.
</div>Das role="alert" Attribut ist wichtig für Screenreader
und Barrierefreiheit. Es signalisiert assistierenden Technologien, dass
hier wichtige Informationen stehen.
Alerts können komplexere Inhalte und Interaktionen enthalten:
<!-- Alert mit strukturiertem Inhalt -->
<div class="alert alert-success d-flex align-items-start" role="alert">
<div class="me-3" style="font-size: 1.5rem;">✅</div>
<div>
<h4 class="alert-heading">Upload erfolgreich!</h4>
<p>Ihre Datei "quarterly-report.pdf" wurde erfolgreich hochgeladen.</p>
<hr>
<p class="mb-0">
Sie können die Datei jetzt
<a href="#" class="alert-link">in Ihrem Dashboard</a> einsehen.
</p>
</div>
</div>
<!-- Dismissible Alert (kann geschlossen werden) -->
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Wartungshinweis:</strong>
Geplante Systemwartung heute von 22:00 - 24:00 Uhr.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Schließen"></button>
</div>
<!-- Alert mit Aktions-Buttons -->
<div class="alert alert-info d-flex justify-content-between align-items-center" role="alert">
<div>
<strong>Neue Features verfügbar!</strong>
Entdecken Sie die neuesten Funktionen in Version 2.0.
</div>
<div class="ms-3">
<a href="#" class="btn btn-info btn-sm">Jetzt ansehen</a>
</div>
</div>Badges kennzeichnen Status, zählen Elemente oder kategorisieren Inhalte:
<!-- Grundlegende Badge-Farben -->
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info">Info</span>
<!-- Pill-Badges (abgerundet) -->
<span class="badge rounded-pill bg-primary">Pill Badge</span>
<span class="badge rounded-pill bg-success">Status: Aktiv</span>
<!-- Badges als Zähler in Navigationsleisten -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">
Inbox <span class="badge bg-light text-dark ms-1">12</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Sent <span class="badge bg-secondary ms-1">3</span>
</a>
</li>
</ul>
<!-- Positioned Badges für Benachrichtigungen -->
<button type="button" class="btn btn-primary position-relative">
Nachrichten
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">ungelesene Nachrichten</span>
</span>
</button>Die Navbar ist das Navigationselement einer Website. Bootstrap’s Navbar-Komponente löst die komplexe Aufgabe, eine Navigation zu erstellen, die auf allen Geräten funktioniert.
Eine vollständige Navbar besteht aus mehreren Teilen, die zusammenarbeiten:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<!-- Brand/Logo -->
<a class="navbar-brand" href="#">
<img src="logo.png" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
MeineFirma
</a>
<!-- Mobile Toggle Button -->
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Navigation umschalten">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible Navigation Content -->
<div class="collapse navbar-collapse" id="navbarNav">
<!-- Main Navigation Links -->
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Produkte</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Webentwicklung</a></li>
<li><a class="dropdown-item" href="#">App-Entwicklung</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Beratung</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
<!-- Right-aligned Content -->
<div class="d-flex">
<form class="d-flex me-3" role="search">
<input class="form-control me-2" type="search"
placeholder="Suchen..." aria-label="Search">
<button class="btn btn-outline-light" type="submit">Suchen</button>
</form>
<div class="navbar-nav">
<a class="nav-link" href="#">Anmelden</a>
</div>
</div>
</div>
</div>
</nav>Die wichtigsten Attribute erklärt:
data-bs-toggle="collapse" und
data-bs-target="#navbarNav" verbinden den Toggle-Button mit
dem kollabierbaren Inhalt. Das aria-expanded Attribut
informiert Screenreader über den aktuellen Zustand.
Der navbar-expand-* Modifier bestimmt, ab welcher
Bildschirmgröße die Navigation vollständig angezeigt wird:
<!-- Navbar kollapiert nie (immer erweitert) -->
<nav class="navbar navbar-expand navbar-light bg-light">
<!-- Inhalt -->
</nav>
<!-- Navbar kollapiert unter small (576px) -->
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<!-- Inhalt -->
</nav>
<!-- Navbar kollapiert unter medium (768px) -->
<nav class="navbar navbar-expand-md navbar-light bg-light">
<!-- Inhalt -->
</nav>
<!-- Navbar kollapiert unter large (992px) -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Inhalt -->
</nav>Bootstrap bietet verschiedene Navbar-Themes:
<!-- Light Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Dunkler Text auf hellem Hintergrund -->
</nav>
<!-- Dark Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- Heller Text auf dunklem Hintergrund -->
</nav>
<!-- Colored Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<!-- Heller Text auf farbigem Hintergrund -->
</nav>
<!-- Fixed Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<!-- Bleibt beim Scrollen oben -->
</nav>
<!-- Sticky Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
<!-- Wird sticky beim Scrollen -->
</nav>Bei fixed oder sticky Navbars müssen Sie Padding zum Body hinzufügen, um Überlappungen zu vermeiden:
<!-- CSS für fixed-top Navbar -->
<style>
body { padding-top: 56px; } /* Anpassen je nach Navbar-Höhe */
</style>List Groups zeigen verwandte Inhalte in einer strukturierten Liste an. Sie sind vielseitig und eignen sich für Navigation, Inhaltsverzeichnisse, oder strukturierte Daten.
<!-- Einfache List Group -->
<ul class="list-group">
<li class="list-group-item">Standard List Item</li>
<li class="list-group-item active">Aktives Item</li>
<li class="list-group-item">Normales Item</li>
<li class="list-group-item disabled">Deaktiviertes Item</li>
</ul>
<!-- List Group mit Links -->
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
Dashboard
</a>
<a href="#" class="list-group-item list-group-item-action">
Projekte
</a>
<a href="#" class="list-group-item list-group-item-action">
Team
</a>
<a href="#" class="list-group-item list-group-item-action disabled">
Einstellungen (gesperrt)
</a>
</div><ul class="list-group">
<li class="list-group-item">Standard Item</li>
<li class="list-group-item list-group-item-primary">Primary Item</li>
<li class="list-group-item list-group-item-success">Success Item</li>
<li class="list-group-item list-group-item-info">Info Item</li>
<li class="list-group-item list-group-item-warning">Warning Item</li>
<li class="list-group-item list-group-item-danger">Danger Item</li>
</ul>List Groups können komplexere Inhalte enthalten:
<!-- List Group mit Badges -->
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Inbox
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Sent
<span class="badge bg-secondary rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Drafts
<span class="badge bg-warning rounded-pill">1</span>
</li>
</ul>
<!-- List Group mit Custom Content -->
<div class="list-group">
<div class="list-group-item">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1">Website Redesign</h6>
<small>vor 3 Tagen</small>
</div>
<p class="mb-1">
Vollständige Überarbeitung der Unternehmenswebsite mit
modernem Design und verbesserter UX.
</p>
<div class="d-flex justify-content-between align-items-center">
<small>Zugewiesen an: Max Mustermann</small>
<span class="badge bg-warning">In Bearbeitung</span>
</div>
</div>
<div class="list-group-item">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1">Mobile App Development</h6>
<small class="text-muted">vor 1 Woche</small>
</div>
<p class="mb-1">
Entwicklung der iOS und Android Apps für den neuen Service.
</p>
<div class="d-flex justify-content-between align-items-center">
<small>Team: Mobile Development</small>
<span class="badge bg-success">Abgeschlossen</span>
</div>
</div>
</div>
<!-- Flush List Group (ohne Border) -->
<div class="list-group list-group-flush">
<div class="list-group-item">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="mb-1">E-Mail Benachrichtigungen</h6>
<small class="text-muted">Updates per E-Mail erhalten</small>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" checked>
</div>
</div>
</div>
<div class="list-group-item">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="mb-1">Push Notifications</h6>
<small class="text-muted">Browser-Benachrichtigungen</small>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox">
</div>
</div>
</div>
</div>Diese Komponenten bilden das Fundament für die meisten Bootstrap-Interfaces. Sie sind darauf ausgelegt, miteinander kombiniert zu werden und schaffen konsistente, zugängliche Benutzererfahrungen. Der Schlüssel liegt darin, sie entsprechend ihrem semantischen Zweck zu verwenden und die responsive Features zu nutzen, um auf allen Geräten optimale Ergebnisse zu erzielen.
Haben Sie bemerkt, wie jede Komponente einem spezifischen Kommunikationsziel dient? Cards strukturieren Inhalte, Alerts geben Feedback, Badges kennzeichnen Status, Navbars ermöglichen Navigation, und List Groups organisieren verwandte Informationen. Diese semantische Klarheit macht Interfaces nicht nur schöner, sondern auch funktionaler und zugänglicher.