Grid Breakpoints

	xs für Smartphones <768px	sm für Tablets >=768px	md für Desktops >=992px	lg grosse Desktops >=1200px
Container Breite	(auto)	750px	970px	1170px
Klasse (ganze Breite)	.col-xs-12	.col-sm-12	.col-md-12	.col-lg-12
Spalte Breite	Auto	~62px	~81px	~97px
Gutter (Abstand)	30px (15px pro Seite)	30px (15px pro Seite)	30px (15px pro Seite)	30px (15px pro Seite)

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-xs-12 col-sm-6 col-md-4 col-lg-3">Spalte 1</div>
	<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">Spalte 2</div>
	<div class="col-xs-12 col-sm-12 col-md-4 col-lg-6">Spalte 3</div>
</div>
</body>
</html>


 

            

Anregungen:

Untersuche das Verhalten der Spalten, wenn die Breite des Browserfensters verändert wird:

bei 1170px
bei 970px
bei 750px
unter 750px

Die Fensterbreite lässt sich mit einem Debugger im Browser (Untersuchen) präzise simulieren.