1 · Was ist Bootstrap?

Bootstrap ist das beliebteste CSS-Framework der Welt. Es wurde 2011 von Twitter entwickelt und ist heute Open Source. Mit Bootstrap sparst du dir hunderte Zeilen CSS — es stellt dir fertige Designs, Layouts und interaktive Komponenten zur Verfügung.

Was kann Bootstrap?

Responsives Layout

Fertige Designs

100+ Komponenten

Mobile-First

Bootstrap einbinden (CDN — empfohlen für Anfänger)

Du musst nichts herunterladen. Füge diese zwei Zeilen in deine HTML-Datei ein:

HTML

<!-- Im <head> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Direkt vor </body> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

💡 CDN (Content Delivery Network) bedeutet: Die Dateien werden direkt von einem schnellen Server im Internet geladen — du brauchst sie nicht lokal zu speichern.

2 · HTML-Grundstruktur

Jede Bootstrap-Seite braucht dieses Grundgerüst. Ohne <meta name="viewport"> sieht die Seite auf dem Handy falsch aus.

Vorlage — index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">

  <!-- Pflicht für Mobilgeräte! -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Meine erste Bootstrap-Seite</title>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- Dein eigenes CSS (immer NACH Bootstrap!) -->
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- Dein Inhalt hier -->
  <div class="container">
    <h1 class="mt-4">Hallo Bootstrap!</h1>
    <p class="lead">Meine erste Seite mit Bootstrap 5.</p>
  </div>

  <!-- Bootstrap JS (ganz unten, für schnelles Laden) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Der `.container`

Bootstrap nutzt Container als äußere Hülle. Es gibt drei Varianten:

Klasse	Beschreibung	Beispiel
`.container`	Feste Maximalbreite, zentriert	Für normale Seiten
`.container-fluid`	Immer 100% Breite	Für volle Breite
`.container-lg`	Fluid bis lg, dann fest	Flexibler Mittelweg

⚠️ Wichtig: Dein eigenes CSS immer nach Bootstrap einbinden — sonst überschreibt Bootstrap deine Stile!

3 · Typography (Texte & Überschriften)

Bootstrap setzt automatisch eine saubere, gut lesbare Schrift. Mit Utility-Klassen kannst du Texte einfach gestalten.

Überschriften

HTML

<h1>Überschrift H1 — 2.5rem</h1>
<h2>Überschrift H2 — 2rem</h2>
<h3>Überschrift H3 — 1.75rem</h3>
<h4>Überschrift H4 — 1.5rem</h4>
<h5>Überschrift H5 — 1.25rem</h5>
<h6>Überschrift H6 — 1rem</h6>

<!-- Größere Anzeige-Überschriften -->
<h1 class="display-1">Display 1</h1>
<h1 class="display-4">Display 4</h1>

Vorschau:

Überschrift H1

Überschrift H2

Überschrift H3

Überschrift H4

Überschrift H5

Überschrift H6

Display 4

Absätze & Textstile

HTML

<p class="lead">Einleitungstext (etwas größer, heller)</p>
<p>Normaler <strong>fetter Text</strong> und <em>kursiver Text</em></p>
<p class="text-muted">Grauer Hilfstext</p>
<p><small>Kleiner Text</small> | <mark>Markiert</mark> | <del>Durchgestrichen</del></p>
<p><code>Inline Code</code> sieht so aus</p>
<blockquote class="blockquote">
  <p>"Ein Zitat in voller Schönheit."</p>
  <footer class="blockquote-footer">Max Mustermann</footer>
</blockquote>

Einleitungstext (etwas größer, heller)

Normaler fetter Text und kursiver Text

Grauer Hilfstext

Kleiner Text | Markiert | ~~Durchgestrichen~~

Inline Code sieht so aus

"Ein Zitat in voller Schönheit."

Max Mustermann

Textausrichtung & Schriftgewicht

HTML

<p class="text-start">Linksbündig (Standard)</p>
<p class="text-center">Zentriert</p>
<p class="text-end">Rechtsbündig</p>

<p class="fw-light">Leicht (300)</p>
<p class="fw-normal">Normal (400)</p>
<p class="fw-semibold">Halbfett (600)</p>
<p class="fw-bold">Fett (700)</p>

<p class="text-uppercase">Großbuchstaben</p>
<p class="text-lowercase">Kleinbuchstaben</p>
<p class="text-capitalize">erster buchstabe groß</p>

4 · Das Grid-System

Das Grid ist das Fundament von Bootstrap-Layouts. Es unterteilt jede Zeile in 12 Spalten. Du bestimmst, wie viele Spalten ein Element belegen soll.

💡 Regel: Spalten immer in einer .row und die .row immer in einem .container.

Grundprinzip

HTML

<div class="container">
  <div class="row">

    <div class="col-12">Volle Breite (12/12)</div>

    <div class="col-6">Hälfte</div>
    <div class="col-6">Hälfte</div>

    <div class="col-4">Ein Drittel</div>
    <div class="col-4">Ein Drittel</div>
    <div class="col-4">Ein Drittel</div>

    <div class="col-3">¼</div>
    <div class="col-3">¼</div>
    <div class="col-3">¼</div>
    <div class="col-3">¼</div>

  </div>
</div>

Vorschau:

col-12

col-6

col-4

col-3

col-8

col-4

Responsive Breakpoints

Du kannst für jede Bildschirmgröße unterschiedliche Spaltenbreiten definieren:

Klasse	Greift ab	Typisches Gerät
`col-`	0px (immer)	Alle Geräte
`col-sm-`	576px	Kleines Handy (quer)
`col-md-`	768px	Tablet
`col-lg-`	992px	Laptop
`col-xl-`	1200px	Desktop
`col-xxl-`	1400px	Großer Monitor

Praxisbeispiel — 3-Spalten-Layout

<div class="container">
  <div class="row g-3">
    <!-- Handy: volle Breite | Tablet: halb | Desktop: ein Drittel -->
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">Produkt 1</div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">Produkt 2</div>
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card">Produkt 3</div>
    </div>
  </div>
</div>

📱 → 100% | 💻 → 50% | 🖥 → 33%

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

💡 g-3 ist der "Gutter" (Abstand zwischen den Spalten). g-0 = kein Abstand, g-5 = maximaler Abstand.

5 · Abstände (Spacing)

Bootstrap hat ein leistungsstarkes System für Innen- und Außenabstände. Du brauchst kaum noch selbst CSS für Abstände schreiben.

Syntax

Das Muster lautet: {eigenschaft}{seite}-{größe}

Eigenschaft	Seite	Größe (0–5, auto)
`m` = margin (Außen) `p` = padding (Innen)	`t` = top `b` = bottom `s` = start (links) `e` = end (rechts) `x` = horizontal `y` = vertikal (nichts) = alle Seiten	`0` = 0px `1` = 4px `2` = 8px `3` = 16px `4` = 24px `5` = 48px `auto` = automatisch

Beispiele

<div class="mt-3">Oben 16px Abstand</div>
<div class="mb-5">Unten 48px Abstand</div>
<div class="px-4">Links & Rechts 24px Innenabstand</div>
<div class="py-2">Oben & Unten 8px Innenabstand</div>
<div class="m-3">Rundum 16px Außenabstand</div>
<div class="p-4">Rundum 24px Innenabstand</div>

<!-- Zentrieren mit mx-auto -->
<div class="mx-auto" style="width: 200px;">Zentriert</div>

Ohne extra Abstand

p-4 (24px Innenabstand rundum)

px-5 py-1

mx-auto: zentriert

6 · Farben & Hintergründe

Bootstrap hat 8 Hauptfarben mit Namen. Diese Namen werden überall konsistent verwendet — in Texten, Hintergründen, Buttons, Alerts usw.

primary

secondary

success

danger

warning

info

dark

light

Textfarben

<p class="text-primary">Blauer Text</p>
<p class="text-success">Grüner Text</p>
<p class="text-danger">Roter Text</p>
<p class="text-warning">Gelber Text</p>
<p class="text-muted">Grauer Text</p>
<p class="text-white bg-dark">Weißer Text auf Schwarz</p>

Hintergrundfarben mit Transparenz

<div class="bg-primary bg-opacity-25">25% Blau</div>
<div class="bg-primary bg-opacity-50">50% Blau</div>
<div class="bg-primary bg-opacity-75">75% Blau</div>
<div class="bg-primary">100% Blau</div>

bg-opacity-25

bg-opacity-50

bg-opacity-75

bg-primary (100%)

Eigene Farben (Custom CSS)

style.css

/* Bootstrap-Farbe überschreiben */
:root {
  --bs-primary: #e63946;       /* Rot statt Blau */
  --bs-primary-rgb: 230,57,70; /* Für opacity-Varianten */
}

/* Eigene Klassen */
.bg-brand {
  background-color: #2ec4b6;
}
.text-brand {
  color: #2ec4b6;
}

7 · Buttons

Buttons werden mit .btn + einer Farbklasse erstellt. Sie funktionieren auf <button>, <a> und <input>.

Alle Button-Farben

HTML

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>

Outline-Buttons (transparent)

HTML

<button class="btn btn-outline-primary">Outline Primary</button>
<button class="btn btn-outline-danger">Outline Danger</button>
<button class="btn btn-outline-success">Outline Success</button>

Größen & Zustände

HTML

<!-- Größen -->
<button class="btn btn-primary btn-lg">Groß</button>
<button class="btn btn-primary">Normal</button>
<button class="btn btn-primary btn-sm">Klein</button>

<!-- Volle Breite -->
<button class="btn btn-success w-100">Volle Breite</button>

<!-- Deaktiviert -->
<button class="btn btn-primary" disabled>Deaktiviert</button>

<!-- Mit Icon (Bootstrap Icons) -->
<button class="btn btn-primary">
  <i class="bi bi-download me-1"></i> Herunterladen
</button>

<!-- Lade-Button -->
<button class="btn btn-secondary" disabled>
  <span class="spinner-border spinner-border-sm me-2"></span>
  Wird geladen...
</button>

8 · Formulare

Bootstrap macht Formulare schön und funktional. Die wichtigsten Klassen: form-label, form-control, form-select, form-check.

Vollständiges Kontaktformular

HTML

<form>
  <!-- Zwei Felder nebeneinander -->
  <div class="row g-3">
    <div class="col-md-6">
      <label class="form-label">Vorname</label>
      <input type="text" class="form-control" placeholder="Max">
    </div>
    <div class="col-md-6">
      <label class="form-label">Nachname</label>
      <input type="text" class="form-control" placeholder="Mustermann">
    </div>
  </div>

  <div class="mt-3">
    <label class="form-label">E-Mail *</label>
    <input type="email" class="form-control" required>
    <div class="form-text">Wir geben deine E-Mail niemals weiter.</div>
  </div>

  <div class="mt-3">
    <label class="form-label">Betreff</label>
    <select class="form-select">
      <option>Allgemeine Anfrage</option>
      <option>Technischer Support</option>
      <option>Feedback</option>
    </select>
  </div>

  <div class="mt-3">
    <label class="form-label">Nachricht</label>
    <textarea class="form-control" rows="4"></textarea>
  </div>

  <!-- Checkboxen & Radio -->
  <div class="mt-3">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="newsletter">
      <label class="form-check-label" for="newsletter">Newsletter abonnieren</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="kontakt" id="r1" checked>
      <label class="form-check-label" for="r1">Kontakt per E-Mail</label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="kontakt" id="r2">
      <label class="form-check-label" for="r2">Kontakt per Telefon</label>
    </div>
  </div>

  <div class="mt-3">
    <label class="form-label">Zufriedenheit: <span id="rangeVal">5</span>/10</label>
    <input type="range" class="form-range" min="1" max="10" value="5"
           oninput="document.getElementById('rangeVal').textContent=this.value">
  </div>

  <button type="submit" class="btn btn-primary mt-4 w-100">
    <i class="bi bi-send me-1"></i> Absenden
  </button>
</form>

Vorname

Nachname

E-Mail *

Wir geben deine E-Mail niemals weiter.

Betreff

Nachricht

Newsletter abonnieren

Kontakt per E-Mail

Kontakt per Telefon

Zufriedenheit: 5/10

Validierung

HTML + CSS

<!-- Gültig -->
<input type="text" class="form-control is-valid" value="Max Mustermann">
<div class="valid-feedback">Sieht gut aus!</div>

<!-- Ungültig -->
<input type="email" class="form-control is-invalid" value="kein-email">
<div class="invalid-feedback">Bitte gib eine gültige E-Mail ein.</div>

Sieht gut aus!

Bitte gib eine gültige E-Mail ein.

9 · Cards (Karten)

Cards sind die vielseitigsten Inhalts-Container in Bootstrap. Sie können Bilder, Text, Buttons und mehr enthalten.

Vollständige Card

<div class="card shadow" style="max-width: 320px;">
  <img src="bild.jpg" class="card-img-top" alt="Produktbild">
  <div class="card-header text-bg-primary">
    Kategorie
  </div>
  <div class="card-body">
    <h5 class="card-title">Produktname</h5>
    <p class="card-text text-muted">Eine kurze Beschreibung des Produkts.</p>
    <div class="d-flex justify-content-between align-items-center">
      <span class="fw-bold fs-5">€29,99</span>
      <button class="btn btn-primary btn-sm">In den Warenkorb</button>
    </div>
  </div>
  <div class="card-footer text-muted small">
    ⭐⭐⭐⭐⭐ 4.8 (128 Bewertungen)
  </div>
</div>

🎧

Elektronik

Kopfhörer Pro X

Kabellos, 30h Akku, aktive Geräuschunterdrückung.

€89,99

⭐⭐⭐⭐⭐ 4.9

📚

Bildung

Webentwicklung Kurs

HTML, CSS, JavaScript & mehr in 40 Stunden.

Kostenlos

⭐⭐⭐⭐ 4.6

10 · Navbar (Navigation)

Die Navbar ist die Hauptnavigation deiner Seite. Sie passt sich automatisch für Mobilgeräte an (Hamburger-Menü).

HTML

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">

    <!-- Logo / Brand -->
    <a class="navbar-brand fw-bold" href="#">MeineLogo</a>

    <!-- Hamburger-Button (für Mobil) -->
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navMenu">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Links -->
    <div class="collapse navbar-collapse" id="navMenu">
      <ul class="navbar-nav me-auto">
        <li class="nav-item"><a class="nav-link active" href="#">Start</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Über uns</a></li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
            Produkte
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Kategorie A</a></li>
            <li><a class="dropdown-item" href="#">Kategorie B</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Alle ansehen</a></li>
          </ul>
        </li>
      </ul>
      <!-- Rechte Seite -->
      <form class="d-flex gap-2">
        <input class="form-control" type="search" placeholder="Suchen...">
        <button class="btn btn-outline-light" type="submit">Suchen</button>
      </form>
    </div>
  </div>
</nav>

👆 Klicke auf "Produkte" für das Dropdown-Menü!

11 · Alerts, Badges & Toasts

Alerts

HTML

<div class="alert alert-success">
  <i class="bi bi-check-circle me-2"></i> Erfolgreich gespeichert!
</div>

<div class="alert alert-warning alert-dismissible fade show">
  <strong>Achtung!</strong> Deine Sitzung läuft ab.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

<div class="alert alert-danger">
  <h5 class="alert-heading">Fehler!</h5>
  <p>Die Verbindung konnte nicht hergestellt werden.</p>
  <hr>
  <p class="mb-0">Bitte versuche es später erneut.</p>
</div>

Erfolgreich gespeichert!

Achtung! Deine Sitzung läuft ab.

Fehler!

Die Verbindung konnte nicht hergestellt werden.

Badges

HTML

<span class="badge bg-primary">Neu</span>
<span class="badge bg-danger rounded-pill">12</span>
<span class="badge bg-success">Aktiv</span>

<!-- In Überschrift eingebettet -->
<h4>Nachrichten <span class="badge bg-danger">5</span></h4>

<!-- Auf Button -->
<button class="btn btn-primary position-relative">
  Warenkorb
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">3</span>
</button>

Neu 12 Aktiv Beta

Nachrichten 5

12 · Modal & Offcanvas

Modal (Popup-Fenster)

HTML

<!-- Auslöser-Button -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#meinModal">
  Modal öffnen
</button>

<!-- Modal-Struktur -->
<div class="modal fade" id="meinModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title">Bestätigung</h5>
        <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        Möchtest du diesen Eintrag wirklich löschen?
      </div>

      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
        <button class="btn btn-danger">Löschen</button>
      </div>

    </div>
  </div>
</div>

Offcanvas (Seitenpanel)

HTML

<button class="btn btn-secondary" data-bs-toggle="offcanvas" data-bs-target="#seitenPanel">
  Panel öffnen
</button>

<div class="offcanvas offcanvas-end" id="seitenPanel">
  <div class="offcanvas-header bg-dark text-white">
    <h5 class="offcanvas-title">Einstellungen</h5>
    <button class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    Hier kommt der Inhalt des Seitenpanels.
  </div>
</div>

13 · Flexbox-Hilfsklassen

Bootstrap baut auf CSS Flexbox auf. Mit Utility-Klassen kannst du Elemente ausrichten, verteilen und anordnen — ohne eigenes CSS.

Ausrichtung

<!-- Flexbox aktivieren -->
<div class="d-flex">...</div>

<!-- Horizontal ausrichten -->
<div class="d-flex justify-content-start">Links</div>
<div class="d-flex justify-content-center">Mitte</div>
<div class="d-flex justify-content-end">Rechts</div>
<div class="d-flex justify-content-between">Verteilt</div>

<!-- Vertikal ausrichten -->
<div class="d-flex align-items-start">Oben</div>
<div class="d-flex align-items-center">Mitte</div>
<div class="d-flex align-items-end">Unten</div>

<!-- Zeilenumbruch -->
<div class="d-flex flex-wrap gap-2">Umgebrochen</div>

<!-- Richtung -->
<div class="d-flex flex-column">Untereinander</div>

justify-content:

A

B

C

A

B

C

flex-column + gap:

Element 1

Element 2

Element 3

Häufige Kombinationen

Praxistipps

<!-- Element perfekt zentrieren -->
<div class="d-flex justify-content-center align-items-center" style="height:200px">
  <p>Ich bin perfekt zentriert!</p>
</div>

<!-- Header mit Logo links, Button rechts -->
<div class="d-flex justify-content-between align-items-center p-3">
  <h5 class="mb-0">MeineLogo</h5>
  <button class="btn btn-primary btn-sm">Anmelden</button>
</div>

<!-- Karten-Footer -->
<div class="d-flex justify-content-between align-items-center">
  <span class="text-muted small">Vor 2 Stunden</span>
  <button class="btn btn-outline-primary btn-sm">Mehr</button>
</div>

14 · Praxisprojekt: Landingpage

Jetzt kombinieren wir alles! Hier ist eine vollständige, einfache Landingpage — kopiere den Code und öffne ihn im Browser.

landingpage.html — Vollständiges Beispiel

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TechStart — Dein Startup</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
  <style>
    .hero { background: linear-gradient(135deg, #0d6efd, #6610f2); min-height: 80vh; }
    .feature-icon { width: 60px; height: 60px; border-radius: 12px; }
  </style>
</head>
<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
  <div class="container">
    <a class="navbar-brand fw-bold">🚀 TechStart</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#n">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="n">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
        <li class="nav-item"><a class="nav-link" href="#preise">Preise</a></li>
        <li class="nav-item"><a class="nav-link" href="#kontakt">Kontakt</a></li>
      </ul>
      <a class="btn btn-primary ms-3 btn-sm" href="#kontakt">Kostenlos starten</a>
    </div>
  </div>
</nav>

<!-- Hero -->
<section class="hero d-flex align-items-center text-white text-center">
  <div class="container">
    <span class="badge bg-white text-primary mb-3">Neu in 2024</span>
    <h1 class="display-4 fw-bold">Die Zukunft des Arbeitens</h1>
    <p class="lead opacity-75 mx-auto" style="max-width:500px">
      Produktiver, schneller, smarter. Starte heute kostenlos.
    </p>
    <div class="d-flex gap-3 justify-content-center mt-4">
      <a href="#" class="btn btn-light btn-lg fw-semibold">
        <i class="bi bi-play-fill me-1"></i> Demo ansehen
      </a>
      <a href="#kontakt" class="btn btn-outline-light btn-lg">Loslegen</a>
    </div>
  </div>
</section>

<!-- Features -->
<section class="py-5" id="features">
  <div class="container">
    <h2 class="text-center fw-bold mb-5">Warum TechStart?</h2>
    <div class="row g-4">
      <div class="col-md-4">
        <div class="card border-0 shadow-sm h-100 text-center p-4">
          <div class="feature-icon bg-primary bg-opacity-10 d-flex align-items-center justify-content-center mx-auto mb-3">
            <i class="bi bi-lightning-fill text-primary fs-4"></i>
          </div>
          <h5>Blitzschnell</h5>
          <p class="text-muted">Optimiert für maximale Geschwindigkeit auf allen Geräten.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card border-0 shadow-sm h-100 text-center p-4">
          <div class="feature-icon bg-success bg-opacity-10 d-flex align-items-center justify-content-center mx-auto mb-3">
            <i class="bi bi-shield-check text-success fs-4"></i>
          </div>
          <h5>Sicher</h5>
          <p class="text-muted">Ende-zu-Ende Verschlüsselung für deine Daten.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card border-0 shadow-sm h-100 text-center p-4">
          <div class="feature-icon bg-warning bg-opacity-10 d-flex align-items-center justify-content-center mx-auto mb-3">
            <i class="bi bi-graph-up-arrow text-warning fs-4"></i>
          </div>
          <h5>Skalierbar</h5>
          <p class="text-muted">Wächst mit deinem Unternehmen — von 1 bis 10.000 Nutzer.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Preise -->
<section class="py-5 bg-light" id="preise">
  <div class="container">
    <h2 class="text-center fw-bold mb-5">Transparente Preise</h2>
    <div class="row g-4 justify-content-center">
      <div class="col-md-4">
        <div class="card border-0 shadow-sm h-100">
          <div class="card-body text-center p-4">
            <h5>Starter</h5>
            <p class="display-5 fw-bold">€0</p>
            <p class="text-muted">/Monat</p>
            <ul class="list-unstyled text-start mt-3">
              <li><i class="bi bi-check text-success me-2"></i>3 Projekte</li>
              <li><i class="bi bi-check text-success me-2"></i>5 GB Speicher</li>
              <li class="text-muted"><i class="bi bi-x me-2"></i>Kein Support</li>
            </ul>
            <a href="#" class="btn btn-outline-primary w-100 mt-3">Kostenlos starten</a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card border-primary shadow-lg h-100">
          <div class="card-header text-bg-primary text-center">
            ⭐ Empfohlen
          </div>
          <div class="card-body text-center p-4">
            <h5>Pro</h5>
            <p class="display-5 fw-bold">€19</p>
            <p class="text-muted">/Monat</p>
            <ul class="list-unstyled text-start mt-3">
              <li><i class="bi bi-check text-success me-2"></i>Unbegrenzte Projekte</li>
              <li><i class="bi bi-check text-success me-2"></i>100 GB Speicher</li>
              <li><i class="bi bi-check text-success me-2"></i>Prioritäts-Support</li>
            </ul>
            <a href="#" class="btn btn-primary w-100 mt-3">Jetzt upgraden</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Kontakt -->
<section class="py-5" id="kontakt">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <h2 class="fw-bold text-center mb-4">Kontakt aufnehmen</h2>
        <form>
          <div class="mb-3">
            <input type="text" class="form-control form-control-lg" placeholder="Dein Name">
          </div>
          <div class="mb-3">
            <input type="email" class="form-control form-control-lg" placeholder="E-Mail">
          </div>
          <div class="mb-3">
            <textarea class="form-control" rows="4" placeholder="Deine Nachricht..."></textarea>
          </div>
          <button type="submit" class="btn btn-primary btn-lg w-100">
            <i class="bi bi-send me-2"></i>Nachricht senden
          </button>
        </form>
      </div>
    </div>
  </div>
</section>

<!-- Footer -->
<footer class="bg-dark text-white py-4 text-center">
  <p class="mb-0">© 2024 TechStart · Erstellt mit ❤️ und Bootstrap 5</p>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

🎉 Das war's! Du hast nun alle Grundlagen, um echte Webseiten mit Bootstrap 5 zu bauen. Als nächstes: Probiere den Code oben aus, verändere Farben, Texte und Layouts — so lernst du am schnellsten!

Bootstrap 5 für Anfänger

1 · Was ist Bootstrap?

Was kann Bootstrap?

Bootstrap einbinden (CDN — empfohlen für Anfänger)

2 · HTML-Grundstruktur

Der .container

3 · Typography (Texte & Überschriften)

Überschriften

Überschrift H1

Überschrift H2

Überschrift H3

Überschrift H4

Überschrift H5

Überschrift H6

Absätze & Textstile

Textausrichtung & Schriftgewicht

4 · Das Grid-System

Grundprinzip

Responsive Breakpoints

5 · Abstände (Spacing)

Syntax

6 · Farben & Hintergründe

Eigene Farben (Custom CSS)

7 · Buttons

Alle Button-Farben

Outline-Buttons (transparent)

Größen & Zustände

8 · Formulare

Vollständiges Kontaktformular

Validierung

9 · Cards (Karten)

Kopfhörer Pro X

Webentwicklung Kurs

10 · Navbar (Navigation)

11 · Alerts, Badges & Toasts

Alerts

Fehler!

Badges

Nachrichten 5

12 · Modal & Offcanvas

Modal (Popup-Fenster)

Offcanvas (Seitenpanel)

13 · Flexbox-Hilfsklassen

Häufige Kombinationen

14 · Praxisprojekt: Landingpage

🎓 Glückwunsch!

Bestätigung

Einstellungen

Benachrichtigungen

Darstellung

Der `.container`