Kaushalmodi/hugo-debugprint with bootstrap 4

If you are using kaushalmodi/hugo-debugprint with your theme using Bootstrap 4, then the following SCSS rules will format the generated tables quite nicely (no need to add the CSS rules @kaushalmodi added in the repo):

table.debugprint {
    @extend .table-dark;
    @extend .table-bordered;
    @extend .table-sm;
    @extend .mb-3;
    @extend .w-100;
    .key {
        min-width:100px;
        width:20%;
    }
}

Replace the line @extend .table-dark; with @extend .table; if your background is light where you debug. In my case it’s a dark footer, so I chose .table-dark to color it properly.

I have the following code in my footer to debug “locally” (only when hugo server is used):

{{ if .Site.IsServer }}
  {{ partial "debugprint.html" . }}
  {{ partial "debugprint.html" .Params }}
  {{ partial "debugprint.html" site }}
  {{ partial "debugprint.html" site.Menus }}
  {{ partial "debugprint.html" .Resources }}
  {{ partial "debugprint.html" .File }}
{{ end }}