Bootstrap 2 Spalten

Lass uns das ein wenig erklären:

• <div class="container"> ist das übergeordnete Element, das die gesamte Layoutstruktur umgibt.

• <div class="row"> ist eine Zeile innerhalb des Containers. In dieser Zeile kannst du mehrere Spalten anordnen.

• <div class="col-6"> ist eine Spalte innerhalb der Zeile. Die Klasse col-6 bedeutet, dass die Spalte eine Breite von 6 von 12 möglichen Teilen hat. Da wir zwei Spalten haben, haben beide eine Breite von 6 Teilen, was bedeutet, dass sie jeweils die Hälfte des Bildschirms einnehmen.

• Innerhalb jeder Spalte kannst du beliebigen Inhalt wie Überschriften, Absätze oder Bilder hinzufügen.

Das ist es! Mit Bootstrap kannst du einfach und schnell responsive Layouts erstellen, indem du die Klassen und Struktur verwendest, die bereits verfügbar sind.

<div class="container">
  <div class="row">
    <div class="col-6">
      <h3>Spalte 1</h3>
      <p>Dies ist der Inhalt der ersten Spalte.</p>
    </div>
    <div class="col-6">
      <h3>Spalte 2</h3>
      <p>Dies ist der Inhalt der zweiten Spalte.</p>
    </div>
  </div>
</div>