Bootstrap 5 Spickzettel

Hier finden Sie alle Klassen, die in unserem Projekt verwendet wurden, übersichtlich als Tabelle, als kompakte Liste zusammengefasst und als anwendbare Code-Beispiele.

1. Raster & Layout (Grid System)

Das Grid-System basiert auf 12 Spalten und dem "Mobile First" Prinzip. Es nutzt Breakpoints (Bildschirmbreiten), um das Layout anzupassen.

• .container: Zentrierter Hauptbereich
• .row: Zeile (für Spalten)
• .col-12: Volle Breite (oft für Smartphones)
• .col-md-8 / .col-md-4: Spalten ab Tablet-Größe (≥768px)
• .d-flex: Aktiviert Flexbox für das Element

2. Abstände (Spacing)

Setzt sich zusammen aus m (Margin) / p (Padding) + Seite (t, b, s, e) + Wert (0-5).

• .mb-4: Mittlerer Abstand nach unten
• .p-3: Mittlerer Innenabstand rundherum
• .py-5: Großer Innenabstand oben (Top) und unten (Bottom)

3. Farben & Typografie

• Hintergrund: .bg-primary (Blau), .bg-dark (Dunkelgrau), .bg-light (Hellgrau), .bg-white
• Text: .text-white, .text-muted (Grau/abgeschwächt)
• Links: .text-decoration-none (Entfernt den Unterstrich)
• Formatierung: .lead (Hebt Absatz hervor), .text-center (Zentriert Text)

4. Praktische Code-Beispiele

Beispiel 1: Responsive Blog-Karten nebeneinander

Nutzt das Grid-System: 1 Karte auf dem Handy (col-12), 2 auf Tablets (col-md-6) und 3 auf Desktops (col-lg-4).

<div class="row">
  <!-- Artikel 1 -->
  <div class="col-12 col-md-6 col-lg-4 mb-4">
    <div class="card h-100 shadow-sm">
      <div class="card-body">
        <h5 class="card-title">Mein erster Beitrag</h5>
        <p class="card-text">Dies ist ein kurzer Vorschautext für den Blog-Artikel.</p>
        <a href="#" class="btn btn-outline-primary btn-sm">Weiterlesen...</a>
      </div>
    </div>
  </div>
</div>

Beispiel 2: Ein Kontakt- oder Kommentarformular

<form action="verarbeiten.html">
  <div class="mb-3">
    <label for="nameInput" class="form-label">Ihr Name</label>
    <input type="text" class="form-control" id="nameInput" placeholder="Max Mustermann">
  </div>
  
  <div class="mb-3">
    <label for="textInput" class="form-label">Ihr Kommentar</label>
    <textarea class="form-control" id="textInput" rows="4"></textarea>
  </div>
  
  <button type="submit" class="btn btn-success">Kommentar absenden</button>
</form>

Beispiel 3: Tag-Leiste (Kategorien)

<div class="mt-4 p-3 bg-light rounded">
  <strong class="me-2">Themen:</strong>
  <a href="#" class="badge bg-primary text-decoration-none">#HTML5</a>
  <a href="#" class="badge bg-secondary text-decoration-none">#CSS3</a>
  <a href="#" class="badge bg-dark text-decoration-none">#Bootstrap5</a>
</div>