diff --git a/exampleSite/content/en/blog/bootstrap-elements.md b/exampleSite/content/en/blog/bootstrap-elements.md
index 2530946a..1233de84 100644
--- a/exampleSite/content/en/blog/bootstrap-elements.md
+++ b/exampleSite/content/en/blog/bootstrap-elements.md
@@ -49,15 +49,26 @@ As an example, the following shortcode displays a simple alert.
 
 ## Badge
 
-Use HTML code to display a badge for a heading. See the Bootstrap [documentation]({{< param "links.bs_badge_heading" >}}) for more options.
+Use the badge shortcode to display a badge for a heading.
 
 {{< example >}}
-<h1>Example heading of size one <span class="badge bg-secondary">New</span></h1>
-<h2>Example heading of size two <span class="badge bg-secondary">New</span></h2>
-<h3>Example heading of size three <span class="badge bg-secondary">New</span></h3>
-<h4>Example heading of size four <span class="badge bg-secondary">New</span></h4>
-<h5>Example heading of size five <span class="badge bg-secondary">New</span></h5>
-<h6>Example heading of size six <span class="badge bg-secondary">New</span></h6>
+Heading 1 {{</* badge title="New" */>}}
+{.h1}
+
+Heading 2 {{</* badge title="New" */>}}
+{.h2}
+
+Heading 3 {{</* badge title="New" */>}}
+{.h3}
+
+Heading 4 {{</* badge title="New" */>}}
+{.h4}
+
+Heading 5 {{</* badge title="New" */>}}
+{.h5}
+
+Heading 6 {{</* badge title="New" */>}}
+{.h6}
 {{< /example >}}
 
 ## Breadcrumb
diff --git a/layouts/shortcodes/badge.html b/layouts/shortcodes/badge.html
new file mode 100644
index 00000000..16f10730
--- /dev/null
+++ b/layouts/shortcodes/badge.html
@@ -0,0 +1,23 @@
+<!-- 
+    Adds an inline badge. The shortcode supports the following arguments:
+    "title"         Required title of the badge.
+    "class"         Optional class attributes of the badge element.
+    "color"         Optional theme color of the element, either "primary", "secondary" (default), "success",
+                    "danger", "warning", "info", "light", "dark", "white", or "black".
+-->
+
+{{- $error := false -}}
+{{- $title := .Get "title" -}}
+{{- $class := .Get "class" -}}
+{{- $color := "secondary" -}}
+{{- with .Get "color" }}{{ $color = . }}{{ end -}}
+{{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" -}}
+{{- if not (in $supportedColors $color) -}}
+    {{- errorf "Invalid value for param 'color': %s" .Position -}}
+{{- end -}}
+
+{{- if not $title }}
+    {{ errorf "Missing title: %s" .Position -}}
+{{ else -}}
+    <span class="badge bg-{{ $color }}{{ with $class }} {{ . }}{{ end }}">{{ $title | plainify }}</span>
+{{ end -}}