How Create Bootstrap Tables in Hugo

How Create Bootstrap Tables in Hugo

Inspired by this discussion, I wanted the ability to style a markdown table with Bootstrap table classes.

While this works fine, I wanted something that meets the following criteria:

  • The table is defined in markdown

  • It lives in the content file, e.g. content/post/some-post.md

  • It’s styled with Bootstrap table classes

Create css file with bootstrap tables


You can create own css file with bootstrap tables definition based on original bootstrap 5 css file. Or you can download my css file with all bootstrap tables definitions:

bootstrap-table.css

You must include bootstrap-table.css file to your theme header file.

Example:

layouts/partials/header.html
# layouts/partials/header.html
...
<link rel="stylesheet" href="{{ "css/bootstrap-table.css" | absURL }}">
<title>
...

Create Hugo Shortcode


Create hugo shortcode with bootstrap table html definition with name bootstrap-table.html

layouts/shortcodes/bootstrap-table.html
{{ $htmlTable := .Inner | markdownify }}
{{ $table_class := .Get "table_class" }}
{{ $thead_class := .Get "thead_class" }}
{{ if .Get "caption" }}
    {{ $caption := .Get "caption" }} 
    {{ $old_cap := "<table>" }}
    {{ $new_cap := printf "<table>\n<caption>%s</caption>" $caption }}
    {{ $htmlTable = replace $htmlTable $old_cap $new_cap }} 
{{ end }}
{{ $old_class := "<table>" }}
{{ $new_class := printf "<table class=\"%s\">" $table_class }}
{{ $htmlTable = replace $htmlTable $old_class $new_class }}
{{ $old_thead := "<thead>" }}
{{ $new_thead := printf "<thead class=\"%s\">" $thead_class }}
{{ $htmlTable = replace $htmlTable $old_thead $new_thead }}
<div class="table-responsive">
{{ $htmlTable | safeHTML }}
</div>

Use your bootstrap table shortcode


Table Dark

shortcode:

{{< bootstrap-table table_class="table table-dark table-striped table-bordered" >}}
| # | First          | Last     | Handle   |
|---|----------------|----------|----------|
| 1 | Mark           | Otto     | @mdo     |
| 2 | Jacob          | Thornton | @fat     |
| 3 | Larry the Bird |          | @twitter |
{{< /bootstrap-table >}}

result:

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped table with bootstrap dark header and hoovered

shortcode:

{{< bootstrap-table table_class="table table-striped table-hover" thead_class="table-dark" >}}
| # | First          | Last     | Handle   |
|---|----------------|----------|----------|
| 1 | Mark           | Otto     | @mdo     |
| 2 | Jacob          | Thornton | @fat     |
| 3 | Larry the Bird |          | @twitter |
{{< /bootstrap-table >}}

result:

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table hoover with header in bootstrap info color

shortcode:

{{< bootstrap-table table_class="table table-hover" thead_class="table-info" >}}
| # | First          | Last     | Handle   |
|---|----------------|----------|----------|
| 1 | Mark           | Otto     | @mdo     |
| 2 | Jacob          | Thornton | @fat     |
| 3 | Larry the Bird |          | @twitter |
{{< /bootstrap-table >}}

result:

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table with header in boostrap success color and with caption

shortcode:

{{< bootstrap-table table_class="table table-hover" thead_class="table-success" caption="My super caption" >}}
| # | First          | Last     | Handle   |
|---|----------------|----------|----------|
| 1 | Mark           | Otto     | @mdo     |
| 2 | Jacob          | Thornton | @fat     |
| 3 | Larry the Bird |          | @twitter |
{{< /bootstrap-table >}}

result:

My super caption
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

You can also put the caption on the top of the table with .caption-top.

shortcode:

{{< bootstrap-table table_class="table table-hover caption-top" thead_class="table-info" caption="My super caption" >}}
| # | First          | Last     | Handle   |
|---|----------------|----------|----------|
| 1 | Mark           | Otto     | @mdo     |
| 2 | Jacob          | Thornton | @fat     |
| 3 | Larry the Bird |          | @twitter |
{{< /bootstrap-table >}}

result:

My super caption
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bordered tables

shortcode:

{{< bootstrap-table table_class="table table-bordered border-primary" thead_class="table-info" >}}
| # | First          | Last     | Handle   |
|---|----------------|----------|----------|
| 1 | Mark           | Otto     | @mdo     |
| 2 | Jacob          | Thornton | @fat     |
| 3 | Larry the Bird |          | @twitter |
{{< /bootstrap-table >}}

result:

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

shortcode:

{{< bootstrap-table table_class="table border-primary" thead_class="table-info" >}}
| # | First          | Last     | Handle   |
|---|----------------|----------|----------|
| 1 | Mark           | Otto     | @mdo     |
| 2 | Jacob          | Thornton | @fat     |
| 3 | Larry the Bird |          | @twitter |
{{< /bootstrap-table >}}

result:

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Tables without borders

shortcode:

{{< bootstrap-table table_class="table table-hover table-borderless" thead_class="table-info" >}}
| # | First          | Last     | Handle   |
|---|----------------|----------|----------|
| 1 | Mark           | Otto     | @mdo     |
| 2 | Jacob          | Thornton | @fat     |
| 3 | Larry the Bird |          | @twitter |
{{< /bootstrap-table >}}

result:

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Small tables

Add .table-sm to make any .table more compact by cutting all cell padding in half.

shortcode:

{{< bootstrap-table table_class="table table-sm" thead_class="table-warning" >}}
| # | First          | Last     | Handle   |
|---|----------------|----------|----------|
| 1 | Mark           | Otto     | @mdo     |
| 2 | Jacob          | Thornton | @fat     |
| 3 | Larry the Bird |          | @twitter |
{{< /bootstrap-table >}}

result:

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter