How do I set horizontal and vertical gutters in bootstrap 5 and Hugo?

Question

I use Bootstarp 5 and Hugo for a website. I want to set the column size in the test.md file. For example, I want a col-8 in the left column and col-4 in the right column. I have created two shortcodes. row.html and column.html

I would like to use a gutter of 1rem for the spacing of the columns and rows. I don't know how to program the gutter to separate the individual columns and rows. Please have a look at the screenshot.

test.md

---
title: "Test"
description: "Test"
draft: false
menu:
    main:
        weight: 2
---


{{< row >}}
{{< column col-8 >}}

# Heading h1
---

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

## Heading h2

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
{{< /column >}}

{{< column col-4 >}}

# Heading h1

Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.

## Heading h2

Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.


{{< /column >}}
{{< column col-8 >}}

# Heading h1
---

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

## Heading h2

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
{{< /column >}}

{{< column col-4 >}}

# Heading h1

Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.


{{< /column >}}
{{< /row >}}

single.html

{{ define "main" }}
<div class="container">
    <div class="row">
        <div class="col mb-auto mt-4 pt-5 px-4">
            {{ .Content | markdownify }}
        </div>
    </div>
</div>
{{ end }}

row.html

{{ $class := "row" }}
{{ with (.Get 0) }}
{{ $class = printf "%s %s" $class . }}
{{ end }}

<div class="{{ $class }}">
    {{ .Inner | .Page.RenderString }}
</div>

column.html

{{- $class := "col border rounded" }}
{{- with (.Get 0) }}
{{- $class = printf "%s %s" $class . }}
{{- end }}

<div class="{{ $class }}">
    {{ .Inner | .Page.RenderString }}
</div>

Answer 1

You are over-complicating a CSS-only problem.

You should not mix content and formatting in a markdown file, as it make the updates very complex. My suggestion for a two-column table:

1. define a table in your markdown file
2. style the left column using table tr td:nth-child(1) or table tr td:first-child
3. style the right column using table tr td:nth-child(2) or table tr td:last-child

An alternative is to define an object in the markdown, and use it in your template to create the table.