Bootstrap 5 Raster Voorbeeld
- Vorige pagina BS5 raster XXL
- Volgende pagina BS5 basis sjabloon
Hier hebben we enkele voorbeelden van Bootstrap 5 grid layout verzameld.
Drie gelijke kolommen
Gebruik op het aantal gespecificeerde elementen .col
De klasse, Bootstrap herkent hoeveel elementen er zijn (en maakt gelijke breedtekolommen). In het volgende voorbeeld gebruiken we drie col-elementen, waarbij elke element een breedte van 33.33% heeft.
Voorbeeld
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
Drie gelijke kolommen met cijfers
U kunt ook cijfers gebruiken om de breedte van de kolommen te controleren. Zorg ervoor dat de som gelijk is aan of kleiner is dan 12 (gebruik niet alle 12 beschikbare kolommen):
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 creëren, moet u cijfers gebruiken. Het volgende voorbeeld zal een verdeling van 25%/50%/25% creëren:
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>
Stel de breedte van een kolom in
Echter, het instellen van de breedte van één kolom is voldoende, en de broerkolommen passen zich automatisch aan. Het volgende voorbeeld zal een verdeling van 25%/50%/25% creëren:
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
<!-- Twee gelijke kolommen --> <div class="row"> <div class="col">1 of 2</div> <div class="col">2 of 2</div> </div> <!-- Vier gelijke kolommen --> <div class="row"> <div class="col">1 of 4</div> <div class="col">2 of 4</div> <div class="col">3 van 4</div> <div class="col">4 van 4</div> </div> <!-- Zes gelijke kolommen --> <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>
Row Cols
U kunt ook .row-cols-*
De klasse controle moet in de naastgelegen kolommen verschijnen (ongeacht hoeveel kolommen er zijn):
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 van 4</div> <div class="col">4 van 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
<!-- Twee ongelijke kolommen --> <div class="row"> <div class="col-8">1 of 2</div> <div class="col-4">2 of 2</div> </div> <!-- Vier ongelijke kolommen --> <div class="row"> <div class="col-2">1 van 4</div> <div class="col-2">2 van 4</div> <div class="col-2">3 van 4</div> <div class="col-6">4 van 4</div> </div> <!-- Instellen van de breedte van twee kolommen --> <div class="row"> <div class="col-4">1 van 4</div> <div class="col-6">2 van 4</div> <div class="col">3 van 4</div> <div class="col">4 van 4</div> </div>
Gelijke hoogte
Als een kolom hoger 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>
Geïntegreerde kolommen
Het volgende voorbeeld toont hoe je een dubbele kolomindeling kunt maken, waarbij er binnen een kolom nog twee kolommen zijn:
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 klassen
Bootstrap 5 grid-systeem heeft vijf klassen:
.col-
(ultra-kleine apparaten - schermbreedte kleiner dan 576px).col-sm-
(kleine apparaten - schermbreedte is gelijk aan of groter dan 576px).col-md-
(middenformaat apparaten - schermbreedte is gelijk aan of groter dan 768 pixels).col-lg-
(grote apparaten - schermbreedte is gelijk aan of groter dan 992 pixels).col-xl-
(xlarge-apparaat - schermbreedte is gelijk aan of groter dan 1200px).col-xxl-
(xxlarge-apparaat - schermbreedte is gelijk aan of groter dan 1400px)
Je kunt de bovenstaande klassen combineren om een dynamischere en flexibelere indeling te maken.
Tip:Elke klasse wordt in verhouding vergroot, dus als je wilt dat sm
en md
Stel dezelfde breedte in, dan is het voldoende om sm
.
Stapelen naar horizontaal
Het volgende voorbeeld toont hoe je een kolomindeling kunt maken, die aanvankelijk op ultra-kleine apparaten gestapeld is, en vervolgens horizontaal wordt geplaatst 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
<!-- Op extra kleine apparaten 50%/50% verdeeld, op grote apparaten 75%/25% verdeeld --> <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> <!-- Op extra kleine, kleine, middelgrote apparaten 58%/42% verdeeld, op grote en extra grote apparaten 66.3%/33.3% verdeeld --> <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> <!-- Op kleine apparaten 25%/75% verdeeld, op middelgrote apparaten 50%/50% verdeeld, op grote en extra grote apparaten 33%/66% verdeeld. Op extra kleine apparaten wordt automatisch gestapeld (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 gutter
Als je de afstand tussen de kolommen (extra ruimte) wilt wijzigen, gebruik dan elke .g-1|2|3|4|5
Class (.g-4
is de standaardwaarde).
Als je de lijst om de randen (gutter) volledig wilt verwijderen, gebruik dan .g-0
:
Voorbeeld
<div class="row g-0">
- Vorige pagina BS5 raster XXL
- Volgende pagina BS5 basis sjabloon