LU06.L01 - Bootstrap: Container & Spalten

Dies ist eine alte Version des Dokuments!

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS einbinden (CDN) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap JS (Bundle inkl. Popper.js) für interaktive Komponenten wie Dropdowns, Modals, Tooltips -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
<!-- Bootstrap verwendet vom CDN, also extern bezogen -->
<!-- Beispiel unter https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.css -->
<!-- Eigenes CSS nach dem Bootstrap-Link, um Borders sichtbar zu machen -->
<style>
.container, .container-fluid, .row, [class^="col-"] {
outline: 2px dashed red;
      }
</style>
</head>
<body>
<!-- container-fluid: nimmt immer 100% der Viewport-Breite ein (kein Breakpoint-Verhalten wie bei .container)
        p-5: padding auf allen Seiten, Stufe 5 (= 3rem, grösster Standardwert)
        bg-primary: Bootstrap-Theme-Farbe Blau als Hintergrund
        text-white: weisse Schriftfarbe (für Kontrast auf bg-primary)
        text-center: zentrierter Text -->
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p> 
</div>
<!-- container: feste, responsive Breite mit Breakpoints (z.B. 540px, 720px, 960px, 1140px, 1320px)
        mt-5: margin-top, Stufe 5 (= 3rem) → grosser Abstand zum vorherigen Element -->
<div class="container mt-5">
<!-- row: erzeugt eine Grid-Zeile, Container für die Spalten (col-*) -->
<div class="row">
<!-- col-sm-4: Spalte im 12-Spalten-Grid, ab Breakpoint "sm" (≥576px) genau 4/12 = 1/3 Breite
        Unterhalb von 576px stapeln sich die Spalten automatisch zu 100% Breite -->
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Dies ist die erste von drei Spalten im <code>.row

-Element. Jede Spalte trägt die Klasse

col-sm-4

, belegt also 4 von 12 Grid-Einheiten = 1/3 der Containerbreite.</p> <p>Ab einer Viewport-Breite von 576px (Breakpoint „sm“) stehen alle drei Spalten nebeneinander. Darunter (z.B. auf dem Smartphone) stapeln sie sich automatisch übereinander, da kein kleinerer Breakpoint wie

col-4

definiert wurde.</p> </div> <!– col-sm-4: zweite Spalte, gleiches Verhalten wie oben –>

<h3>Column 2</h3> <p>Die zweite Spalte verhält sich identisch zur ersten. Bootstrap berechnet die Breite automatisch aus dem Gutter (Innenabstand zwischen den Spalten, gesteuert über CSS-Variablen) und der verfügbaren Containerbreite.</p> <p>Da alle drei Spalten zusammen 12 Einheiten ergeben (4 + 4 + 4 = 12), füllen sie die gesamte Zeile exakt aus – ohne Überlauf in eine neue Zeile.</p>

<!– col-sm-4: dritte Spalte, gleiches Verhalten wie oben –>

<h3>Column 3</h3> <p>Die dritte Spalte schliesst die Zeile ab. Würde man eine vierte Spalte mit

col-sm-4

hinzufügen, ergäbe das 16 Einheiten – sie würde dann automatisch in eine neue Zeile umbrechen (Grid-Wrapping).</p> <p>Der rote, gestrichelte

outline

-Rahmen (siehe

&lt;style&gt;

oben) macht sichtbar, wo genau Container, Row und jede einzelne Spalte beginnen und enden.</p>

</div> </div> </body> </html> <code>