Bootstrap 5: Grid System


Innehållsförteckning

    Visa innehållsförteckning

Gridsystemet

Bootstraps rutsystem är byggt med flexbox och tillåter upp till 12 kolumner över sidan.

Om du inte vill använda alla 12 kolumner individuellt kan du gruppera kolumnerna för att skapa bredare kolumner:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12

Rutnätssystemet är lyhört och kolumnerna kommer att omarrangeras automatiskt beroende på skärmstorleken.

Se till att summan blir 12 eller färre (det krävs inte att du använder alla 12 tillgängliga kolumner).

Rutnätsklasser

Bootstrap 5-rutnätssystemet har sex klasser:

  • .col- (extra små enheter - skärmbredd mindre än 576px)

  • .col-sm- (små enheter - skärmbredd lika med eller större än 576px)

  • .col-md- (medelstora enheter - skärmbredd lika med eller större än 768px)

  • .col-lg- (stora enheter - skärmbredd lika med eller större än 992px)

  • .col-xl- (xlarge enheter - skärmbredd lika med eller större än 1200px)

  • .col-xxl- (xxlarge enheter - skärmbredd lika med eller större än 1400px)

Klasserna ovan kan kombineras för att skapa mer dynamiska och flexibla layouter.

Tips: Varje klass skalas upp, så om du vill ställa in samma bredder för sm och md behöver du bara ange sm.

Grundläggande struktur för ett Bootstrap 5 Grid

Följande är en grundläggande struktur för ett Bootstrap 5-rutnät:

<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Prova själv →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">
  <h1>Basic Grid Structure</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The first, second and third row will automatically stack on top of each other when the screen is less than 576px wide.</p>
  
  <!-- Control the column width, and how they should appear on different devices -->
  <div class="row">
    <div class="col-sm-6 bg-primary text-white">50%</div>
    <div class="col-sm-6 bg-dark text-white">50%</div>
  </div>
  <br>
    
  <div class="row">
    <div class="col-sm-4 bg-primary text-white">33.33%</div>
    <div class="col-sm-4 bg-dark text-white">33.33%</div>
    <div class="col-sm-4 bg-primary text-white">33.33%</div>
  </div>
  <br>

  <!-- Or let Bootstrap automatically handle the layout -->
  <div class="row">
    <div class="col-sm bg-primary text-white">25%</div>
    <div class="col-sm bg-dark text-white">25%</div>
    <div class="col-sm bg-primary text-white">25%</div>
    <div class="col-sm bg-dark text-white">25%</div>
  </div>
  <br>
    
  <div class="row">
    <div class="col bg-primary text-white">25%</div>
    <div class="col bg-dark text-white">25%</div>
    <div class="col bg-primary text-white">25%</div>
    <div class="col bg-dark text-white">25%</div>
  </div>
</div>

</body>
</html>

Första exemplet: skapa en rad (<div class="row">). Lägg sedan till önskat antal kolumner (taggar med lämpliga .col-*-*-klasser). Den första stjärnan (*) representerar reaktionsförmågan: sm, md, lg, xl eller xxl, medan den andra stjärnan representerar ett tal som ska läggas till 12 för varje rad.

Andra exemplet: istället för att lägga till ett nummer till varje col, låt bootstrap hantera layouten för att skapa lika breda kolumner: två " col" element=50 % bredd för varje kolumn, medan tre kolumner=33,33 % bredd för varje kol. Fyra kolumner=25 % bredd, etc. Du kan också använda .col-sm|md|lg|xl|xxl för att göra kolumnerna responsiva.

Rutnätsalternativ

Följande tabell sammanfattar hur Bootstrap 5-rutnätssystemet fungerar över olika skärmstorlekar:

  Extra small (<576px) Small (>=576px) Medium (>=768px) Large (>=992px) Extra Large (>=1200px) XXL (>=1400px)
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Grid behaviour Horizontal at all times Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints
Container width None (auto) 540px 720px 960px 1140px 1320px
Suitable for Portrait phones Landscape phones Tablets Laptops Laptops and Desktops Laptops and Desktops
# of columns 12 12 12 12 12 12
Gutter width 1.5rem (.75rem on each side of a column) 1.5rem (.75rem on each side of a column) 1.5rem (.75rem on each side of a column) 1.5rem (.75rem on each side of a column) 1.5rem (.75rem on each side of a column) 1.5rem (.75rem on each side of a column)
Nestable Yes Yes Yes Yes Yes Yes
Offsets Yes Yes Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes Yes Yes