From: Julien Déramond <juderamond@gmail.com>
Date: Tue, 21 Apr 2026 18:55:41 +0000 (+0200)
Subject: Docs: add gap to Progress examples (#42344)
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=53b1b19aa25104651e6481a3b2e1e4f3cb41eb5a;p=thirdparty%2Fbootstrap.git

Docs: add gap to Progress examples (#42344)
---

diff --git a/site/src/content/docs/components/progress.mdx b/site/src/content/docs/components/progress.mdx
index c18a3a8b9e..6e00979f23 100644
--- a/site/src/content/docs/components/progress.mdx
+++ b/site/src/content/docs/components/progress.mdx
@@ -17,7 +17,9 @@ Progress components are built with two HTML elements, some CSS to set the width,
 
 Put that all together, and you have the following examples.
 
-<Example code={`<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+<Example
+  class="vstack gap-3"
+  code={`<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
     <div class="progress-bar" style="width: 0%"></div>
   </div>
   <div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
@@ -47,7 +49,9 @@ Bootstrap provides a handful of [utilities for setting width]([[docsref:/utiliti
 
 You only set a `height` value on the `.progress` container, so if you change that value, the inner `.progress-bar` will automatically resize accordingly.
 
-<Example code={`<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
+<Example
+  class="vstack gap-3"
+  code={`<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
     <div class="progress-bar" style="width: 25%"></div>
   </div>
   <div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px">
@@ -76,7 +80,9 @@ If the text can overlap the progress bar, we often recommend displaying the labe
 
 Use background utility classes to change the appearance of individual progress bars.
 
-<Example code={`<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+<Example
+  class="vstack gap-3"
+  code={`<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
     <div class="progress-bar bg-success" style="width: 25%"></div>
   </div>
   <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
@@ -93,7 +99,9 @@ Use background utility classes to change the appearance of individual progress b
 
 If you’re adding labels to progress bars with a custom background color, make sure to also set an appropriate [text color]([[docsref:/utilities/colors#colors]]), so the labels remain readable and have sufficient contrast. We recommend using the [theme contrast]([[docsref:/utilities/theme#contrast]]) helper classes.
 
-<Example code={`<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
+<Example
+  class="vstack gap-3"
+  code={`<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
     <div class="progress-bar theme-success" style="width: 25%">25%</div>
   </div>
   <div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
@@ -126,7 +134,9 @@ You can include multiple progress components inside a container with `.progress-
 
 Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar’s background color.
 
-<Example code={`<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+<Example
+  class="vstack gap-3"
+  code={`<div class="progress" role="progressbar" aria-label="Default striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
     <div class="progress-bar progress-bar-striped" style="width: 10%"></div>
   </div>
   <div class="progress" role="progressbar" aria-label="Success striped example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">