Hugo Shortcodes Library
GitHubToggle Dark/Light/Auto modeToggle Dark/Light/Auto modeToggle Dark/Light/Auto modeBack to homepage

Bootstrap Table

A Hugo shortcode to style Markdown tables to be human-readable with Bootstrap classes.

Dependencies

  • Requires Bootstrap CSS framework on your site.

How to use

# file.md

{{< bootstrap_table "table table-dark table-striped table-bordered" >}}
| | Marginal Units | Unit Price ($) |
| ----------- | ----------- |----------- |
| For the first | 5  | $10 |
| For the next  | 10 | $7  |
| For the next  |  ∞ | $5  |
{{< /bootstrap_table >}}

Shortcode

# bootstrap_table.html

{{ $htmlTable := .Inner | markdownify }}
{{ $class := .Get 0 | default "" }}
{{ $old := "<table>" }}
{{ $new := printf "<table class=\"%s\">" $class }}
{{ $htmlTable := replace $htmlTable $old $new }}
{{ $htmlTable | safeHTML }}


Sample

Marginal UnitsUnit Price ($)
For the first5$10
For the next10$7
For the next$5

Source: Zach Betz