How Create Bootstrap Tables in Hugo

2019-08-19

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>
...

Delete all table, thead, td, tr css definition from your css file in your theme css.

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 >}}