🧱 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>

🖼️ 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>