Bootstrap 5 Raster Voorbeeld

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>

Probeer het zelf

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>

Probeer het zelf

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>

Probeer het zelf

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>

Probeer het zelf

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>

Probeer het zelf

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>

Probeer het zelf

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>

Probeer het zelf

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>

Probeer het zelf

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>

Probeer het zelf

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>

Probeer het zelf

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>

Probeer het zelf

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">

Probeer het zelf