The problem: I am refining the display of certain sections of my website and I need to know what exact break point is userd currently by Bootstrap. I am using the latest Bootstrap version.

The solution: I created a shortcode or partial that I can use in my templates to display the current breakpoint. I am using the Bootstrap 5.

Shortcode or partial “show-breakpoints.html”:

 1{{- if hugo.IsServer -}}
 2  <div class="container responsive-ruler">
 3    {{- $breakpoints := slice "xs" "sm" "md" "lg" "xl" "xxl" -}}
 4    {{- range $index, $value := $breakpoints -}}
 5      {{- $classes := printf "col d-%s-block" $value -}}
 6      {{- if eq $index 0 -}}
 7        {{- $classes = printf "d-block %s" $classes -}}
 8      {{- else -}}
 9        {{- $classes = printf "d-none %s %s" $classes (printf "d-%s-none" (index $breakpoints (sub $index 1))) -}}
10      {{- end -}}
11      {{- if lt $index (sub ($breakpoints | len) 1) -}}
12        {{- $classes = printf "%s %s" $classes (printf "d-%s-none" (index $breakpoints (add $index 1))) -}}
13      {{- end -}}
14      <div class="{{- $classes -}}">
15        <div class="identifier">{{- . -}}</div>
16      </div>
17    {{- end -}}
18  </div>
19{{- end -}}

If you are using different breakpoints from the ones defined in Bootstrap you can redefine them in line 3.

Using this partial in your template:

1{{ partialCached "show-breakpoints.html" . }}

This will display the current breakpoint. You can design the output to your liking by using the .responsive-ruler class for the box and the .responsive-ruler .identifier class for the breakpoint label.

By the way: the hugo.IsServer is used to only display the breakpoints in the development environment. You can remove this if you want to display the breakpoints in production as well. Let me know why you would want to do that, though ;)