diff --git a/exampleSite/assets/js/index.js b/exampleSite/assets/js/index.js
index a2a63a8..8940461 100644
--- a/exampleSite/assets/js/index.js
+++ b/exampleSite/assets/js/index.js
@@ -1,22 +1,22 @@
 // Import the Bootstrap components we want to use.
 // See https://github.com/twbs/bootstrap/blob/main/js/index.umd.js
-import Toast from "js/bootstrap/src/toast";
-import Popover from "js/bootstrap/src/popover";
+import Toast from 'js/bootstrap/src/toast';
+import Popover from 'js/bootstrap/src/popover';
+import Button from 'js/bootstrap/src/button.js';
+import Carousel from 'js/bootstrap/src/carousel.js';
 
 (function () {
-  let toastElList = [].slice.call(document.querySelectorAll(".toast"));
-  let toastList = toastElList.map(function (toastEl) {
-    return new Toast(toastEl);
-  });
+	let toastElList = [].slice.call(document.querySelectorAll('.toast'));
+	let toastList = toastElList.map(function (toastEl) {
+		return new Toast(toastEl);
+	});
 
-  toastList.forEach(function (toast) {
-    toast.show();
-  });
+	toastList.forEach(function (toast) {
+		toast.show();
+	});
 
-  let popoverTriggerList = [].slice.call(
-    document.querySelectorAll('[data-bs-toggle="popover"]')
-  );
-  popoverTriggerList.map(function (popoverTriggerEl) {
-    return new Popover(popoverTriggerEl);
-  });
+	let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
+	popoverTriggerList.map(function (popoverTriggerEl) {
+		return new Popover(popoverTriggerEl);
+	});
 })();
diff --git a/exampleSite/assets/scss/styles.scss b/exampleSite/assets/scss/styles.scss
index 91d6725..575f1a8 100644
--- a/exampleSite/assets/scss/styles.scss
+++ b/exampleSite/assets/scss/styles.scss
@@ -1 +1,5 @@
 @import "bootstrap/bootstrap";
+
+.bd-placeholder-img-lg {
+  @include font-size(5.5rem);
+}
diff --git a/exampleSite/layouts/index.html b/exampleSite/layouts/index.html
index 13477f4..113d81b 100644
--- a/exampleSite/layouts/index.html
+++ b/exampleSite/layouts/index.html
@@ -1,88 +1,165 @@
 <!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>
+      {{ .Title }}
+    </title>
+    {{/* styles */}}
+    <style>
+      html {
+        font-size: 12px;
+      }
+    </style>
 
-<head>
-  <meta charset="utf-8">
-  <title>
-    {{ .Title }}
-  </title>
-  {{/* styles */}}
-  <style>
-    html {
-      font-size: 12px;
-    }
-  </style>
-   
-  {{/* Load Bootstrap SCSS. */}}
-  {{ $options := dict "enableSourceMap" true }}
-  {{ if hugo.IsProduction}}
-  {{ $options := dict "enableSourceMap" false "outputStyle" "compressed" }}
-  {{ end }}
-  {{ $styles := resources.Get "scss/styles.scss" }}
-  {{ $styles = $styles | resources.ToCSS $options }}
-  {{ if hugo.IsProduction }}
-  {{ $styles = $styles | fingerprint }}
-  {{ end }}
-  <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
+    {{/* Load Bootstrap SCSS. */}}
+    {{ $options := dict "enableSourceMap" true }}
+    {{ if hugo.IsProduction }}
+      {{ $options := dict "enableSourceMap" false "outputStyle" "compressed" }}
+    {{ end }}
+    {{ $styles := resources.Get "scss/styles.scss" }}
+    {{ $styles = $styles | resources.ToCSS $options }}
+    {{ if hugo.IsProduction }}
+      {{ $styles = $styles | fingerprint }}
+    {{ end }}
+    <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
 
-   {{/* Load Bootstrap JS. */}}
-   {{ $js := resources.Get "js/index.js" }}
-   {{ $params := dict }}
-   {{ $sourceMap := cond hugo.IsProduction "" "inline" }}
-   {{ $opts := dict "sourceMap" $sourceMap "minify" hugo.IsProduction "target" "es2018" "params" $params }}
-   {{ $js = $js | js.Build $opts }}
-   {{ if hugo.IsProduction }}
-   {{ $js = $js | fingerprint }}
-   {{ end }}  
-    <script src="{{ $js.RelPermalink }}" {{ if hugo.IsProduction }}integrity="{{ $js.Data.Integrity }}"{{ end }} defer></script>
-</head>
-<body>
-  <div class="container mt-5">
-    <h1>Bootstrap v5 Hugo Module</h1>
-    <h2 class="mt-4">Dependencies</h2>
-    <p class="mt-4"><strong>Note:</strong> We have a replacement of github.com/gohugoio/hugo-mod-bootstrap-scss/v4 to point to the directory one level up (we do this to get correct PR previews when we update Bootstrap). The version number reflects the version in <code>go.mod</code>.</code></p>
-    <table class="table table-striped table-responsive mt-2">
-      <thead>
-        <tr>
-          <th scope="col">#</th>
-          <th scope="col">Owner</th>
-          <th scope="col">Path</th>
-          <th scope="col">Version</th>
-          <th scope="col">Time</th>
-          <th scope="col">Vendor</th>
-        </tr>
-      </thead>
-      <tbody>
-        {{ range $index, $element := hugo.Deps }}
-        <tr>
-          <th scope="row">{{ add $index 1 }}</th>
-          <td>{{ with $element.Owner }}{{.Path }}{{ end }}</td>
-          <td>
-            {{ $element.Path }}
-            {{ with $element.Replace}}
-            => {{ .Path }}
-            {{ end }}
-          </td>
-          <td>{{ $element.Version }}</td>
-          <td>{{ with $element.Time }}{{ . }}{{ end }}</td>
-          <td>{{ $element.Vendor }}</td>
-        </tr>
-        {{ end }}
-      </tbody>
-    </table>
-    <h2 class="my-4">Toast (JS plugin)</h2>
-    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
-      <div class="toast-header">
-        <strong class="me-auto">Bootstrap</strong>
-        <small>11 mins ago</small>
-        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+    {{/* Load Bootstrap JS. */}}
+    {{ $js := resources.Get "js/index.js" }}
+    {{ $params := dict }}
+    {{ $sourceMap := cond hugo.IsProduction "" "inline" }}
+    {{ $opts := dict "sourceMap" $sourceMap "minify" hugo.IsProduction "target" "es2018" "params" $params }}
+    {{ $js = $js | js.Build $opts }}
+    {{ if hugo.IsProduction }}
+      {{ $js = $js | fingerprint }}
+    {{ end }}
+    <script
+      src="{{ $js.RelPermalink }}"
+      {{ if hugo.IsProduction }}integrity="{{ $js.Data.Integrity }}"{{ end }}
+      defer></script>
+  </head>
+  <body>
+    <div class="container mt-5 mb-5">
+      <h1>Bootstrap v5 Hugo Module</h1>
+      <h2 class="mt-4">Dependencies</h2>
+      <p class="mt-4">
+        <strong>Note:</strong> We have a replacement of
+        github.com/gohugoio/hugo-mod-bootstrap-scss/v4 to point to the directory
+        one level up (we do this to get correct PR previews when we update
+        Bootstrap). The version number reflects the version in
+        <code>go.mod</code>.
+      </p>
+      <table class="table table-striped table-responsive mt-2">
+        <thead>
+          <tr>
+            <th scope="col">#</th>
+            <th scope="col">Owner</th>
+            <th scope="col">Path</th>
+            <th scope="col">Version</th>
+            <th scope="col">Time</th>
+            <th scope="col">Vendor</th>
+          </tr>
+        </thead>
+        <tbody>
+          {{ range $index, $element := hugo.Deps }}
+            <tr>
+              <th scope="row">{{ add $index 1 }}</th>
+              <td>{{ with $element.Owner }}{{ .Path }}{{ end }}</td>
+              <td>
+                {{ $element.Path }}
+                {{ with $element.Replace }}
+                  =>
+                  {{ .Path }}
+                {{ end }}
+              </td>
+              <td>{{ $element.Version }}</td>
+              <td>{{ with $element.Time }}{{ . }}{{ end }}</td>
+              <td>{{ $element.Vendor }}</td>
+            </tr>
+          {{ end }}
+        </tbody>
+      </table>
+      <h2 class="my-4">Toast (JS plugin)</h2>
+      <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="toast-header">
+          <strong class="me-auto">Bootstrap</strong>
+          <small>11 mins ago</small>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="toast"
+            aria-label="Close"></button>
+        </div>
+        <div class="toast-body">Hello, world! This is a toast message.</div>
       </div>
-      <div class="toast-body">
-        Hello, world! This is a toast message.
+      <h2 class="my-4">Popover (JS plugin)</h2>
+      <button
+        type="button"
+        class="btn btn-lg btn-danger"
+        data-bs-toggle="popover"
+        title="Popover title"
+        data-bs-content="And here's some amazing content. It's very engaging. Right?">
+        Click to toggle popover
+      </button>
+      <h2 class="my-4">Butttons</h2>
+      <div class="d-grid gap-2 d-md-block">
+        <button
+          type="button"
+          class="btn btn-primary"
+          data-bs-toggle="button"
+          autocomplete="off">
+          Toggle button
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary active"
+          data-bs-toggle="button"
+          autocomplete="off"
+          aria-pressed="true">
+          Active toggle button
+        </button>
+        <button
+          type="button"
+          class="btn btn-primary"
+          disabled
+          data-bs-toggle="button"
+          autocomplete="off">
+          Disabled toggle button
+        </button>
+      </div>
+      <h2 class="my-4">Carousel</h2>
+      <div
+        id="carouselExampleControls"
+        class="carousel slide"
+        data-bs-ride="carousel">
+        <div class="carousel-inner">
+          <div class="carousel-item active">
+            {{ partial "placeholder.html" (dict "width" "800" "height" "400" "class" "bd-placeholder-img-lg  d-block w-100" "color" "#555" "background" "#777" "text" "First slide") }}
+          </div>
+          <div class="carousel-item">
+            {{ partial "placeholder.html" (dict "width" "800" "height" "400" "class" "bd-placeholder-img-lg  d-block w-100" "color" "#555" "background" "#777" "text" "Second slide") }}
+          </div>
+          <div class="carousel-item">
+            {{ partial "placeholder.html" (dict "width" "800" "height" "400" "class" "bd-placeholder-img-lg  d-block w-100" "color" "#555" "background" "#777" "text" "Third slide") }}
+          </div>
+        </div>
+        <button
+          class="carousel-control-prev"
+          type="button"
+          data-bs-target="#carouselExampleControls"
+          data-bs-slide="prev">
+          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Previous</span>
+        </button>
+        <button
+          class="carousel-control-next"
+          type="button"
+          data-bs-target="#carouselExampleControls"
+          data-bs-slide="next">
+          <span class="carousel-control-next-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Next</span>
+        </button>
       </div>
     </div>
-    <h2 class="my-4">Popover (JS plugin)</h2>
-    <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
-  </div>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/exampleSite/layouts/partials/placeholder.html b/exampleSite/layouts/partials/placeholder.html
new file mode 100644
index 0000000..0ddef7e
--- /dev/null
+++ b/exampleSite/layouts/partials/placeholder.html
@@ -0,0 +1,31 @@
+{{- $title := .title | default "Placeholder" -}}
+{{- $class := .class -}}
+{{- $default_color  := "#6c757d" -}}
+{{- $default_background := "#6c757d" -}}
+{{- $color := .color  | default $default_color -}}
+{{- $background := .background | default $default_background -}}
+{{- $width := .width | default "100%" -}}
+{{- $height := .height | default "180" -}}
+{{- $text := .text | default (printf "%sx%s" $width $height) -}}
+{{- $show_title := not (eq $title "false") -}}
+{{- $show_text := not (eq $text "false") -}}
+<svg
+  class="{{ with $class }}{{ . }}{{ end }}"
+  width="{{ $width }}"
+  height="{{ $height }}"
+  xmlns="http://www.w3.org/2000/svg"
+  {{ if (or $show_title $show_text) }}
+    role="img"
+    aria-label="{{ if $show_title }}
+      {{ $title }}{{ if $show_text }}:{{ end }}
+    {{ end }}{{ if ($show_text) }}{{ $text }}{{ end }}"
+  {{ else }}
+    aria-hidden="true"
+  {{ end }}
+  preserveAspectRatio="xMidYMid slice">
+  {{- if $show_title }}<title>{{ $title }}</title>{{ end -}}
+  <rect width="100%" height="100%" fill="{{ $background }}" />
+  {{- if $show_text }}
+    <text x="40%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>
+  {{ end -}}
+</svg>
