Lernfabrik

🧱 Bootstrap-Lernseite: Zeilen und Spalten

In Bootstrap kannst du Inhalte in Zeilen (.row) und Spalten (.col-*) anordnen. Das sogenannte Grid-System besteht aus insgesamt 12 Spalten pro Zeile.

Hier unten siehst du ein Beispiel mit 3 Spalten, die jeweils 4 von 12 Teilen breit sind:

Start

Ein Beispieltext für die erste Spalte.

Überschrift 2

Ein weiterer Beispieltext für die zweite Spalte.

Überschrift 3

Ein weiterer Beispieltext für die dritte Spalte.

💡 Der zugehörige HTML-Code:

<div class="row mt-4">
  <div class="col-md-4">
    <h1>Start</h1>
    <p>Ein Beispieltext für die erste Spalte.</p>
  </div>
  <div class="col-md-4">
    <h1>Überschrift 2</h1>
    <p>Ein weiterer Beispieltext für die zweite Spalte.</p>
  </div>
  <div class="col-md-4">
    <h1>Überschrift 3</h1>
    <p>Ein weiterer Beispieltext für die dritte Spalte.</p>
  </div>
</div>
  • <div class="row"> → erstellt eine neue Zeile.
  • <div class="col-md-4"> → teilt die Zeile in drei gleich breite Spalten.
  • h1 → Überschrift.
  • p → Absatztext.
  • mt-4 → sorgt für Abstand nach oben (margin-top).

🖼️ Bilder in Bootstrap einfügen

In Bootstrap kannst du Bilder ganz einfach mit dem <img>-Tag einfügen. Um sie automatisch an die Größe des Containers anzupassen, verwendest du die Klasse .img-fluid.

Hier ein Beispiel mit drei Platzhalterbildern in einer Zeile:

Beispielbild 1

Frühling.

Beispielbild 2

Winter.

Beispielbild 3

Herbst.

💡 Beispiel-Code:

<div class="row">
  <div class="col-md-4">
    <img src="Frühling.jpg" class="img-fluid rounded border" alt="Beispielbild">
  </div>
  <div class="col-md-4">
    <img src="Winter.jpg" class="img-fluid rounded border" alt="Beispielbild">
  </div>
  <div class="col-md-4">
    <img src="Herbst.jpg" class="img-fluid rounded border" alt="Beispielbild">
  </div>
</div>
  • <img> → fügt ein Bild ein.
  • .img-fluid → macht das Bild responsiv (passt sich an die Breite an).
  • .rounded → fügt abgerundete Ecken hinzu.
  • .border → fügt einen Rahmen hinzu.
  • https://via.placeholder.com/300x200 → erzeugt ein Platzhalterbild (z. B. 300 × 200 Pixel).

🚀 Das war erst die erste Seite!

Auf der nächsten Seite lernst du, wie man Bootstrap-Cards verwendet – z. B. für kleine Beiträge oder Rezepte.

Weiter zur nächsten Seite

Klicke auf den Button, um zur Seite 2 zu gelangen.