Bootstrap Grid - Spaltenbeispiele
Allgemeiner Hinweis:
Jede Spalte hat standardmäßig einen leichten Einzug für deren Inhalt. Dieses Beispiel veranschaulicht diesen farblich. Alle Folgebeispiele markieren die Gesamtbreite der Spalte ohne Einzug.
.col-md-12
Drei gleich große Spalten in den Größen xs (Smartphone), sm (Tablet), md (Desktop), lg (Desktop und größer)
.col-xs-4
.col-xs-4
.col-xs-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
Drei ungleiche Spalten in den Größen xs (Smartphone), sm (Tablet), md (Desktop), lg (Desktop und größer)
.col-xs-3
.col-xs-6
.col-xs-3
.col-sm-3
.col-sm-6
.col-sm-3
.col-md-3
.col-md-6
.col-md-3
Zwei Spalten
.col-md-8
.col-md-4
.col-md-6
.col-md-6
Volle Breite, eine Spalte
Für die Nutzung der vollen Breite müssen keine Grid-Klassen verwendet werden.
Zwei Spalten mit einer Schachtelung innerhalb einer Spalte
.col-md-8
.col-md-6
.col-md-6
.col-md-4
Responsiver Text
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Responsive Bilder
