Grid system
Bootstrap beinhaltet ein anpassungsfähiges, Mobile-First-basiertes Flexbox-Raster, das bis zu 12 Spalten über verschiedene Geräte- oder Viewport-Größen skaliert. Dabei sind vordefinierte Klassen für einfache Layout-Optionen, sowie umfangreiche Mixins für die Erstellung von semantischeren Layouts.
Auto-layout columns
Equal-width
1 of 2
2 of 2
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
</div>
Setting one column width
1 of 3
2 of 3 (wider)
3 of 3
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Variable width content
1 of 3
Variable width content
3 of 3
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Equal-width multi-row
col
col
col
col
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
Responsive classes
All breakpoints
col-8
col-4
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
Stacked to horizontal
col-sm-8
col-sm-4
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
Mix and match
.col-12 .col-md-8
.col-6 .col-md-4
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Alignment
Vertical alignment
One of three columns
One of three columns
One of three columns
<div class="container">
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
One of three columns
One of three columns
One of three columns
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
Horizontal alignment
One of two columns
One of two columns
<div class="container">
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Infos: