3-spaltiges Layout ☼ BootstrapWorld.de

3-spaltiges Layout zum Ausprobieren und Weiterverwenden

Nach Vorstellung des Standard-Layouts mit 2 Spalten, kann man mit Bootstrap auch komplexe Layouts schnell gestalten.

Als Beispiel wird ein 3-spaltiges Layout inklusive Header und Footer definiert.

Der Header und Footer nutzen jeweils die komplette Layoutbreite (.col-md-12).

Der Inhaltsbereich gliedert sich in drei Spalten:

linke Sidebar (.col-md-3)
Inhalt in der Mitte (.col-md-6)
rechte Sidebar (.col-md-3)

Der Inhalt nutzt also genau die halbe Breite des Layouts. Der Rest wird durch die Sidebars ausgefüllt.

Header, Inhaltsbereit und Footer kommen jeweils in eine separate Rasterreihe (.row)

<div class="container"> <div class="row"> <div class="col-md-12"><h2>Header</h2></div> </div> <div class="row"> <div class="col-md-3"><h2>Sidebar Links</h2></div> <div class="col-md-6"><h2>Inhalt</h2></div> <div class="col-md-3"><h2>Sidebar Rechts</h2></div> </div> <div class="row"> <div class="col-md-12"><h2>Footer</h2></div> </div> </div>