---
url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/ontwerp/bootstrap-grid'
title: 'Plan kolombreedtes op de grid met 12 kolommen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T02:30:17+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Elke rij die je toevoegt staat op de Bootstrap-grid: twaalf gelijke tracks die zijn kolommen
  delen. Een lay-out zoals 1/3 + 2/3 geeft één kolom vier tracks en de andere acht. Gebruik deze pagina
  om breedtes te plannen die optellen, en om een rij een tweede lay-out voor kleinere schermen te geven.
  Om überhaupt een rij toe te voegen, zie Een rij
  toevoegen.
  De video geeft een rij van 4 kolommen een tweede lay-out voor tablets en versmalt daarna het
  venster.
tags:
  - 'Design guides'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Plan kolombreedtes op de grid met 12 kolommen'
      description: |-
        Elke rij die je toevoegt staat op de Bootstrap-grid: twaalf gelijke tracks die zijn kolommen
        delen. Een lay-out zoals 1/3 + 2/3 geeft één kolom vier tracks en de andere acht. Gebruik deze pagina
        om breedtes te plannen die optellen, en om een rij een tweede lay-out voor kleinere schermen te geven.
        Om überhaupt een rij toe te voegen, zie Een rij
        toevoegen.
        De video geeft een rij van 4 kolommen een tweede lay-out voor tablets en versmalt daarna het
        venster.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T02:30:17+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/ontwerp/bootstrap-grid'
      articleSection: Ontwerpgidsen
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/ontwerp/bootstrap-grid'
      description: |-
        Elke rij die je toevoegt staat op de Bootstrap-grid: twaalf gelijke tracks die zijn kolommen
        delen. Een lay-out zoals 1/3 + 2/3 geeft één kolom vier tracks en de andere acht. Gebruik deze pagina
        om breedtes te plannen die optellen, en om een rij een tweede lay-out voor kleinere schermen te geven.
        Om überhaupt een rij toe te voegen, zie Een rij
        toevoegen.
        De video geeft een rij van 4 kolommen een tweede lay-out voor tablets en versmalt daarna het
        venster.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/nl'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: nl
---
[Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Builder leren](/nl/hc/documentation/learn-dxpr-builder) /[Pagina’s bouwen](/nl/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/nl/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/nl/hc/documentation/learn-dxpr-builder/design/overview) # Plan kolombreedtes op de grid met 12 kolommen.

 DXPR Builder lerenPagina’s bouwenElementen stylenOntwerpgidsen

   ## In deze gids

 Gerelateerde gidsen

- [Een rij toevoegen](/nl/hc/documentatie/dxpr-builder-leren/lay-out/rijen-en-kolommen)
- [Laat je lay-out werken op telefoons](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/responsive-design)
- [Een geneste lay-out toevoegen](/nl/hc/documentatie/dxpr-builder-leren/lay-out/nesten)

Elke rij die je toevoegt staat op de Bootstrap-grid: twaalf gelijke tracks die zijn kolommen delen. Een lay-out zoals 1/3 + 2/3 geeft één kolom vier tracks en de andere acht. Gebruik deze pagina om breedtes te plannen die optellen, en om een rij een tweede lay-out voor kleinere schermen te geven. Om überhaupt een rij toe te voegen, zie [Een rij toevoegen](/nl/hc/documentation/learn-dxpr-builder/layout/rows-and-columns).

De video geeft een rij van 4 kolommen een tweede lay-out voor tablets en versmalt daarna het venster.

  ## Hoe breuken tracks worden

| Breuk | Tracks | Typisch gebruik |
|---|---|---|
| 1/1 | 12 | Eén kolom over de volle breedte |
| 1/2 | 6 | Twee gelijke kolommen |
| 1/3 | 4 | Drie gelijke kolommen, of een sidebar naast 2/3 |
| 2/3 | 8 | Hoofdinhoud naast een 1/3-sidebar |
| 1/4 | 3 | Vier gelijke kolommen, of een sidebar naast 3/4 |
| 3/4 | 9 | Hoofdinhoud naast een 1/4-sidebar |
| 1/6 | 2 | Zes kleine kolommen, zoals een rij logo's |
| 5/12 and 7/12 | 5 and 7 | Twee kolommen van bijna gelijke breedte |

De tracks van een rij tellen op tot 12. Wanneer ze tot meer optellen, wrappen de extra kolommen naar een nieuwe regel. Gebruik breuken die uitkomen op hele tracks: helften, derden, kwarten, zesden en twaalfden. Een breuk zoals 1/5 heeft geen bijpassende Bootstrap-klasse.

Een rij in een kolom splitst die kolom in zijn eigen twaalf tracks. Zie [Nesten](/nl/hc/documentatie/dxpr-builder-leren/lay-out/nesten).

## Geef een rij een andere lay-out op tablets

De lay-out die je voor een nieuwe rij kiest geldt vanaf **Medium devices (≥ 768px)** omhoog. Onder die breedte stapelen kolommen. Deze stappen houden vier kolommen op desktops en tonen twee per regel op tablets.

1. Wijs de rij aan en klik op het gridpictogram in zijn besturingsbalk. Het lay-outdialoogvenster opent op het paneel **Medium devices (≥ 768px)**.
2. Kies de tegel met vier gelijke kolommen.
3. Klik op **Add screen size**. Een tweede paneel opent met een kopie van de lay-out.
4. Kies in de schermgroottelijst van het nieuwe paneel **Small devices (≥ 576px)**.
5. Klik op **Custom Layout**, typ `1/2 + 1/2 + 1/2 + 1/2` en klik op **Save**.
6. Klik op de werkbalk op **Save**.

Vier helften houden alle vier kolommen en zetten twee op elke regel. Een tegel met twee kolommen zou de rij in plaats daarvan tot twee kolommen terugbrengen.

## Wat je ziet

Op een breed scherm toont de rij vier kolommen naast elkaar. Maak het browservenster smaller dan 768 pixels en ze wrappen naar twee per regel. Onder 576 pixels neemt elke kolom de volle breedte.

## Schermgroottes

Elk paneel in het lay-outdialoogvenster stelt de kolommen in voor één schermgrootte. De lay-out geldt ook voor grotere schermen, tot de volgende grootte met een eigen paneel.

| Paneel | Geldt vanaf |
|---|---|
| **Extra small (< 576px)** | De kleinste telefoons omhoog |
| **Small devices (≥ 576px)** | 576 pixels |
| **Medium devices (≥ 768px)** | 768 pixels; het eerste paneel van een nieuwe rij |
| **Large devices (≥ 992px)** | 992 pixels |
| **Extra large (≥ 1200px)** | 1200 pixels |
| **Extra extra large (≥ 1400px)** | 1400 pixels |

**Remove screen size** verwijdert een paneel en zijn lay-out. **Custom Layout** neemt elke lijst met breuken aan, zoals `1/4 + 1/2 + 1/4`. Wanneer de lay-out van een paneel niet een van de tegels is, markeert het dialoogvenster **Custom Layout** en noemt het de lay-out erop, zoals **Custom Layout (1/2 + 1/2 + 1/2 + 1/2)**. Klik erop om die lay-out te bewerken in het vak voor aangepaste lay-out.

## Bootstrap op je site

De grid heeft Bootstrap 5 op de pagina nodig. Een sitebeheerder kiest waar die vandaan komt in **DXPR Studio** > **DXPR Builder** > **General Settings**(`/admin/dxpr_studio/dxpr_builder/settings`), onder **Bootstrap**. **Sideload Bootstrap files** biedt **Bootstrap 5**, die de builder zelf laadt, of **None (theme provides Bootstrap)**.

## Als je de lay-out niet ziet

- **Kolommen stapelen op elke schermgrootte.** Er is geen Bootstrap geladen: de instelling is **None (theme provides Bootstrap)** en het thema laadt hem niet. Kies **Bootstrap 5** onder **Sideload Bootstrap files** op `/admin/dxpr_studio/dxpr_builder/settings`.
- **De desktoplay-out verloor kolommen.** Je koos een tegel met minder kolommen voor een andere schermgrootte en de builder bracht de lay-outs met gelijke breedte terug om te matchen. Draai de wijziging terug, zoals [Ongedaan maken en opnieuw](/nl/hc/documentation/learn-dxpr-builder/editing/undo-redo) toont, en gebruik **Custom Layout** met één breuk per kolom.
- **De laatste kolom valt naar een nieuwe regel.** De breuken tellen op tot meer dan één rij van 12 tracks. Laat ze optellen tot 1, zoals `1/4 + 3/4`.
- **Een aangepaste kolom heeft geen duidelijke breedte.** Zijn breuk, zoals 1/5, heeft geen Bootstrap-klasse. Gebruik helften, derden, kwarten, zesden of twaalfden.

## Wat nu?

- [Een rij toevoegen](/nl/hc/documentation/learn-dxpr-builder/layout/rows-and-columns): voeg rijen toe en kies een kolompreset.
- [Responsive design](/nl/hc/documentatie/dxpr-builder-leren/ontwerp/responsive-design): toon of verberg elementen op telefoons, tablets of desktops.
- [Nesten](/nl/hc/documentatie/dxpr-builder-leren/lay-out/nesten): plaats rijen in kolommen voor fijnere lay-outs.