One of the most common layout patterns a content editor asks for is the multi-column section: a row of cards, a three-up feature grid, a two-column text block. With Drupal Paragraphs and Bootstrap, you can build a single bundle that handles any column count the editor needs.
The bundle structure
Row (parent) — holds:
- A select field for column count (2, 3, 4, 6)
- A multi-value Paragraph reference field for Column items
Column (child) — holds whatever you want in each column. Start simple: a text area and an optional image. Add more bundles as needed.
The Twig template
The parent template maps the column count to Bootstrap’s grid classes, then loops through the column items:
{# paragraph--row.html.twig #}
{% set col_count = content.field_column_count[0]['#markup'] %}
{% set col_classes = {
'2': 'col-sm-6',
'3': 'col-sm-4',
'4': 'col-sm-3',
'6': 'col-sm-2'
} %}
{% set col_class = col_classes[col_count] ?? 'col-sm-4' %}
<div class="row paragraph-row paragraph-row--{{ col_count }}-col">
{% for key, item in content.field_columns %}
{% if key|first != '#' %}
<div class="{{ col_class }}">
{{ item }}
</div>
{% endif %}
{% endfor %}
</div>
Why this is better than a custom field
You could build this with a multi-value field directly on the node — but then every column can only hold one type of content (say, just text). With Paragraphs, each Column item can itself reference any Paragraph bundle. Want a column with a title, body, icon, and CTA? Define that as a “Feature Card” bundle and reference it from the Column. The Row template doesn’t care — it just wraps whatever the Column returns.
This composability is the real power of the Paragraphs approach. One Row template. Infinite column content combinations.
Responsive handling
On mobile (under col-sm-), all columns naturally stack to full-width — Bootstrap’s grid defaults handle it. If you need more control (say, 2-col stays side-by-side on tablet but stacks on phone), add col-xs-12 col-sm-6 style combinations to the mapping.