Bootstrap-raster - Gestapeld-naar-horizontaal
Bootstrap-rastervoorbeeld: gestapeld-naar-horizontaal
We zullen een basisrastersysteem creëren dat gestapeld begint op extra kleine apparaten, voordat het horizontaal wordt op grotere apparaten.
Het volgende voorbeeld toont een eenvoudige "gestapelde-naar-horizontale" lay-out met twee kolommen, wat betekent dat het resulteert in een 50%/50% splitsing op alle schermen, behalve voor extra kleine schermen, die automatisch worden gestapeld (100%):
Voorbeeld: gestapeld-naar-horizontaal
<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Tip: De getallen in de .col-sm-*klassen geven aan hoeveel kolommen de div moet beslaan (van de 12). Dus, .col-sm-1overspant 1 kolom, .col-sm-4overspant 4 kolommen,
.col-sm-6overspant 6 kolommen, etc.
Let op: Zorg ervoor dat de som altijd 12 is!
Tip: je kunt elke lay-out met vaste breedte veranderen in een lay-out met volledige breedte door de .containerklasse te wijzigen in .container-fluid:
Voorbeeld: Vloeistofreservoir
<div class="container-fluid">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>