Grid System

Das "Grid System" von Bootstrap passt beinhaltet ein Spaltensystem, ist "responsiv" und lässt sich mit den Viewport-Angaben kombinieren.

Es basiert auf einer Einteilung in 12 Spalten.

span 1

span 4

span 8

span 6

span 12

Eine "Spalte" (col) sollte innerhalb einer "Zeile" (row) aufgebaut werden.

Um 3 gleiche Spalten zu bilden, können drei Absätze mit der entsprechenden Klasse versehen werden. Jede Spalte misst 1/3 der Gesamtbreite. 12 : 3 = 4 ergiebt folgende Klassenbezeichnung für eine Spalte:

<p class="col-sm-4"> ... </p>

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
    <meta charset=utf-8>
    <title>HTML5 Bootstrap Intern</title>
    <link rel="stylesheet" href="http://depot43.ch/unterlagen/themes/bootstrap/css/bootstrap.css">
    <style>
    
    div {border:1px solid silver;}
    
    </style>
</head>
<body>
<div class="row">
	<div class="col-sm-4">Spalte 1</div>
	<div class="col-sm-4">Spalte 2</div>
	<div class="col-sm-4">Spalte 3</div>
</div>
</body>
</html>


 

            

Anregungen:

Verändere die Werte der Gridklasse:
```
 col-sm-*
```

Füge zusätzliche div-Spalten hinzu:

<div class="col-sm-2">zusätzliche Spalte</div>

Achte darauf, dass der gesmatwert der Spaltenangaben zusammen 12 ergiebt.
(Tiefer Werte könne zu unerwarteten Ergebnissen führen.)