LU13b - Container und Spalten

Bootstrap benötigt einen Container welcher die Inhalte einschliesst. Du hast die Wahl zwischen einem dynamischen Container und einem Container der immer die maximale Bildschirmbreite nutzt.

Innerhalb des Containers arbeitet Bootstrap mit einem Layout das zwölf Spalten umfasst. Du kannst für jedes Element definieren, wieviel Spalten es belegen soll.

Siehe auch bootstrap - containers und w3schools - containers

Die Klassen .container und .container-fluid dienen als Basis für die Formatierung der Elemente in Bootstrap. Bei .container hat das HTML-Element eine vordefinierte Grösse, die sich abhängig von der Fenstergrösse anpasst. Falls du immer die ganze Breite des Fensters nutzen willst, wählst du die Klasse .container-fluid.

Es stellt sich die Frage, welchem HTML-Element wir die Container-Klasse zuordnen sollen. In den meisten Beispielen wird ein separates <div>-Element verwendet. Aus meiner Sicht ist es sinnvoller, die bereits vorhandenen Elemente wie <body>, <main>, <header>, <nav>, … zu verwenden.

Im einfachsten Fall haben alle Teile meiner Webseite die gleiche Breite. In diesem Fall kann ich die .container-Klasse im <body>-Tag zuweisen.

<html>
...
<body class='container'>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
  </footer>
</body>
</html>

Bei komplexeren Layouts soll vielleicht der Hauptinhalt eine fest Breite haben, die Kopf- und Fusszeilen aber die ganze Fensterbreite nutzen. Dies kannst du wie folgt umsetzen:

<html>
...
<body>
  <header class='container-fluid'>
    ...
  </header>
  <main class='container'>
    ...
  </main>
  <footer class='container-fluid'>
  </footer>
</body>
</html>

Siehe auch bootstrap - grid und w3schools - grid basic

Innerhalb eines Containers arbeitet Bootstrap mit einem Raster von 12 Spalten. Du kannst für jedes HTML-Element definieren, wie viele Spalten es bei welcher Fenstergrösse es belegen soll. Dafür gibt es eine ganze Menge von Klassen, die mit col- anfangen. Dadurch passt sich dein Layout automatisch dem verfügbaren Platz an.

Sollen zwei oder mehr Elemente nebeneinander stehen, so müssen sie in einem Eltern-Element mit der Klasse row eingebettet sein. Jedes HTML-Element mit einer col-nn-nn-Klasse ist selber auch wieder in 12 Spalten aufgeteilt.