Bootstrap 5 Gitterexempel

Nedan har vi sammanställt några exempel på Bootstrap 5-grid layout.

Tre lika kolonner

Använd på en viss mängd element .col Klasser, Bootstrap kommer att känna igen hur många element som finns (och skapa lika breda kolumner). I följande exempel använde vi tre col-element, där varje elements bredd är 33.33%.

Exempel

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Prova själv

Tre lika kolonner med siffror

Du kan också använda siffror för att styra kolonnens bredd. Se till att summan är 12 eller mindre (du behöver inte använda alla 12 tillgängliga kolumner):

Exempel

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

Prova själv

Tre ojlika kolonner

För att skapa ojlika kolumner måste du använda siffror. Exempeln skapar en delning av 25%/50%/25%:

Exempel

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

Prova själv

Ställ in kolonnens bredd

Men det räcker att bara sätta bredden på en kolonn och låt syskonkolonnerna anpassa storleken automatiskt. Exempeln skapar en delning av 25%/50%/25%:

Exempel

<div class="row">
  <div class="col">col</div>
  <div class="col-6">col-6</div>
  <div class="col">col</div>
</div>

Prova själv

Fler lika kolumner

Exempel

<!-- Två lika kolumner -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>
<!-- Fyra lika kolumner -->
<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>
<!-- Sex lika kolumner -->
<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>

Prova själv

Row Cols

Du kan också använda .row-cols-* Kontrollen för kolonnerna bör finnas bredvid varandra (oavsett hur många kolumner det finns):

Exempel

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

Prova själv

Fler ojlika kolumner

Exempel

<!-- Två ojlika kolumner -->
<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>

Prova själv

Jämnhöjd

Om en kolumn är högre än den andra (på grund av text eller CSS-höjd) kommer de andra att följa efter:

Exempel

<div class="row">
  <div class="col">Lorem ipsum...</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Prova själv

Nästlade kolumner

Nedan visas hur man skapar en layout med två kolumner, där en kolumn innehåller ytterligare två kolumner:

Exempel

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

Prova själv

Responsiva klasser

Bootstrap 5-gridsystemet har fem klasser:

  • .col- (extremt små enheter - skärmens bredd är mindre än 576px)
  • .col-sm- (små enheter - skärmens bredd är 576 pixlar eller större)
  • .col-md- (medelstora enheter - skärmens bredd är 768 pixlar eller större)
  • .col-lg- (stora enheter - skärmens bredd är 992 pixlar eller större)
  • .col-xl- (xlarge-enheter - skärmens bredd är 1200px eller större)
  • .col-xxl- (xxlarge-enheter - skärmens bredd är 1400px eller större)

Du kan kombinera ovanstående klasser för att skapa mer dynamiska och flexibla layouter.

Tips:Varje klass förstöras i proportion, så om du vill ge sm och md Om du vill sätta samma bredd behöver du bara specificera sm.

Stapla till horisontell

Nedan visas hur man skapar en kolumnlayout som börjar med att staplas på små enheter och sedan blir horisontell på större enheter (sm, md, lg och xl):

Exempel

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

Prova själv

Blanda och matcha

Exempel

<!-- På super små enheter 50%/50% delning, på stora enheter 75%/25% delning -->
<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>
<!-- På super små, små, medelstora enheter 58%/42% delning, på stora och extra stora enheter 66.3%/33.3% delning -->
<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>
<!-- På små enheter 25%/75% delning, på medelstora enheter 50%/50% delning, på stora och extra stora enheter 33%/66% delning. På super små enheter kommer det att staplas automatiskt (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>

Prova själv

ingen gutter

För att ändra avståndet mellan kolumnerna (extraspaces), använd .g-1|2|3|4|5 Klass (.g-4 är standardvärdet).

För att helt ta bort sammansättningsslåten (gutter), använd .g-0：

Exempel

<div class="row g-0">

Prova själv