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, it’s better for a different use case. 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.min.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 }}
{{ $class := .Get 0 }}
{{ $old := "<table>" }}
{{ $new := printf "<table class=\"%s\">" $class }}
{{ $htmlTable := replace $htmlTable $old $new }}
{{ $htmlTable | safeHTML }}

Use your bootstrap table shortcode


{{< bootstrap-table "table table-responsive table-dark table-striped table-bordered" >}}
|Tag Name    |Purpose                                          |Sample                            |
|------------|-------------------------------------------------|----------------------------------|
|v           |Protocol version                                 |v=DMARC1                          |
|pct         |Percentage of messages subjected to filtering    |pct=20                            |
|ruf         |Reporting URI for forensic reports               |ruf=mailto:authfail@example.com   |
|rua         |Reporting URI of aggregate reports               |rua=mailto:aggrep@example.com     |
|p           |Policy for organizational domain                 |p=quarantine                      |
|sp          |Policy for subdomains                            |sp=reject                         |
|adkim       |Alignment mode for DKIM                          |adkim=s/adkim=r                   |
|aspf        |Alignment mode for SPF                           |aspf=r/aspf=s                     |
{{< /bootstrap-table >}}
Tag Name Purpose Sample
v Protocol version v=DMARC1
pct Percentage of messages subjected to filtering pct=20
ruf Reporting URI for forensic reports ruf=mailto:authfail@example.com
rua Reporting URI of aggregate reports rua=mailto:aggrep@example.com
p Policy for organizational domain p=quarantine
sp Policy for subdomains sp=reject
adkim Alignment mode for DKIM adkim=s/adkim=r
aspf Alignment mode for SPF aspf=r/aspf=s
Share Comments
comments powered by Disqus