Bootstrap 4 -rastervoorbeelden
Hieronder hebben we enkele voorbeelden van Bootstrap 4-rasterlay-outs verzameld.
Drie gelijke kolommen
Gebruik de .colklasse op een bepaald aantal elementen en Bootstrap zal herkennen hoeveel elementen er zijn (en kolommen van gelijke breedte maken). In het onderstaande voorbeeld gebruiken we drie col-elementen, die elk een breedte van 33,33% krijgen.
Voorbeeld
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div
class="col">col</div>
</div>
Drie gelijke kolommen met getallen
U kunt ook cijfers gebruiken om de kolombreedte te bepalen. Zorg ervoor dat de som 12 of minder is (het is niet vereist dat u alle 12 beschikbare kolommen gebruikt):
Voorbeeld
<div class="row">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
<div
class="col-4">col-4</div>
</div>
Drie ongelijke kolommen
Om ongelijke kolommen te maken, moet u getallen gebruiken. In het volgende voorbeeld wordt een verdeling van 25%/50%/25% gemaakt:
Voorbeeld
<div class="row">
<div class="col-3">col-3</div>
<div class="col-6">col-6</div>
<div
class="col-3">col-3</div>
</div>
Eén kolombreedte instellen
Het is echter voldoende om slechts de breedte van één kolom in te stellen en de kolommen van de zusterkolommen er automatisch omheen te vergroten. In het volgende voorbeeld wordt een verdeling van 25%/50%/25% gemaakt:
Voorbeeld
<div class="row">
<div class="col">col</div>
<div class="col-6">col-6</div>
<div
class="col">col</div>
</div>
Meer gelijke kolommen
Voorbeeld
<!-- Two equal columns -->
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<!-- Four equal columns -->
<div class="row">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
<!-- Six equal columns -->
<div class="row">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3
of 6</div>
<div class="col">4 of 6</div>
<div class="col">5
of 6</div>
<div class="col">6 of 6</div>
</div>
Rij Cols
Je kunt ook bepalen hoeveel kolommen er naast elkaar moeten verschijnen (ongeacht hoeveel cols), met de .row-cols-*klassen:
Voorbeeld
<div class="row row-cols-1">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row row-cols-2">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
<div class="row row-cols-3">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3
of 6</div>
<div class="col">4 of 6</div>
<div class="col">5
of 6</div>
<div class="col">6 of 6</div>
</div>
Meer ongelijke kolommen
Voorbeeld
<!-- Two Unequal
Columns -->
<div class="row">
<div class="col-8">1 of 2</div>
<div class="col-4">2 of 2</div>
</div>
<!-- Four Unequal Columns -->
<div class="row">
<div class="col-2">1 of 4</div>
<div class="col-2">2 of 4</div>
<div class="col-2">3
of 4</div>
<div class="col-6">4 of 4</div>
</div>
<!-- Setting two column widths -->
<div class="row">
<div class="col-4">1 of 4</div>
<div class="col-6">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
gelijke hoogte
Als een van de kolommen groter is dan de andere (vanwege tekst of CSS-hoogte), volgt de rest:
Voorbeeld
<div class="row">
<div class="col">Lorem ipsum...</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
Geneste kolommen
Het volgende voorbeeld laat zien hoe u een lay-out met twee kolommen maakt, met nog twee kolommen binnen een van de kolommen:
Voorbeeld
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
Responsieve lessen
Het Bootstrap 4-rastersysteem heeft vijf klassen:
.col-(extra kleine apparaten - schermbreedte kleiner dan 576px).col-sm-(kleine apparaten - schermbreedte gelijk aan of groter dan 576px).col-md-(gemiddelde apparaten - schermbreedte gelijk aan of groter dan 768px).col-lg-(grote apparaten - schermbreedte gelijk aan of groter dan 992px).col-xl-(xgrote apparaten - schermbreedte gelijk aan of groter dan 1200px)
De bovenstaande klassen kunnen worden gecombineerd om meer dynamische en flexibele lay-outs te creëren.
Tip: Elke klasse wordt opgeschaald, dus als u dezelfde breedtes voor
smen wilt instellen md, hoeft u alleen op te geven sm.
Gestapeld naar horizontaal
Het volgende voorbeeld laat zien hoe u een kolomindeling maakt die gestapeld begint op extra kleine apparaten, voordat deze horizontaal wordt op grotere apparaten (sm, md, lg en xl):
Voorbeeld
<div class="row">
<div class="col-sm-9">col-sm-9</div>
<div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
<div
class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
Mix en match
Voorbeeld
<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices
-->
<div class="row">
<div class="col-6
col-sm-9">col-6 col-sm-9</div>
<div class="col-6
col-sm-3">col-6 col-sm-3</div>
</div>
<!-- 58%/42% split
on extra small, small and medium devices and 66.3%/33.3% split on large and
xlarge devices -->
<div class="row">
<div class="col-7 col-lg-8">col-7
col-lg-8</div>
<div class="col-5 col-lg-4">col-5
col-lg-4</div>
</div>
<!-- 25%/75% split on small devices, a 50%/50% split
on medium devices, and a 33%/66% split on large and xlarge devices. On extra
small devices, it will automatically stack (100%) -->
<div
class="row">
<div class="col-sm-3 col-md-6 col-lg-4">col-sm-3
col-md-6 col-lg-4</div>
<div class="col-sm-9 col-md-6
col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>
Geen dakgoten
Voeg de .no-guttersklasse toe aan de .rowcontainer om goten te verwijderen (extra spatie):
Om ervoor te zorgen dat voor het grootste deel, ieder van ons zal komen tot het uitoefenen van enige vorm van werk, behalve om te profiteren van de doelstellingen ervan.
Voorbeeld
<div class="row no-gutters">