Add v5.3.0 docs (#38658)

2025-08-16 18:44:01 +02:00 · 2023-05-30 18:21:02 +03:00
parent 87498ceeb2
commit 4be8b59d15
232 changed files with 4200 additions and 3253 deletions
--- a/docs/5.3/layout/breakpoints/index.html
+++ b/docs/5.3/layout/breakpoints/index.html
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.">
 <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
-<meta name="generator" content="Hugo 0.111.3">
+<meta name="generator" content="Hugo 0.112.5">

 <meta name="docsearch:language" content="en">
 <meta name="docsearch:version" content="5.3">
@@ -18,7 +18,7 @@

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">

-<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

 <link href="/docs/5.3/assets/css/docs.css" rel="stylesheet">

@@ -531,7 +531,7 @@
    <main class="bd-main order-1">
      <div class="bd-intro pt-2 ps-lg-2">
        <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
-          <div class="mb-3 mb-md-0 d-flex text-nowrap"><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/site/content/docs/5.3/layout/breakpoints.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
+          <div class="mb-3 mb-md-0 d-flex text-nowrap"><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0/site/content/docs/5.3/layout/breakpoints.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
              View on GitHub
            </a>
          </div>
@@ -630,9 +630,9 @@

 <p>Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don&rsquo;t specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.</p>
 <p>These breakpoints are customizable via Sass—you&rsquo;ll find them in a Sass map in our <code>_variables.scss</code> stylesheet.</p>
-<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
+<div class="bd-example-snippet bd-code-snippet bd-file-ref">
    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
-      <a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/scss/_variables.scss">scss/_variables.scss</a>
+      <a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0/scss/_variables.scss">scss/_variables.scss</a>
      <div class="d-flex ms-auto">
        <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
          <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
@@ -647,7 +647,7 @@
 </span></span><span class="line"><span class="cl">  <span class="na">xxl</span><span class="o">:</span> <span class="mi">1400</span><span class="kt">px</span>
 </span></span><span class="line"><span class="cl"><span class="p">);</span>
 </span></span></code></pre></div></div>
-<p>For more information and examples on how to modify our Sass maps and variables, please refer to <a href="/docs/5.3/layout/grid/#sass">the Sass section of the Grid documentation</a>.</p>
+<p>For more information and examples on how to modify our Sass maps and variables, please refer to <a href="/docs/5.3/layout/grid/#css">the CSS section of the Grid documentation</a>.</p>
 <h2 id="media-queries">Media queries <a class="anchor-link" href="#media-queries" aria-label="Link to this section: Media queries"></a></h2>
 <p>Since Bootstrap is developed to be mobile first, we use a handful of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a> to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.</p>
 <h3 id="min-width">Min-width <a class="anchor-link" href="#min-width" aria-label="Link to this section: Min-width"></a></h3>
@@ -761,7 +761,7 @@
        <ul class="list-unstyled small">
          <li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.3/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
          <li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
-          <li class="mb-2">Currently v5.3.0-alpha3.</li>
+          <li class="mb-2">Currently v5.3.0.</li>
        </ul>
      </div>
      <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -810,7 +810,7 @@
  </div>
 </footer>

-    <script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
+    <script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>


 <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -838,10 +838,10 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha3\/dist\/css\/bootstrap.min.css" rel="stylesheet">
+    <link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
-    <${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\-alpha3\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
+    <${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
  </head>
  <body class="p-3 m-0 border-0 ${classes}">

--- a/docs/5.3/layout/columns/index.html
+++ b/docs/5.3/layout/columns/index.html
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. Plus, see how to use column classes to manage widths of non-grid elements.">
 <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
-<meta name="generator" content="Hugo 0.111.3">
+<meta name="generator" content="Hugo 0.112.5">

 <meta name="docsearch:language" content="en">
 <meta name="docsearch:version" content="5.3">
@@ -18,7 +18,7 @@

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">

-<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

 <link href="/docs/5.3/assets/css/docs.css" rel="stylesheet">

@@ -531,7 +531,7 @@
    <main class="bd-main order-1">
      <div class="bd-intro pt-2 ps-lg-2">
        <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
-          <div class="mb-3 mb-md-0 d-flex text-nowrap"><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/site/content/docs/5.3/layout/columns.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
+          <div class="mb-3 mb-md-0 d-flex text-nowrap"><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0/site/content/docs/5.3/layout/columns.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
              View on GitHub
            </a>
          </div>
@@ -603,7 +603,7 @@
 <p>Use flexbox alignment utilities to vertically and horizontally align columns.</p>
 <h3 id="vertical-alignment">Vertical alignment <a class="anchor-link" href="#vertical-alignment" aria-label="Link to this section: Vertical alignment"></a></h3>
 <p>Change the vertical alignment with any of the responsive <code>align-items-*</code> classes.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row bd-example-row-flex-cols">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row bd-example-row-flex-cols">
 <div class="container text-center">
  <div class="row align-items-start">
    <div class="col">
@@ -641,7 +641,7 @@
 </span></span><span class="line"><span class="cl">  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
 </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>

-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row bd-example-row-flex-cols">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row bd-example-row-flex-cols">
 <div class="container text-center">
  <div class="row align-items-center">
    <div class="col">
@@ -679,7 +679,7 @@
 </span></span><span class="line"><span class="cl">  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
 </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>

-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row bd-example-row-flex-cols">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row bd-example-row-flex-cols">
 <div class="container text-center">
  <div class="row align-items-end">
    <div class="col">
@@ -718,7 +718,7 @@
 </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>

 <p>Or, change the alignment of each column individually with any of the responsive <code>.align-self-*</code> classes.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row bd-example-row-flex-cols">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row bd-example-row-flex-cols">
 <div class="container text-center">
  <div class="row">
    <div class="col align-self-start">
@@ -758,7 +758,7 @@

 <h3 id="horizontal-alignment">Horizontal alignment <a class="anchor-link" href="#horizontal-alignment" aria-label="Link to this section: Horizontal alignment"></a></h3>
 <p>Change the horizontal alignment with any of the responsive <code>justify-content-*</code> classes.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container text-center">
  <div class="row justify-content-start">
    <div class="col-4">
@@ -872,7 +872,7 @@

 <h3 id="column-wrapping">Column wrapping <a class="anchor-link" href="#column-wrapping" aria-label="Link to this section: Column wrapping"></a></h3>
 <p>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
@@ -900,7 +900,7 @@

 <h3 id="column-breaks">Column breaks <a class="anchor-link" href="#column-breaks" aria-label="Link to this section: Column breaks"></a></h3>
 <p>Breaking columns to a new line in flexbox requires a small hack: add an element with <code>width: 100%</code> wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple <code>.row</code>s, but not every implementation method can account for this.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
@@ -937,7 +937,7 @@
 </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>

 <p>You may also apply this break at specific breakpoints with our <a href="/docs/5.3/utilities/display/">responsive display utilities</a>.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container text-center">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
@@ -976,7 +976,7 @@
 <h2 id="reordering">Reordering <a class="anchor-link" href="#reordering" aria-label="Link to this section: Reordering"></a></h2>
 <h3 id="order-classes">Order classes <a class="anchor-link" href="#order-classes" aria-label="Link to this section: Order classes"></a></h3>
 <p>Use <code>.order-</code> classes for controlling the <strong>visual order</strong> of your content. These classes are responsive, so you can set the <code>order</code> by breakpoint (e.g., <code>.order-1.order-md-2</code>). Includes support for <code>1</code> through <code>5</code> across all six grid tiers. If you need more <code>.order-*</code> classes, you can modify the default number via Sass variable.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container text-center">
  <div class="row">
    <div class="col">
@@ -1015,7 +1015,7 @@
 </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>

 <p>There are also responsive <code>.order-first</code> and <code>.order-last</code> classes that change the <code>order</code> of an element by applying <code>order: -1</code> and <code>order: 6</code>, respectively. These classes can also be intermixed with the numbered <code>.order-*</code> classes as needed.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container text-center">
  <div class="row">
    <div class="col order-last">
@@ -1057,7 +1057,7 @@
 <p>You can offset grid columns in two ways: our responsive <code>.offset-</code> grid classes and our <a href="/docs/5.3/utilities/spacing/">margin utilities</a>. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.</p>
 <h4 id="offset-classes">Offset classes <a class="anchor-link" href="#offset-classes" aria-label="Link to this section: Offset classes"></a></h4>
 <p>Move columns to the right using <code>.offset-md-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.offset-md-4</code> moves <code>.col-md-4</code> over four columns.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
@@ -1096,7 +1096,7 @@
 </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>

 <p>In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in <a href="/docs/5.3/examples/grid/">the grid example</a>.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container text-center">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
@@ -1130,7 +1130,7 @@

 <h4 id="margin-utilities">Margin utilities <a class="anchor-link" href="#margin-utilities" aria-label="Link to this section: Margin utilities"></a></h4>
 <p>With the move to flexbox in v4, you can use margin utilities like <code>.me-auto</code> to force sibling columns away from one another.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
@@ -1172,7 +1172,7 @@

 <h2 id="standalone-column-classes">Standalone column classes <a class="anchor-link" href="#standalone-column-classes" aria-label="Link to this section: Standalone column classes"></a></h2>
 <p>The <code>.col-*</code> classes can also be used outside a <code>.row</code> to give an element a specific width. Whenever column classes are used as non-direct children of a row, the paddings are omitted.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="col-3 p-3 mb-2">
  .col-3: width of 25%
 </div>
@@ -1199,7 +1199,7 @@
 </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>

 <p>The classes can be used together with utilities to create responsive floated images. Make sure to wrap the content in a <a href="/docs/5.3/helpers/clearfix/"><code>.clearfix</code></a> wrapper to clear the float if the text is shorter.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
 <div class="clearfix">
  <svg class="bd-placeholder-img col-md-6 float-md-end mb-3 ms-md-3" width="100%" height="210" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Responsive floated image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Responsive floated image</text></svg>

@@ -1258,7 +1258,7 @@
        <ul class="list-unstyled small">
          <li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.3/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
          <li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
-          <li class="mb-2">Currently v5.3.0-alpha3.</li>
+          <li class="mb-2">Currently v5.3.0.</li>
        </ul>
      </div>
      <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -1307,7 +1307,7 @@
  </div>
 </footer>

-    <script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
+    <script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>


 <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -1335,10 +1335,10 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha3\/dist\/css\/bootstrap.min.css" rel="stylesheet">
+    <link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
-    <${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\-alpha3\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
+    <${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
  </head>
  <body class="p-3 m-0 border-0 ${classes}">

--- a/docs/5.3/layout/containers/index.html
+++ b/docs/5.3/layout/containers/index.html
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.">
 <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
-<meta name="generator" content="Hugo 0.111.3">
+<meta name="generator" content="Hugo 0.112.5">

 <meta name="docsearch:language" content="en">
 <meta name="docsearch:version" content="5.3">
@@ -18,7 +18,7 @@

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">

-<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

 <link href="/docs/5.3/assets/css/docs.css" rel="stylesheet">

@@ -531,7 +531,7 @@
    <main class="bd-main order-1">
      <div class="bd-intro pt-2 ps-lg-2">
        <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
-          <div class="mb-3 mb-md-0 d-flex text-nowrap"><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/site/content/docs/5.3/layout/containers.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
+          <div class="mb-3 mb-md-0 d-flex text-nowrap"><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0/site/content/docs/5.3/layout/containers.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
              View on GitHub
            </a>
          </div>
@@ -557,7 +557,12 @@
    <li><a href="#default-container">Default container</a></li>
    <li><a href="#responsive-containers">Responsive containers</a></li>
    <li><a href="#fluid-containers">Fluid containers</a></li>
-    <li><a href="#sass">Sass</a></li>
+    <li><a href="#css">CSS</a>
+      <ul>
+        <li><a href="#sass-variables">Sass variables</a></li>
+        <li><a href="#sass-mixins">Sass mixins</a></li>
+      </ul>
+    </li>
  </ul>
 </nav>
          </div>
@@ -673,11 +678,12 @@
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;container-fluid&#34;</span><span class="p">&gt;</span>
 </span></span><span class="line"><span class="cl">  ...
 </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
-</span></span></code></pre></div><h2 id="sass">Sass <a class="anchor-link" href="#sass" aria-label="Link to this section: Sass"></a></h2>
+</span></span></code></pre></div><h2 id="css">CSS <a class="anchor-link" href="#css" aria-label="Link to this section: CSS"></a></h2>
+<h3 id="sass-variables">Sass variables <a class="anchor-link" href="#sass-variables" aria-label="Link to this section: Sass variables"></a></h3>
 <p>As shown above, Bootstrap generates a series of predefined container classes to help you build the layouts you desire. You may customize these predefined container classes by modifying the Sass map (found in <code>_variables.scss</code>) that powers them:</p>
-<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
+<div class="bd-example-snippet bd-code-snippet bd-file-ref">
    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
-      <a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/scss/_variables.scss">scss/_variables.scss</a>
+      <a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0/scss/_variables.scss">scss/_variables.scss</a>
      <div class="d-flex ms-auto">
        <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
          <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
@@ -691,6 +697,8 @@
 </span></span><span class="line"><span class="cl">  <span class="na">xxl</span><span class="o">:</span> <span class="mi">1320</span><span class="kt">px</span>
 </span></span><span class="line"><span class="cl"><span class="p">);</span>
 </span></span></code></pre></div></div>
+<p>For more information and examples on how to modify our Sass maps and variables, please refer to <a href="/docs/5.3/layout/grid/#css">the Sass section of the Grid documentation</a>.</p>
+<h3 id="sass-mixins">Sass mixins <a class="anchor-link" href="#sass-mixins" aria-label="Link to this section: Sass mixins"></a></h3>
 <p>In addition to customizing the Sass, you can also create your own containers with our Sass mixin.</p>
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="c1">// Source mixin
 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="k">@mixin</span><span class="nf"> make-container</span><span class="p">(</span><span class="nv">$padding-x</span><span class="o">:</span> <span class="nv">$container-padding-x</span><span class="p">)</span> <span class="p">{</span>
@@ -705,8 +713,7 @@
 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nc">.custom-container</span> <span class="p">{</span>
 </span></span><span class="line"><span class="cl">  <span class="k">@include</span><span class="nd"> make-container</span><span class="p">();</span>
 </span></span><span class="line"><span class="cl"><span class="p">}</span>
-</span></span></code></pre></div><p>For more information and examples on how to modify our Sass maps and variables, please refer to <a href="/docs/5.3/layout/grid/#sass">the Sass section of the Grid documentation</a>.</p>
-
+</span></span></code></pre></div>
      </div>
    </main>
  </div>
@@ -723,7 +730,7 @@
        <ul class="list-unstyled small">
          <li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.3/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
          <li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
-          <li class="mb-2">Currently v5.3.0-alpha3.</li>
+          <li class="mb-2">Currently v5.3.0.</li>
        </ul>
      </div>
      <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -772,7 +779,7 @@
  </div>
 </footer>

-    <script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
+    <script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>


 <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -800,10 +807,10 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha3\/dist\/css\/bootstrap.min.css" rel="stylesheet">
+    <link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
-    <${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\-alpha3\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
+    <${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
  </head>
  <body class="p-3 m-0 border-0 ${classes}">

--- a/docs/5.3/layout/css-grid/index.html
+++ b/docs/5.3/layout/css-grid/index.html
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets.">
 <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
-<meta name="generator" content="Hugo 0.111.3">
+<meta name="generator" content="Hugo 0.112.5">

 <meta name="docsearch:language" content="en">
 <meta name="docsearch:version" content="5.3">
@@ -18,7 +18,7 @@

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">

-<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

 <link href="/docs/5.3/assets/css/docs.css" rel="stylesheet">

@@ -531,7 +531,7 @@
    <main class="bd-main order-1">
      <div class="bd-intro pt-2 ps-lg-2">
        <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
-          <div class="mb-3 mb-md-0 d-flex text-nowrap"><small class="d-inline-flex px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 me-2">Added in v5.1</small><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/site/content/docs/5.3/layout/css-grid.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
+          <div class="mb-3 mb-md-0 d-flex text-nowrap"><small class="d-inline-flex px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 me-2">Added in v5.1</small><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0/site/content/docs/5.3/layout/css-grid.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
              View on GitHub
            </a>
          </div>
@@ -627,7 +627,7 @@
 <h2 id="examples">Examples <a class="anchor-link" href="#examples" aria-label="Link to this section: Examples"></a></h2>
 <h3 id="three-columns">Three columns <a class="anchor-link" href="#three-columns" aria-label="Link to this section: Three columns"></a></h3>
 <p>Three equal-width columns across all viewports and devices can be created by using the <code>.g-col-4</code> classes. Add <a href="#responsive">responsive classes</a> to change the layout by viewport size.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-cssgrid">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-cssgrid">
 <div class="grid text-center">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
@@ -651,7 +651,7 @@

 <h3 id="responsive">Responsive <a class="anchor-link" href="#responsive" aria-label="Link to this section: Responsive"></a></h3>
 <p>Use responsive classes to adjust your layout across viewports. Here we start with two columns on the narrowest viewports, and then grow to three columns on medium viewports and above.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-cssgrid">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-cssgrid">
 <div class="grid text-center">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
@@ -674,7 +674,7 @@
 </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>

 <p>Compare that to this two column layout at all viewports.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-cssgrid">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-cssgrid">
 <div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
@@ -696,7 +696,7 @@

 <h2 id="wrapping">Wrapping <a class="anchor-link" href="#wrapping" aria-label="Link to this section: Wrapping"></a></h2>
 <p>Grid items automatically wrap to the next line when there&rsquo;s no more room horizontally. Note that the <code>gap</code> applies to horizontal and vertical gaps between grid items.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-cssgrid">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-cssgrid">
 <div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
@@ -724,7 +724,7 @@

 <h2 id="starts">Starts <a class="anchor-link" href="#starts" aria-label="Link to this section: Starts"></a></h2>
 <p>Start classes aim to replace our default grid&rsquo;s offset classes, but they&rsquo;re not entirely the same. CSS Grid creates a grid template through styles that tell browsers to &ldquo;start at this column&rdquo; and &ldquo;end at this column.&rdquo; Those properties are <code>grid-column-start</code> and <code>grid-column-end</code>. Start classes are shorthand for the former. Pair them with the column classes to size and align your columns however you need. Start classes begin at <code>1</code> as <code>0</code> is an invalid value for these properties.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-cssgrid">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-cssgrid">
 <div class="grid text-center">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
@@ -746,7 +746,7 @@

 <h2 id="auto-columns">Auto columns <a class="anchor-link" href="#auto-columns" aria-label="Link to this section: Auto columns"></a></h2>
 <p>When there are no classes on the grid items (the immediate children of a <code>.grid</code>), each grid item will automatically be sized to one column.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-cssgrid">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-cssgrid">
 <div class="grid text-center">
  <div>1</div>
  <div>1</div>
@@ -787,7 +787,7 @@
 </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>

 <p>This behavior can be mixed with grid column classes.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-cssgrid">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-cssgrid">
 <div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div>1</div>
@@ -826,7 +826,7 @@
 <li>The third auto-column has no nested content.</li>
 </ul>
 <p>In practice this allows for more complex and custom layouts when compared to our default grid system.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-cssgrid">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-cssgrid">
 <div class="grid text-center" style="--bs-columns: 3;">
  <div>
    First auto-column
@@ -906,7 +906,7 @@
 <p>These CSS variables have no default value; instead, they apply fallback values that are used <em>until</em> a local instance is provided. For example, we use <code>var(--bs-rows, 1)</code> for our CSS Grid rows, which ignores <code>--bs-rows</code> because that hasn&rsquo;t been set anywhere yet. Once it is, the <code>.grid</code> instance will use that value instead of the fallback value of <code>1</code>.</p>
 <h3 id="no-grid-classes">No grid classes <a class="anchor-link" href="#no-grid-classes" aria-label="Link to this section: No grid classes"></a></h3>
 <p>Immediate children elements of <code>.grid</code> are grid items, so they&rsquo;ll be sized without explicitly adding a <code>.g-col</code> class.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-cssgrid">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-cssgrid">
 <div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
@@ -930,7 +930,7 @@

 <h3 id="columns-and-gaps">Columns and gaps <a class="anchor-link" href="#columns-and-gaps" aria-label="Link to this section: Columns and gaps"></a></h3>
 <p>Adjust the number of columns and the gap.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-cssgrid">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-cssgrid">
 <div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
@@ -950,7 +950,7 @@
 </span></span><span class="line"><span class="cl">  <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;g-col-2&#34;</span><span class="p">&gt;</span>.g-col-2<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
 </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>

-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-cssgrid">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-cssgrid">
 <div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
@@ -972,7 +972,7 @@

 <h3 id="adding-rows">Adding rows <a class="anchor-link" href="#adding-rows" aria-label="Link to this section: Adding rows"></a></h3>
 <p>Adding more rows and changing the placement of columns:</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-cssgrid">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-cssgrid">
 <div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
@@ -996,7 +996,7 @@

 <h3 id="gaps">Gaps <a class="anchor-link" href="#gaps" aria-label="Link to this section: Gaps"></a></h3>
 <p>Change the vertical gaps only by modifying the <code>row-gap</code>. Note that we use <code>gap</code> on <code>.grid</code>s, but <code>row-gap</code> and <code>column-gap</code> can be modified as needed.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-cssgrid">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-cssgrid">
 <div class="grid text-center" style="row-gap: 0;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
@@ -1023,7 +1023,7 @@
 </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>

 <p>Because of that, you can have different vertical and horizontal <code>gap</code>s, which can take a single value (all sides) or a pair of values (vertical and horizontal). This can be applied with an inline style for <code>gap</code>, or with our <code>--bs-gap</code> CSS variable.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-cssgrid">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-cssgrid">
 <div class="grid text-center" style="--bs-gap: .25rem 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
@@ -1056,7 +1056,7 @@
 <li>Use inline or custom styles to augment the provided classes.</li>
 </ul>
 <p>For example, you can increase the column count and change the gap size, and then size your &ldquo;columns&rdquo; with a mix of inline styles and predefined CSS Grid column classes (e.g., <code>.g-col-4</code>).</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-cssgrid">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-cssgrid">
 <div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14 columns</div>
  <div class="g-col-4">.g-col-4</div>
@@ -1093,7 +1093,7 @@
        <ul class="list-unstyled small">
          <li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.3/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
          <li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
-          <li class="mb-2">Currently v5.3.0-alpha3.</li>
+          <li class="mb-2">Currently v5.3.0.</li>
        </ul>
      </div>
      <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -1142,7 +1142,7 @@
  </div>
 </footer>

-    <script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
+    <script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>


 <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -1170,10 +1170,10 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha3\/dist\/css\/bootstrap.min.css" rel="stylesheet">
+    <link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
-    <${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\-alpha3\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
+    <${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
  </head>
  <body class="p-3 m-0 border-0 ${classes}">

--- a/docs/5.3/layout/grid/index.html
+++ b/docs/5.3/layout/grid/index.html
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.">
 <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
-<meta name="generator" content="Hugo 0.111.3">
+<meta name="generator" content="Hugo 0.112.5">

 <meta name="docsearch:language" content="en">
 <meta name="docsearch:version" content="5.3">
@@ -18,7 +18,7 @@

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">

-<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

 <link href="/docs/5.3/assets/css/docs.css" rel="stylesheet">

@@ -531,7 +531,7 @@
    <main class="bd-main order-1">
      <div class="bd-intro pt-2 ps-lg-2">
        <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
-          <div class="mb-3 mb-md-0 d-flex text-nowrap"><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/site/content/docs/5.3/layout/grid.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
+          <div class="mb-3 mb-md-0 d-flex text-nowrap"><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0/site/content/docs/5.3/layout/grid.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
              View on GitHub
            </a>
          </div>
@@ -600,7 +600,7 @@
 <strong>New to or unfamiliar with flexbox?</strong> <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background">Read this CSS Tricks flexbox guide</a> for background, terminology, guidelines, and code snippets.
 </div>

-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container text-center">
  <div class="row">
    <div class="col">
@@ -658,7 +658,7 @@
 <p><strong>Gutters are also responsive and customizable.</strong> <a href="/docs/5.3/layout/gutters/">Gutter classes are available</a> across all breakpoints, with all the same sizes as our <a href="/docs/5.3/utilities/spacing/">margin and padding spacing</a>. Change horizontal gutters with <code>.gx-*</code> classes, vertical gutters with <code>.gy-*</code>, or all gutters with <code>.g-*</code> classes. <code>.g-0</code> is also available to remove gutters.</p>
 </li>
 <li>
-<p><strong>Sass variables, maps, and mixins power the grid.</strong> If you don&rsquo;t want to use the predefined grid classes in Bootstrap, you can use our <a href="#sass">grid&rsquo;s source Sass</a> to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.</p>
+<p><strong>Sass variables, maps, and mixins power the grid.</strong> If you don&rsquo;t want to use the predefined grid classes in Bootstrap, you can use our <a href="#sass-variables">grid&rsquo;s source Sass</a> to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.</p>
 </li>
 </ul>
 <p>Be aware of the limitations and <a href="https://github.com/philipwalton/flexbugs">bugs around flexbox</a>, like the <a href="https://github.com/philipwalton/flexbugs#flexbug-9">inability to use some HTML elements as flex containers</a>.</p>
@@ -750,7 +750,7 @@
 <p>Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like <code>.col-sm-6</code>.</p>
 <h3 id="equal-width">Equal-width <a class="anchor-link" href="#equal-width" aria-label="Link to this section: Equal-width"></a></h3>
 <p>For example, here are two grid layouts that apply to every device and viewport, from <code>xs</code> to <code>xxl</code>. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container text-center">
  <div class="row">
    <div class="col">
@@ -806,7 +806,7 @@

 <h3 id="setting-one-column-width">Setting one column width <a class="anchor-link" href="#setting-one-column-width" aria-label="Link to this section: Setting one column width"></a></h3>
 <p>Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container text-center">
  <div class="row">
    <div class="col">
@@ -868,7 +868,7 @@

 <h3 id="variable-width-content">Variable width content <a class="anchor-link" href="#variable-width-content" aria-label="Link to this section: Variable width content"></a></h3>
 <p>Use <code>col-{breakpoint}-auto</code> classes to size columns based on the natural width of their content.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container text-center">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
@@ -932,7 +932,7 @@
 <p>Bootstrap&rsquo;s grid includes six tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.</p>
 <h3 id="all-breakpoints">All breakpoints <a class="anchor-link" href="#all-breakpoints" aria-label="Link to this section: All breakpoints"></a></h3>
 <p>For grids that are the same from the smallest of devices to the largest, use the <code>.col</code> and <code>.col-*</code> classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to <code>.col</code>.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container text-center">
  <div class="row">
    <div class="col">col</div>
@@ -970,7 +970,7 @@

 <h3 id="stacked-to-horizontal">Stacked to horizontal <a class="anchor-link" href="#stacked-to-horizontal" aria-label="Link to this section: Stacked to horizontal"></a></h3>
 <p>Using a single set of <code>.col-sm-*</code> classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (<code>sm</code>).</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container text-center">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
@@ -1006,7 +1006,7 @@

 <h3 id="mix-and-match">Mix and match <a class="anchor-link" href="#mix-and-match" aria-label="Link to this section: Mix and match"></a></h3>
 <p>Don&rsquo;t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container text-center">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
@@ -1061,7 +1061,7 @@
 <h3 id="row-columns">Row columns <a class="anchor-link" href="#row-columns" aria-label="Link to this section: Row columns"></a></h3>
 <p>Use the responsive <code>.row-cols-*</code> classes to quickly set the number of columns that best render your content and layout. Whereas normal <code>.col-*</code> classes apply to the individual columns (e.g., <code>.col-md-4</code>), the row columns classes are set on the parent <code>.row</code> as a shortcut. With <code>.row-cols-auto</code> you can give the columns their natural width.</p>
 <p>Use these row columns classes to quickly create basic grid layouts or to control your card layouts.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container text-center">
  <div class="row row-cols-2">
    <div class="col">Column</div>
@@ -1089,7 +1089,7 @@
 </span></span><span class="line"><span class="cl">  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
 </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>

-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container text-center">
  <div class="row row-cols-3">
    <div class="col">Column</div>
@@ -1117,7 +1117,7 @@
 </span></span><span class="line"><span class="cl">  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
 </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>

-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
@@ -1145,7 +1145,7 @@
 </span></span><span class="line"><span class="cl">  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
 </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>

-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
@@ -1173,7 +1173,7 @@
 </span></span><span class="line"><span class="cl">  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
 </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>

-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
@@ -1201,7 +1201,7 @@
 </span></span><span class="line"><span class="cl">  <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
 </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>

-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container text-center">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
@@ -1241,7 +1241,7 @@
 </span></span><span class="line"><span class="cl"><span class="p">}</span>
 </span></span></code></pre></div><h2 id="nesting">Nesting <a class="anchor-link" href="#nesting" aria-label="Link to this section: Nesting"></a></h2>
 <p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-sm-*</code> columns within an existing <code>.col-sm-*</code> column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
@@ -1294,9 +1294,9 @@
 <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$grid-columns</span><span class="o">:</span>      <span class="mi">12</span><span class="p">;</span>
 </span></span><span class="line"><span class="cl"><span class="nv">$grid-gutter-width</span><span class="o">:</span> <span class="mi">1</span><span class="mf">.5</span><span class="kt">rem</span><span class="p">;</span>
 </span></span><span class="line"><span class="cl"><span class="nv">$grid-row-columns</span><span class="o">:</span>  <span class="mi">6</span><span class="p">;</span>
-</span></span></code></pre></div><div class="bd-example-snippet bd-code-snippet bd-scss-docs">
+</span></span></code></pre></div><div class="bd-example-snippet bd-code-snippet bd-file-ref">
    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
-      <a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/scss/_variables.scss">scss/_variables.scss</a>
+      <a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0/scss/_variables.scss">scss/_variables.scss</a>
      <div class="d-flex ms-auto">
        <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
          <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
@@ -1311,9 +1311,9 @@
 </span></span><span class="line"><span class="cl">  <span class="na">xxl</span><span class="o">:</span> <span class="mi">1400</span><span class="kt">px</span>
 </span></span><span class="line"><span class="cl"><span class="p">);</span>
 </span></span></code></pre></div></div>
-<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
+<div class="bd-example-snippet bd-code-snippet bd-file-ref">
    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
-      <a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/scss/_variables.scss">scss/_variables.scss</a>
+      <a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0/scss/_variables.scss">scss/_variables.scss</a>
      <div class="d-flex ms-auto">
        <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
          <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
@@ -1375,7 +1375,7 @@
 </span></span><span class="line"><span class="cl">    <span class="k">@include</span><span class="nd"> make-col</span><span class="p">(</span><span class="mi">4</span><span class="p">);</span>
 </span></span><span class="line"><span class="cl">  <span class="p">}</span>
 </span></span><span class="line"><span class="cl"><span class="p">}</span>
-</span></span></code></pre></div><div class="bd-example-snippet bd-code-snippet"><div class="bd-example">
+</span></span></code></pre></div><div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0">
 <div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
@@ -1438,7 +1438,7 @@
        <ul class="list-unstyled small">
          <li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.3/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
          <li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
-          <li class="mb-2">Currently v5.3.0-alpha3.</li>
+          <li class="mb-2">Currently v5.3.0.</li>
        </ul>
      </div>
      <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -1487,7 +1487,7 @@
  </div>
 </footer>

-    <script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
+    <script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>


 <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -1515,10 +1515,10 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha3\/dist\/css\/bootstrap.min.css" rel="stylesheet">
+    <link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
-    <${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\-alpha3\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
+    <${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
  </head>
  <body class="p-3 m-0 border-0 ${classes}">

--- a/docs/5.3/layout/gutters/index.html
+++ b/docs/5.3/layout/gutters/index.html
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="Gutters are the padding between your columns, used to responsively space and align content in the Bootstrap grid system.">
 <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
-<meta name="generator" content="Hugo 0.111.3">
+<meta name="generator" content="Hugo 0.112.5">

 <meta name="docsearch:language" content="en">
 <meta name="docsearch:version" content="5.3">
@@ -18,7 +18,7 @@

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">

-<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

 <link href="/docs/5.3/assets/css/docs.css" rel="stylesheet">

@@ -531,7 +531,7 @@
    <main class="bd-main order-1">
      <div class="bd-intro pt-2 ps-lg-2">
        <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
-          <div class="mb-3 mb-md-0 d-flex text-nowrap"><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/site/content/docs/5.3/layout/gutters.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
+          <div class="mb-3 mb-md-0 d-flex text-nowrap"><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0/site/content/docs/5.3/layout/gutters.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
              View on GitHub
            </a>
          </div>
@@ -583,7 +583,7 @@
 </ul>
 <h2 id="horizontal-gutters">Horizontal gutters <a class="anchor-link" href="#horizontal-gutters" aria-label="Link to this section: Horizontal gutters"></a></h2>
 <p><code>.gx-*</code> classes can be used to control the horizontal gutter widths. The <code>.container</code> or <code>.container-fluid</code> parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we&rsquo;ve increased the padding with <code>.px-4</code>:</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-cols">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-cols">
 <div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
@@ -616,7 +616,7 @@
 </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span></span></span></code></pre></div></div>

 <p>An alternative solution is to add a wrapper around the <code>.row</code> with the <code>.overflow-hidden</code> class:</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-cols">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-cols">
 <div class="container overflow-hidden text-center">
  <div class="row gx-5">
    <div class="col">
@@ -650,7 +650,7 @@

 <h2 id="vertical-gutters">Vertical gutters <a class="anchor-link" href="#vertical-gutters" aria-label="Link to this section: Vertical gutters"></a></h2>
 <p><code>.gy-*</code> classes can be used to control the vertical gutter widths within a row when columns wrap to new lines. Like the horizontal gutters, the vertical gutters can cause some overflow below the <code>.row</code> at the end of a page. If this occurs, you add a wrapper around <code>.row</code> with the <code>.overflow-hidden</code> class:</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-cols">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-cols">
 <div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-6">
@@ -696,7 +696,7 @@

 <h2 id="horizontal--vertical-gutters">Horizontal &amp; vertical gutters <a class="anchor-link" href="#horizontal--vertical-gutters" aria-label="Link to this section: Horizontal &amp; vertical gutters"></a></h2>
 <p>Use <code>.g-*</code> classes to control the horizontal and vertical grid gutters. In the example below, we use a smaller gutter width, so there isn&rsquo;t a need for the <code>.overflow-hidden</code> wrapper class.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-cols">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-cols">
 <div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
@@ -742,7 +742,7 @@

 <h2 id="row-columns-gutters">Row columns gutters <a class="anchor-link" href="#row-columns-gutters" aria-label="Link to this section: Row columns gutters"></a></h2>
 <p>Gutter classes can also be added to <a href="/docs/5.3/layout/grid/#row-columns">row columns</a>. In the following example, we use responsive row columns and responsive gutter classes.</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-cols">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-cols">
 <div class="container text-center">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
@@ -826,7 +826,7 @@
 <p>The gutters between columns in our predefined grid classes can be removed with <code>.g-0</code>. This removes the negative <code>margin</code>s from <code>.row</code> and the horizontal <code>padding</code> from all immediate children columns.</p>
 <p><strong>Need an edge-to-edge design?</strong> Drop the parent <code>.container</code> or <code>.container-fluid</code> and add <code>.mx-0</code> to the <code>.row</code> to prevent overflow.</p>
 <p>In practice, here&rsquo;s how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).</p>
-<div class="bd-example-snippet bd-code-snippet"><div class="bd-example bd-example-row">
+<div class="bd-example-snippet bd-code-snippet"><div class="bd-example m-0 border-0 bd-example-row">
 <div class="row g-0 text-center">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
@@ -874,7 +874,7 @@
        <ul class="list-unstyled small">
          <li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.3/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
          <li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
-          <li class="mb-2">Currently v5.3.0-alpha3.</li>
+          <li class="mb-2">Currently v5.3.0.</li>
        </ul>
      </div>
      <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -923,7 +923,7 @@
  </div>
 </footer>

-    <script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
+    <script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>


 <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -951,10 +951,10 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha3\/dist\/css\/bootstrap.min.css" rel="stylesheet">
+    <link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
-    <${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\-alpha3\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
+    <${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
  </head>
  <body class="p-3 m-0 border-0 ${classes}">

--- a/docs/5.3/layout/utilities/index.html
+++ b/docs/5.3/layout/utilities/index.html
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.">
 <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
-<meta name="generator" content="Hugo 0.111.3">
+<meta name="generator" content="Hugo 0.112.5">

 <meta name="docsearch:language" content="en">
 <meta name="docsearch:version" content="5.3">
@@ -18,7 +18,7 @@

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">

-<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

 <link href="/docs/5.3/assets/css/docs.css" rel="stylesheet">

@@ -531,7 +531,7 @@
    <main class="bd-main order-1">
      <div class="bd-intro pt-2 ps-lg-2">
        <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
-          <div class="mb-3 mb-md-0 d-flex text-nowrap"><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/site/content/docs/5.3/layout/utilities.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
+          <div class="mb-3 mb-md-0 d-flex text-nowrap"><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0/site/content/docs/5.3/layout/utilities.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
              View on GitHub
            </a>
          </div>
@@ -592,7 +592,7 @@
        <ul class="list-unstyled small">
          <li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.3/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
          <li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
-          <li class="mb-2">Currently v5.3.0-alpha3.</li>
+          <li class="mb-2">Currently v5.3.0.</li>
        </ul>
      </div>
      <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -641,7 +641,7 @@
  </div>
 </footer>

-    <script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
+    <script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>


 <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -669,10 +669,10 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha3\/dist\/css\/bootstrap.min.css" rel="stylesheet">
+    <link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
-    <${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\-alpha3\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
+    <${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
  </head>
  <body class="p-3 m-0 border-0 ${classes}">

--- a/docs/5.3/layout/z-index/index.html
+++ b/docs/5.3/layout/z-index/index.html
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="description" content="While not a part of Bootstrap&rsquo;s grid system, z-indexes play an important part in how our components overlay and interact with one another.">
 <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
-<meta name="generator" content="Hugo 0.111.3">
+<meta name="generator" content="Hugo 0.112.5">

 <meta name="docsearch:language" content="en">
 <meta name="docsearch:version" content="5.3">
@@ -18,7 +18,7 @@

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">

-<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+<link href="/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

 <link href="/docs/5.3/assets/css/docs.css" rel="stylesheet">

@@ -531,7 +531,7 @@
    <main class="bd-main order-1">
      <div class="bd-intro pt-2 ps-lg-2">
        <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
-          <div class="mb-3 mb-md-0 d-flex text-nowrap"><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/site/content/docs/5.3/layout/z-index.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
+          <div class="mb-3 mb-md-0 d-flex text-nowrap"><a class="btn btn-sm btn-bd-light rounded-2" href="https://github.com/twbs/bootstrap/blob/v5.3.0/site/content/docs/5.3/layout/z-index.md" title="View and edit this file on GitHub" target="_blank" rel="noopener">
              View on GitHub
            </a>
          </div>
@@ -550,9 +550,9 @@
        <p>Several Bootstrap components utilize <code>z-index</code>, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that&rsquo;s been designed to properly layer navigation, tooltips and popovers, modals, and more.</p>
 <p>These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There&rsquo;s no reason we couldn&rsquo;t have used <code>100</code>+ or <code>500</code>+.</p>
 <p>We don&rsquo;t encourage customization of these individual values; should you change one, you likely need to change them all.</p>
-<div class="bd-example-snippet bd-code-snippet bd-scss-docs">
+<div class="bd-example-snippet bd-code-snippet bd-file-ref">
    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
-      <a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0-alpha3/scss/_variables.scss">scss/_variables.scss</a>
+      <a class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="https://github.com/twbs/bootstrap/blob/v5.3.0/scss/_variables.scss">scss/_variables.scss</a>
      <div class="d-flex ms-auto">
        <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
          <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
@@ -587,7 +587,7 @@
        <ul class="list-unstyled small">
          <li class="mb-2">Designed and built with all the love in the world by the <a href="/docs/5.3/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
          <li class="mb-2">Code licensed <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</li>
-          <li class="mb-2">Currently v5.3.0-alpha3.</li>
+          <li class="mb-2">Currently v5.3.0.</li>
        </ul>
      </div>
      <div class="col-6 col-lg-2 offset-lg-1 mb-3">
@@ -636,7 +636,7 @@
  </div>
 </footer>

-    <script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
+    <script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>


 <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
@@ -664,10 +664,10 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0-alpha3\/dist\/css\/bootstrap.min.css" rel="stylesheet">
+    <link href="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.0\/dist\/css\/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
-    <${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\-alpha3\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
+    <${'script'} src="https:\/\/cdn\.jsdelivr\.net\/npm\/bootstrap@5\.3\.0\/dist\/js\/bootstrap\.bundle\.min\.js"></${'script'}>
  </head>
  <body class="p-3 m-0 border-0 ${classes}">