187 files changed, 6504 insertions, 2207 deletions

diff --git a/site/content/docs/5.0/_index.html b/site/content/docs/5.0/_index.html
deleted file mode 100644
index 0a758d2bf..000000000
--- a/site/content/docs/5.0/_index.html
+++ /dev/null
@@ -1,5 +0,0 @@
----
-layout: redirect
-sitemap_exclude: true
-redirect: "/docs/5.0/getting-started/introduction/"
----
diff --git a/site/content/docs/5.0/examples/blog-rtl/index.html b/site/content/docs/5.0/examples/blog-rtl/index.html
deleted file mode 100644
index c72171770..000000000
--- a/site/content/docs/5.0/examples/blog-rtl/index.html
+++ /dev/null
@@ -1,202 +0,0 @@
----
-layout: examples
-title: قالب المدونة
-direction: rtl
-extra_css:
-  - "https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap"
-  - "../blog/blog.rtl.css"
-include_js: false
----
-
-<div class="container">
-  <header class="blog-header py-3">
-    <div class="row flex-nowrap justify-content-between align-items-center">
-      <div class="col-4 pt-1">
-        <a class="link-secondary" href="#">الإشتراك</a>
-      </div>
-      <div class="col-4 text-center">
-        <a class="blog-header-logo text-dark" href="#">كبير</a>
-      </div>
-      <div class="col-4 d-flex justify-content-end align-items-center">
-        <a class="link-secondary" href="#" aria-label="بحث">
-          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24"><title>بحث</title><circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2"/></svg>
-        </a>
-        <a class="btn btn-sm btn-outline-secondary" href="#">سجل</a>
-      </div>
-    </div>
-  </header>
-
-  <div class="nav-scroller py-1 mb-2">
-    <nav class="nav d-flex justify-content-between">
-      <a class="p-2 link-secondary" href="#">العالمية</a>
-      <a class="p-2 link-secondary" href="#">نحن.</a>
-      <a class="p-2 link-secondary" href="#">تقنية</a>
-      <a class="p-2 link-secondary" href="#">التصميم</a>
-      <a class="p-2 link-secondary" href="#">حضاره</a>
-      <a class="p-2 link-secondary" href="#">اعمال</a>
-      <a class="p-2 link-secondary" href="#">سياسة</a>
-      <a class="p-2 link-secondary" href="#">رأي</a>
-      <a class="p-2 link-secondary" href="#">علم</a>
-      <a class="p-2 link-secondary" href="#">الصحة</a>
-      <a class="p-2 link-secondary" href="#">أسلوب</a>
-      <a class="p-2 link-secondary" href="#">السفر</a>
-    </nav>
-  </div>
-</div>
-
-<main class="container">
-  <div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
-    <div class="col-md-6 px-0">
-      <h1 class="display-4 fst-italic">عنوان مشاركة مدونة مميزة أطول</h1>
-      <p class="lead my-3">أسطر نصية متعددة تشكل الجزء الأمامي ، لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه المشاركة.</p>
-      <p class="lead mb-0"><a href="#" class="text-white fw-bold">أكمل القراءة...</a></p>
-    </div>
-  </div>
-
-  <div class="row mb-2">
-    <div class="col-md-6">
-      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
-        <div class="col p-4 d-flex flex-column position-static">
-          <strong class="d-inline-block mb-2 text-primary">العالمية</strong>
-          <h3 class="mb-0">مشاركة مميزة</h3>
-          <div class="mb-1 text-muted">12 نوفمبر</div>
-          <p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
-          <a href="#" class="stretched-link">أكمل القراءة</a>
-        </div>
-        <div class="col-auto d-none d-lg-block">
-          {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="ظفري" >}}
-        </div>
-      </div>
-    </div>
-    <div class="col-md-6">
-      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
-        <div class="col p-4 d-flex flex-column position-static">
-          <strong class="d-inline-block mb-2 text-success">التصميم</strong>
-          <h3 class="mb-0">عنوان الوظيفة</h3>
-          <div class="mb-1 text-muted">11 نوفمبر</div>
-          <p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
-          <a href="#" class="stretched-link">أكمل القراءة</a>
-        </div>
-        <div class="col-auto d-none d-lg-block">
-          {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="ظفري" >}}
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="col-md-8">
-      <h3 class="pb-4 mb-4 fst-italic border-bottom">
-        من Firehose
-      </h3>
-
-      <article class="blog-post">
-        <h2 class="blog-post-title">عينة مشاركة مدونة</h2>
-        <p class="blog-post-meta">1 يناير 2014 بواسطة <a href="#"> Mark </a></p>
-
-        <p>تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. الطباعة الأساسية والصور والرموز كلها مدعومة.</p>
-        <hr>
-        <p>إذ مدن وبداية الجنود, ثم ٠٨٠٤ الثقيل هذه. ولم وقرى ومحاولة أي, وقام أراضي وصل مع. ما أخذ يتمكن الصعداء الإثنان, أم هامش أعمال إتفاقية ضرب. عدم إذ بقسوة غرّة، ممثّلة, تم وحتّى تعديل لها. عن ولم بسبب الأوروبيّون, ما كما وتنامت الإتفاقية. وقامت وبعدما بتخصيص و بال, سكان إعلان غريمه الا أي.</p>
-        <blockquote>
-          <p>ذلك هناك ألمانيا إذ. فعل الجنوبي اليابانية بل, جُل مع إنطلاق الموسوعة. واشتدّت وحلفاؤها عن دنو. عن إيو كثيرة المجتمع, وفي شمال حالية انذار أي. إنطلاق تزامناً بالإنزال و تلك.</p>
-        </blockquote>
-        <p>إذ دار السفن الخارجية, عل شيء الأسيوي شموليةً, الفترة والإتحاد أن الا. هو الحكم الحكومة حين. تم ليرتفع بأضرار التبرعات مما, حاول ساعة عن يكن. حيث مع حاول أجزاء الهجوم, يتم بـ قبضتهم الفرنسي.</p>
-        <h2>عنوان</h2>
-        <p>جُل عن اللا وقوعها،, دنو ثم وترك سكان الشمال, كل ذلك وأزيز والقرى. أم عدد مهمّات الساحل, قد تاريخ أفريقيا الإحتفاظ دول. مدن لبلجيكا، واندونيسيا، كل, مع أسر الشمال الأرضية بالسيطرة. في فقامت والروسية كلّ. عن فعل فسقط استبدال.</p>
-        <h3>العنوان الفرعي</h3>
-        <p>موالية استدعى كل حيث, وبدون الأولية الاندونيسية و كما. فعل قد لعدم اليابانية, اليميني الساحلية أن جهة. جُل ما اليميني العسكري الدنمارك. إذ وفي الموسوعة الأمريكي, سابق الأمريكية ثم مدن. تم وفي أوروبا بلديهما ماليزيا،, ويتّفق بالجانب وقد أي.</p>
-        <pre><code>Example code block</code></pre>
-        <p>تحت بولندا، مليارات لم. الشهير الإنزال وفي بل, مع قبل واتّجه الخاسر باستخدام. قدما يونيو مواقعها يكن و, سابق أراضي الإكتفاء حتى كل, و جعل مهمّات المتحدة. أخذ عل الثقيل الضروري لإنعدام, دول جيما أراض الدولارات تم. الخاطفة استعملت وباستثناء ثم انه, به، جدول الأهداف ماليزيا، ان. عن هناك الإحتفاظ غير.</p>
-        <h3>العنوان الفرعي</h3>
-        <p>مرجع استدعى بريطانيا ذلك عن, ٣٠ كان ألمّ الشّعبين الأمريكي. دار تغييرات الشرقية التجارية كل, تم يتبقّ للحكومة كلّ. ثمّة الشتاء الساحل و الى, بل أثره، فاتّبع يتم. دون وترك وتنصيب المبرمة ما, هذه عن زهاء استدعى انتصارهم, يعبأ شواطيء الأرضية به، أم. والتي وفرنسا الأولية بـ هذه, قائمة الوزراء ضرب أي.</p>
-        <ul>
-          <li>بل دفّة فسقط بال, الله تغييرات الرئيسية من مدن. كرسي الأمم ويكيبيديا،.</li>
-          <li>لم عدد يطول جديدة ولاتّساع. أم تلك وحتّى.</li>
-          <li>ذات مئات المشترك بالمحور عن وشعار.</li>
-        </ul>
-        <p>لكل خلاف وترك المؤلّفة بل. ٣٠ حين أواخر أصقاع. بلا مع أوزار النزاع, مع إيطاليا بالرّغم بالمطالبة ومن. ان دول الحرة وقدّموا لتقليعة. الحرة بريطانيا، إذ وصل, الى وقام أجزاء أوراقهم عن. الباهضة الخاسرة حيث و.</p>
-        <ol>
-          <li>عرض قتيل، الجنرال الأوروبي ما, ثم تعد بقعة.</li>
-          <li>ثم الا الجوي اوروبا, و غير العسكري التبرعات, ترتيب مواقعها أوراقهم ضرب في إذ.</li>
-          <li>علاقة يتعلّق وبلجيكا، على مع, الجنود الخطّة جُل عل, فقد ان سقوط.</li>
-        </ol>
-        <p>الشرق، وصافرات الساحلية بل بلا. ٠٨٠٤ ودول العناد انه أن. في تونس أوزار مقاومة وصل, قد وقد حلّت دأبوا رجوعهم. أفاق والعتاد لم قبل, عن كلّ منتصف محاولات. المشترك الأولية ان كلا, ألمّ إحتار التقليدية و مدن. عن عدد تسمّى المسرح الطرفين.</p>
-      </article><!-- /.blog-post -->
-
-      <article class="blog-post">
-        <h2 class="blog-post-title">مشاركة مدونة أخرى</h2>
-        <p class="blog-post-meta">23 ديسمبر 2013 بواسطة <a href="#">Jacob</a></p>
-
-        <p>إذ مدن وبداية الجنود, ثم ٠٨٠٤ الثقيل هذه. ولم وقرى ومحاولة أي, وقام أراضي وصل مع. ما أخذ يتمكن الصعداء الإثنان, أم هامش أعمال إتفاقية ضرب. عدم إذ بقسوة غرّة، ممثّلة, تم وحتّى تعديل لها. عن ولم بسبب الأوروبيّون, ما كما وتنامت الإتفاقية. وقامت وبعدما بتخصيص و بال, سكان إعلان غريمه الا أي.</p>
-        <blockquote>
-          <p>ذلك هناك ألمانيا إذ. فعل الجنوبي اليابانية بل, جُل مع إنطلاق الموسوعة. واشتدّت وحلفاؤها عن دنو. عن إيو كثيرة المجتمع, وفي شمال حالية انذار أي. إنطلاق تزامناً بالإنزال و تلك.</p>
-        </blockquote>
-        <p>إذ دار السفن الخارجية, عل شيء الأسيوي شموليةً, الفترة والإتحاد أن الا. هو الحكم الحكومة حين. تم ليرتفع بأضرار التبرعات مما, حاول ساعة عن يكن. حيث مع حاول أجزاء الهجوم, يتم بـ قبضتهم الفرنسي.</p>
-        <p>جُل عن اللا وقوعها،, دنو ثم وترك سكان الشمال, كل ذلك وأزيز والقرى. أم عدد مهمّات الساحل, قد تاريخ أفريقيا الإحتفاظ دول. مدن لبلجيكا، واندونيسيا، كل, مع أسر الشمال الأرضية بالسيطرة. في فقامت والروسية كلّ. عن فعل فسقط استبدال.</p>
-      </article><!-- /.blog-post -->
-
-      <article class="blog-post">
-        <h2 class="blog-post-title">ميزة جديدة</h2>
-        <p class="blog-post-meta">14 ديسمبر 2013 بواسطة <a href="#">Jacob</a></p>
-
-        <p>تحت بولندا، مليارات لم. الشهير الإنزال وفي بل, مع قبل واتّجه الخاسر باستخدام. قدما يونيو مواقعها يكن و, سابق أراضي الإكتفاء حتى كل, و جعل مهمّات المتحدة. أخذ عل الثقيل الضروري لإنعدام, دول جيما أراض الدولارات تم. الخاطفة استعملت وباستثناء ثم انه, به، جدول الأهداف ماليزيا، ان. عن هناك الإحتفاظ غير.</p>
-        <p>مرجع استدعى بريطانيا ذلك عن, ٣٠ كان ألمّ الشّعبين الأمريكي. دار تغييرات الشرقية التجارية كل, تم يتبقّ للحكومة كلّ. ثمّة الشتاء الساحل و الى, بل أثره، فاتّبع يتم. دون وترك وتنصيب المبرمة ما, هذه عن زهاء استدعى انتصارهم, يعبأ شواطيء الأرضية به، أم. والتي وفرنسا الأولية بـ هذه, قائمة الوزراء ضرب أي.</p>
-        <ul>
-          <li>بل دفّة فسقط بال, الله تغييرات الرئيسية من مدن. كرسي الأمم ويكيبيديا،.</li>
-          <li>لم عدد يطول جديدة ولاتّساع. أم تلك وحتّى.</li>
-          <li>ذات مئات المشترك بالمحور عن وشعار.</li>
-        </ul>
-        <p>لكل خلاف وترك المؤلّفة بل. ٣٠ حين أواخر أصقاع. بلا مع أوزار النزاع, مع إيطاليا بالرّغم بالمطالبة ومن. ان دول الحرة وقدّموا لتقليعة. الحرة بريطانيا، إذ وصل, الى وقام أجزاء أوراقهم عن. الباهضة الخاسرة حيث و.</p>
-      </article><!-- /.blog-post -->
-
-      <nav class="blog-pagination" aria-label="Pagination">
-        <a class="btn btn-outline-primary" href="#">أقدم الوظائف</a>
-        <a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">أحدث المشاركات</a>
-      </nav>
-
-    </div>
-
-    <div class="col-md-4">
-      <div class="p-4 mb-3 bg-light rounded">
-        <h4 class="fst-italic">حول</h4>
-        <p class="mb-0">بل مدن وإعلان بتخصيص إيطاليا. حيث عقبت أساسي وتنامت و, وباءت وايرلندا وقد بـ, مرمى سقطت إحكام يكن و. كل ومن تصفح بالرّغم الاندونيسية. ٣٠ انتباه والروسية كلّ, الوراء ولكسمبورغ عن لكل. الخاصّة والإتحاد لان بل, وقد الهجوم وتنامت و.</p>
-      </div>
-
-      <div class="p-4">
-        <h4 class="fst-italic">أرشيف</h4>
-        <ol class="list-unstyled mb-0">
-          <li><a href="#">مارس 2014</a></li>
-          <li><a href="#">شباط 2014</a></li>
-          <li><a href="#">يناير 2014</a></li>
-          <li><a href="#">ديسمبر 2013</a></li>
-          <li><a href="#">نوفمبر 2013</a></li>
-          <li><a href="#">أكتوبر 2013</a></li>
-          <li><a href="#">سبتمبر 2013</a></li>
-          <li><a href="#">اغسطس 2013</a></li>
-          <li><a href="#">يوليو 2013</a></li>
-          <li><a href="#">يونيو 2013</a></li>
-          <li><a href="#">مايو 2013</a></li>
-          <li><a href="#">ابريل 2013</a></li>
-        </ol>
-      </div>
-
-      <div class="p-4">
-        <h4 class="fst-italic">في مكان آخر</h4>
-        <ol class="list-unstyled">
-          <li><a href="#">GitHub</a></li>
-          <li><a href="#">Twitter</a></li>
-          <li><a href="#">Facebook</a></li>
-        </ol>
-      </div>
-    </div>
-
-  </div><!-- /.row -->
-
-</main><!-- /.container -->
-
-<footer class="blog-footer">
-  <p>تم تصميم نموذج المدونة لـ <a href="https://getbootstrap.com/"> Bootstrap </a> بواسطة <a href="https://twitter.com/mdo">mdo </a>.</p>
-  <p>
-    <a href="#">عد إلى الأعلى</a>
-  </p>
-</footer>
diff --git a/site/content/docs/5.0/examples/blog/index.html b/site/content/docs/5.0/examples/blog/index.html
deleted file mode 100644
index e25d740b9..000000000
--- a/site/content/docs/5.0/examples/blog/index.html
+++ /dev/null
@@ -1,200 +0,0 @@
----
-layout: examples
-title: Blog Template
-extra_css:
-  - "https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap"
-  - "blog.css"
-include_js: false
----
-
-<div class="container">
-  <header class="blog-header py-3">
-    <div class="row flex-nowrap justify-content-between align-items-center">
-      <div class="col-4 pt-1">
-        <a class="link-secondary" href="#">Subscribe</a>
-      </div>
-      <div class="col-4 text-center">
-        <a class="blog-header-logo text-dark" href="#">Large</a>
-      </div>
-      <div class="col-4 d-flex justify-content-end align-items-center">
-        <a class="link-secondary" href="#" aria-label="Search">
-          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24"><title>Search</title><circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2"/></svg>
-        </a>
-        <a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
-      </div>
-    </div>
-  </header>
-
-  <div class="nav-scroller py-1 mb-2">
-    <nav class="nav d-flex justify-content-between">
-      <a class="p-2 link-secondary" href="#">World</a>
-      <a class="p-2 link-secondary" href="#">U.S.</a>
-      <a class="p-2 link-secondary" href="#">Technology</a>
-      <a class="p-2 link-secondary" href="#">Design</a>
-      <a class="p-2 link-secondary" href="#">Culture</a>
-      <a class="p-2 link-secondary" href="#">Business</a>
-      <a class="p-2 link-secondary" href="#">Politics</a>
-      <a class="p-2 link-secondary" href="#">Opinion</a>
-      <a class="p-2 link-secondary" href="#">Science</a>
-      <a class="p-2 link-secondary" href="#">Health</a>
-      <a class="p-2 link-secondary" href="#">Style</a>
-      <a class="p-2 link-secondary" href="#">Travel</a>
-    </nav>
-  </div>
-</div>
-
-<main class="container">
-  <div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
-    <div class="col-md-6 px-0">
-      <h1 class="display-4 fst-italic">Title of a longer featured blog post</h1>
-      <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
-      <p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
-    </div>
-  </div>
-
-  <div class="row mb-2">
-    <div class="col-md-6">
-      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
-        <div class="col p-4 d-flex flex-column position-static">
-          <strong class="d-inline-block mb-2 text-primary">World</strong>
-          <h3 class="mb-0">Featured post</h3>
-          <div class="mb-1 text-muted">Nov 12</div>
-          <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
-          <a href="#" class="stretched-link">Continue reading</a>
-        </div>
-        <div class="col-auto d-none d-lg-block">
-          {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}}
-        </div>
-      </div>
-    </div>
-    <div class="col-md-6">
-      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
-        <div class="col p-4 d-flex flex-column position-static">
-          <strong class="d-inline-block mb-2 text-success">Design</strong>
-          <h3 class="mb-0">Post title</h3>
-          <div class="mb-1 text-muted">Nov 11</div>
-          <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
-          <a href="#" class="stretched-link">Continue reading</a>
-        </div>
-        <div class="col-auto d-none d-lg-block">
-          {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}}
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="col-md-8">
-      <h3 class="pb-4 mb-4 fst-italic border-bottom">
-        From the Firehose
-      </h3>
-
-      <article class="blog-post">
-        <h2 class="blog-post-title">Sample blog post</h2>
-        <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
-
-        <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
-        <hr>
-        <p>Yeah, she dances to her own beat. Oh, no. You could've been the greatest. 'Cause, baby, <a href="#">you're a firework</a>. Maybe a reason why all the doors are closed. Open up your heart and just let it begin. So très chic, yeah, she's a classic.</p>
-        <blockquote>
-          <p>Bikinis, zucchinis, Martinis, no weenies. I know there will be sacrifice but that's the price. <strong>This is how we do it</strong>. I'm not sticking around to watch you go down. You think you're so rock and roll, but you're really just a joke. I know one spark will shock the world, yeah yeah. Can't replace you with a million rings.</p>
-        </blockquote>
-        <p>Trying to connect the dots, don't know what to tell my boss. Before you met me I was alright but things were kinda heavy. You just gotta ignite the light and let it shine. Glitter all over the room <em>pink flamingos</em> in the pool. </p>
-        <h2>Heading</h2>
-        <p>Suiting up for my crowning battle. If you only knew what the future holds. Bring the beat back. Peach-pink lips, yeah, everybody stares.</p>
-        <h3>Sub-heading</h3>
-        <p>You give a hundred reasons why, and you say you're really gonna try. Straight stuntin' yeah we do it like that. Calling out my name. ‘Cause I, I’m capable of anything.</p>
-        <pre><code>Example code block</code></pre>
-        <p>Before you met me I was alright but things were kinda heavy. You just gotta ignite the light and let it shine.</p>
-        <h3>Sub-heading</h3>
-        <p>You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out.</p>
-        <ul>
-          <li>Got a motel and built a fort out of sheets.</li>
-          <li>Your kiss is cosmic, every move is magic.</li>
-          <li>Suiting up for my crowning battle.</li>
-        </ul>
-        <p>Takes you miles high, so high, 'cause she’s got that one international smile.</p>
-        <ol>
-          <li>Scared to rock the boat and make a mess.</li>
-          <li>I could have rewrite your addiction.</li>
-          <li>I know you get me so I let my walls come down.</li>
-        </ol>
-        <p>After a hurricane comes a rainbow.</p>
-      </article><!-- /.blog-post -->
-
-      <article class="blog-post">
-        <h2 class="blog-post-title">Another blog post</h2>
-        <p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p>
-
-        <p>I am ready for the road less traveled. Already <a href="#">brushing off the dust</a>. Yeah, you're lucky if you're on her plane. I used to bite my tongue and hold my breath. Uh, She’s a beast. I call her Karma (come back). Black ray-bans, you know she's with the band. I can't sleep let's run away and don't ever look back, don't ever look back.</p>
-        <blockquote>
-          <p>Growing fast into a <strong>bolt of lightning</strong>. Be careful Try not to lead her on</p>
-        </blockquote>
-        <p>I'm intrigued, for a peek, heard it's fascinating. Oh oh! Wanna be a victim ready for abduction. She's got that international smile, oh yeah, she's got that one international smile. Do you ever feel, feel so paper thin. I’m gon’ put her in a coma. Sun-kissed skin so hot we'll melt your popsicle.</p>
-        <p>This is transcendental, on another level, boy, you're my lucky star.</p>
-      </article><!-- /.blog-post -->
-
-      <article class="blog-post">
-        <h2 class="blog-post-title">New feature</h2>
-        <p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p>
-
-        <p>From Tokyo to Mexico, to Rio. Yeah, you take me to utopia. I'm walking on air. We'd make out in your Mustang to Radiohead. I mean the ones, I mean like she's the one. Sun-kissed skin so hot we'll melt your popsicle. Slow cooking pancakes for my boy, still up, still fresh as a Daisy.</p>
-        <ul>
-          <li>I hope you got a healthy appetite.</li>
-          <li>You're never gonna be unsatisfied.</li>
-          <li>Got a motel and built a fort out of sheets.</li>
-        </ul>
-        <p>Don't need apologies. Boy, you're an alien your touch so foreign, it's <em>supernatural</em>, extraterrestrial. Talk about our future like we had a clue. I can feel a phoenix inside of me.</p>
-      </article><!-- /.blog-post -->
-
-      <nav class="blog-pagination" aria-label="Pagination">
-        <a class="btn btn-outline-primary" href="#">Older</a>
-        <a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">Newer</a>
-      </nav>
-
-    </div>
-
-    <div class="col-md-4">
-      <div class="p-4 mb-3 bg-light rounded">
-        <h4 class="fst-italic">About</h4>
-        <p class="mb-0">Saw you downtown singing the Blues. Watch you circle the drain. Why don't you let me stop by? Heavy is the head that <em>wears the crown</em>. Yes, we make angels cry, raining down on earth from up above.</p>
-      </div>
-
-      <div class="p-4">
-        <h4 class="fst-italic">Archives</h4>
-        <ol class="list-unstyled mb-0">
-          <li><a href="#">March 2014</a></li>
-          <li><a href="#">February 2014</a></li>
-          <li><a href="#">January 2014</a></li>
-          <li><a href="#">December 2013</a></li>
-          <li><a href="#">November 2013</a></li>
-          <li><a href="#">October 2013</a></li>
-          <li><a href="#">September 2013</a></li>
-          <li><a href="#">August 2013</a></li>
-          <li><a href="#">July 2013</a></li>
-          <li><a href="#">June 2013</a></li>
-          <li><a href="#">May 2013</a></li>
-          <li><a href="#">April 2013</a></li>
-        </ol>
-      </div>
-
-      <div class="p-4">
-        <h4 class="fst-italic">Elsewhere</h4>
-        <ol class="list-unstyled">
-          <li><a href="#">GitHub</a></li>
-          <li><a href="#">Twitter</a></li>
-          <li><a href="#">Facebook</a></li>
-        </ol>
-      </div>
-    </div>
-
-  </div><!-- /.row -->
-
-</main><!-- /.container -->
-
-<footer class="blog-footer">
-  <p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
-  <p>
-    <a href="#">Back to top</a>
-  </p>
-</footer>
diff --git a/site/content/docs/5.0/examples/pricing/index.html b/site/content/docs/5.0/examples/pricing/index.html
deleted file mode 100644
index 57d4747dd..000000000
--- a/site/content/docs/5.0/examples/pricing/index.html
+++ /dev/null
@@ -1,117 +0,0 @@
----
-layout: examples
-title: Pricing example
-extra_css:
-  - "pricing.css"
-include_js: false
----
-
-<header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-body border-bottom shadow-sm">
-  <p class="h5 my-0 me-md-auto fw-normal">Company name</p>
-  <nav class="my-2 my-md-0 me-md-3">
-    <a class="p-2 text-dark" href="#">Features</a>
-    <a class="p-2 text-dark" href="#">Enterprise</a>
-    <a class="p-2 text-dark" href="#">Support</a>
-    <a class="p-2 text-dark" href="#">Pricing</a>
-  </nav>
-  <a class="btn btn-outline-primary" href="#">Sign up</a>
-</header>
-
-<main class="container">
-  <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
-    <h1 class="display-4">Pricing</h1>
-    <p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
-  </div>
-
-  <div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
-    <div class="col">
-      <div class="card mb-4 shadow-sm">
-      <div class="card-header">
-        <h4 class="my-0 fw-normal">Free</h4>
-      </div>
-      <div class="card-body">
-        <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
-        <ul class="list-unstyled mt-3 mb-4">
-          <li>10 users included</li>
-          <li>2 GB of storage</li>
-          <li>Email support</li>
-          <li>Help center access</li>
-        </ul>
-        <button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign up for free</button>
-      </div>
-    </div>
-    </div>
-    <div class="col">
-      <div class="card mb-4 shadow-sm">
-      <div class="card-header">
-        <h4 class="my-0 fw-normal">Pro</h4>
-      </div>
-      <div class="card-body">
-        <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
-        <ul class="list-unstyled mt-3 mb-4">
-          <li>20 users included</li>
-          <li>10 GB of storage</li>
-          <li>Priority email support</li>
-          <li>Help center access</li>
-        </ul>
-        <button type="button" class="w-100 btn btn-lg btn-primary">Get started</button>
-      </div>
-    </div>
-    </div>
-    <div class="col">
-      <div class="card mb-4 shadow-sm">
-      <div class="card-header">
-        <h4 class="my-0 fw-normal">Enterprise</h4>
-      </div>
-      <div class="card-body">
-        <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
-        <ul class="list-unstyled mt-3 mb-4">
-          <li>30 users included</li>
-          <li>15 GB of storage</li>
-          <li>Phone and email support</li>
-          <li>Help center access</li>
-        </ul>
-        <button type="button" class="w-100 btn btn-lg btn-primary">Contact us</button>
-      </div>
-    </div>
-    </div>
-  </div>
-
-  <footer class="pt-4 my-md-5 pt-md-5 border-top">
-    <div class="row">
-      <div class="col-12 col-md">
-        <img class="mb-2" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="24" height="19">
-        <small class="d-block mb-3 text-muted">&copy; 2017–{{< year >}}</small>
-      </div>
-      <div class="col-6 col-md">
-        <h5>Features</h5>
-        <ul class="list-unstyled text-small">
-          <li><a class="link-secondary" href="#">Cool stuff</a></li>
-          <li><a class="link-secondary" href="#">Random feature</a></li>
-          <li><a class="link-secondary" href="#">Team feature</a></li>
-          <li><a class="link-secondary" href="#">Stuff for developers</a></li>
-          <li><a class="link-secondary" href="#">Another one</a></li>
-          <li><a class="link-secondary" href="#">Last time</a></li>
-        </ul>
-      </div>
-      <div class="col-6 col-md">
-        <h5>Resources</h5>
-        <ul class="list-unstyled text-small">
-          <li><a class="link-secondary" href="#">Resource</a></li>
-          <li><a class="link-secondary" href="#">Resource name</a></li>
-          <li><a class="link-secondary" href="#">Another resource</a></li>
-          <li><a class="link-secondary" href="#">Final resource</a></li>
-        </ul>
-      </div>
-      <div class="col-6 col-md">
-        <h5>About</h5>
-        <ul class="list-unstyled text-small">
-          <li><a class="link-secondary" href="#">Team</a></li>
-          <li><a class="link-secondary" href="#">Locations</a></li>
-          <li><a class="link-secondary" href="#">Privacy</a></li>
-          <li><a class="link-secondary" href="#">Terms</a></li>
-        </ul>
-      </div>
-    </div>
-  </footer>
-</main>
diff --git a/site/content/docs/5.0/examples/pricing/pricing.css b/site/content/docs/5.0/examples/pricing/pricing.css
deleted file mode 100644
index 70afca134..000000000
--- a/site/content/docs/5.0/examples/pricing/pricing.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.container {
-  max-width: 960px;
-}
-
-.pricing-header {
-  max-width: 700px;
-}
diff --git a/site/content/docs/5.0/examples/starter-template/index.html b/site/content/docs/5.0/examples/starter-template/index.html
deleted file mode 100644
index 0cd64c75f..000000000
--- a/site/content/docs/5.0/examples/starter-template/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
----
-layout: examples
-title: Starter Template
-extra_css:
-  - "starter-template.css"
----
-
-<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
-  <div class="container-fluid">
-    <a class="navbar-brand" href="#">Navbar</a>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-
-    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
-      <ul class="navbar-nav me-auto mb-2 mb-md-0">
-        <li class="nav-item">
-          <a class="nav-link active" aria-current="page" href="#">Home</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#">Link</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
-        </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
-          <ul class="dropdown-menu" aria-labelledby="dropdown01">
-            <li><a class="dropdown-item" href="#">Action</a></li>
-            <li><a class="dropdown-item" href="#">Another action</a></li>
-            <li><a class="dropdown-item" href="#">Something else here</a></li>
-          </ul>
-        </li>
-      </ul>
-      <form class="d-flex">
-        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
-        <button class="btn btn-outline-success" type="submit">Search</button>
-      </form>
-    </div>
-  </div>
-</nav>
-
-<main class="container">
-
-  <div class="starter-template text-center py-5 px-3">
-    <h1>Bootstrap starter template</h1>
-    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
-  </div>
-
-</main><!-- /.container -->
diff --git a/site/content/docs/5.0/examples/starter-template/starter-template.css b/site/content/docs/5.0/examples/starter-template/starter-template.css
deleted file mode 100644
index 6fb709105..000000000
--- a/site/content/docs/5.0/examples/starter-template/starter-template.css
+++ /dev/null
@@ -1,3 +0,0 @@
-body {
-  padding-top: 5rem;
-}
diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
deleted file mode 100644
index 94f2214d7..000000000
--- a/site/content/docs/5.0/migration.md
+++ /dev/null
@@ -1,459 +0,0 @@
----
-layout: docs
-title: Migrating to v5
-description: Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5.
-group: migration
-aliases: "/migration/"
-toc: true
----
-
-## v5.0.0-beta3
-
-### Utilities
-
-- Dropped the `0` entry in `$border-widths` map to remove the duplicated `.border-0` class.
-
-## v5.0.0-beta2
-
-### Utilities
-
-- Renamed `--aspect-ratio` to `--bs-aspect-ratio` to be consistent with other custom properties.
-- Extended the `.visually-hidden-focusable` helper to also work on containers, using `:focus-within`.
-- `bootstrap-utilities.css` now also includes our helpers. Helpers don't need to be imported in custom builds anymore.
-- Extended form validation states customization capabilities. Added three new optional parameters to the `form-validation-state` mixin: `tooltip-color`, `tooltip-bg-color`, `focus-box-shadow`. These parameters can be set in the `$form-validation-states` map. [See #31757](https://github.com/twbs/bootstrap/pull/31757).
-
-### JavaScript
-
-- Restored `offset` option for Dropdown, Popover and Tooltip plugins.
-- The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of popper elements.
-- All the events for the dropdown are now triggered on the dropdown toggle button and then bubbled up to the parent element.
-- Dropdown menus now have a `data-bs-popper="static"` attribute set when the positioning of the dropdown is static and `data-bs-popper="none"` when dropdown is in the navbar. This is added by our JavaScript and helps us use custom position styles without interfering with Popper's positioning.
-- `popperConfig` can be passed as a function that accepts the Bootstrap's default Popper config as an argument, so that you can merge this default configuration in your way.
-
-## v5.0.0-beta1
-
-### RTL
-
-**The RTL feature is still experimental and will probably evolve according to user feedback.** Spotted something or have an improvement to suggest? [Open an issue]({{< param repo >}}/issues/new), we'd love to get your insights.
-
-#### Sass
-
-Horizontal direction sensitive variables, utilities and mixins are renamed with more logical names — `start` and `end` in lieu of `left` and `right`.
-
-##### Components
-
-- Renamed `.dropleft` and `.dropright` to `.dropstart` and `.dropend`.
-- Renamed `.dropdown-menu-*-left` and `.dropdown-menu-*-right` to `.dropdown-menu-*-start` and `.dropdown-menu-*-end`.
-- Renamed `.bs-popover-left` and `.bs-popover-right` to `.bs-popover-start` and `.bs-popover-end`.
-- Renamed `.bs-tooltip-left` and `.bs-tooltip-right` to `.bs-tooltip-start` and `.bs-tooltip-end`.
-- Renamed `.carousel-item-left` and `.carousel-item-right` to `.carousel-item-start` and `.carousel-item-end`.
-
-##### Utilities
-
-- Renamed `.left-*` and `.right-*` to `.start-*` and `.end-*`.
-- Renamed `.float-left` and `.float-right` to `.float-start` and `.float-end`.
-- Renamed `.border-left` and `.border-right` to `.border-start` and `.border-end`.
-- Renamed `.rounded-left` and `.rounded-right` to `.rounded-start` and `.rounded-end`.
-- Renamed `.ml-*` and `.mr-*` to `.ms-*` and `.me-*`.
-- Renamed `.pl-*` and `.pr-*` to `.ps-*` and `.pe-*`.
-- Renamed `.text-left` and `.text-right` to `.text-start` and `.text-end`.
-
-Breakpoints specific variants are consequently renamed too (e.g. `.text-md-start` replaces `.text-md-left`).
-
-**Note**: if you used v4 to make RTL pages, ensure to reverse changes mentioned above: e.g. use `.*-start` were you used `.*-right`.
-
-##### Mixins
-
-- Renamed `border-left-radius()` and `border-right-radius()` to `border-start-radius()` and `border-end-radius()` — as well as their corner relative variants (eg. `.border-bottom-left-radius` became `.border-bottom-start-radius`).
-- Renamed `caret-left()` and `caret-right()` to `caret-start()` and `caret-end()` — subsequently, the `caret()` mixin now takes `start` and `end` as arguments instead of `left` and `right`.
-
-##### Variables
-
-- New `$breadcrumb-divider-flipped` if a different breadcrumb separator is needed in RTL.
-- Renamed `$navbar-brand-margin-right` to `$navbar-brand-margin-end`.
-- Renamed `$pagination-margin-left` to `$pagination-margin-start`.
-- Renamed `$form-check-padding-left` to `$form-check-padding-start`.
-- Renamed `$form-switch-padding-left` to `$form-switch-padding-start`.
-- Renamed `$form-check-inline-margin-right` to `$form-check-inline-margin-end`.
-- Renamed `$form-select-feedback-icon-padding-right` to `$form-select-feedback-icon-padding-end`.
-
-### JavaScript
-
-- Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use `data-bs-toggle` instead of `data-toggle`.
-- Updated Popper to v2.x:
-  - Removed `offset` option from our Tooltip/Popover and Dropdown plugins; this can still be achieved using the `popperConfig` parameter.
-  - The `fallbackPlacement` option has become `fallbackPlacements`.
-
-### Sass
-
-- Renamed `scale-color()` function to `shift-color()` to avoid collision with Sass's own color scaling function.
-
-### Utilities
-
-- Added new `.translate-middle-x` & `.translate-middle-y` utilities to horizontally or vertically center absolute/fixed positioned elements.
-
-### Components
-
-#### Breadcrumbs
-
-- Simplified the default appearance of breadcrumbs by removing `padding`, `background-color`, and `border-radius`.
-- Added new CSS custom property `--bs-breadcrumb-divider` for easy customization without needing to recompile CSS.
-
-#### Toasts
-
-- Toasts can now be [positioned]({{< docsref "/components/toasts#placement" >}}) in a `.toast-container` with the help of [positioning utilities]({{< docsref "/utilities/position" >}}).
-
-## v5.0.0-alpha3
-
-### Browser support
-
-- Dropped support for Microsoft Edge Legacy. See [here](#browser-support-1) for the previous browser support changes.
-
-### Sass
-
-- The color system which worked with `color-level()` and `$theme-color-interval` was removed in favor of a new color system. All `lighten()` and `darken()` functions in our codebase are replaced by `tint-color()` and `shade-color()`. These functions will mix the color with either white or black instead of changing its lightness by a fixed amount. The `scale-color()` (changed to `shift-color()` in Beta 1) will either tint or shade a color depending on whether its weight parameter is positive or negative. [See #30622](https://github.com/twbs/bootstrap/pull/30622) for more details.
-- Spinners now honor `prefers-reduced-motion: reduce` by slowing down animations. [See #31882](https://github.com/twbs/bootstrap/pull/31882).
-
-### Reboot
-
-- Introduce `$enable-smooth-scroll`, which applies `scroll-behavior: smooth` globally—except for users asking for reduced motion through `prefers-reduced-motion` media query. [See #31877](https://github.com/twbs/bootstrap/pull/31877)
-
-### Buttons
-
-- [Dropped `.btn-block` in favor of CSS grid utility classes.]({{< docsref "/components/buttons#block-buttons" >}}) Instead of applying `.btn-block` to individual buttons, a group of buttons now get wrapped in a parent `.d-grid` class and can use `.gap-*` utilities for spacing. For individual "block buttons", add `.w-100`.
-
-### Forms
-
-- The longstanding [Missing border radius on input group with validation feedback bug](https://github.com/twbs/bootstrap/issues/25110) is finally fixed by adding an additional `.has-validation` class to input groups with validation.
-- Promoted the Floating labels example to fully supported form component. [See the new Floating labels page.]({{< docsref "/forms/floating-labels" >}})
-- File inputs now use the `.form-control` class and don't require JavaScript, additional HTML, or additional classes. [See #31955](https://github.com/twbs/bootstrap/pull/31955).
-- Added `cursor:pointer` to `.form-control-color` color inputs.
-
-### Utilities
-
-- **Text utilities:**
-  - Added `.fs-*` utilities for `font-size` utilities (with RFS enabled). These use the same scale as HTML's default headings (1-6, large to small), and can be modified via Sass map.
-  - Renamed `.font-weight-*` utilities as `.fw-*` for brevity and consistency.
-  - Renamed `.font-style-*` utilities as `.fst-*` for brevity and consistency.
-- Added `.d-grid` to display utilities
-- Added new `gap` utilities (`.gap`) for CSS Grid layouts
-- Removed `.rounded-sm` and `rounded-lg`, and introduced `.rounded-0` to `.rounded-3`. [See #31687](https://github.com/twbs/bootstrap/pull/31687).
-
-## v5.0.0-alpha2
-
-### Sass
-
-- Added default parameters to each `border-radius` mixin. [See #31571](https://github.com/twbs/bootstrap/pull/31571).
-- Updated the next breakpoint when targeting only the `xs` breakpoint. [See #31500](https://github.com/twbs/bootstrap/pull/31500).
-- `box-shadow` mixins now allow `null` values and drop `none` from multiple arguments. [See #30394](https://github.com/twbs/bootstrap/pull/30394).
-
-### Docs
-
-- Renamed "Navs" page to "Navs & Tabs"
-- Renamed "Screen readers" helper page to "Visually hidden", and filename to `visually-hidden`
-- Renamed "Checks" page to "Checks & radios", and filename to `checks-radios`
-- Improved documentation of check/radio powered button groups
-- Improved skip links in our docs.
-- Redesigned docs navigation for larger tap targets on mobile and a streamlined subnav.
-- [#31114](https://github.com/twbs/bootstrap/pull/31114): Improved form documentation with regards to accessibility.
-
-### Layout
-
-- Container horizontal padding updated to match the gutter size of `.row`s.
-- [#31439](https://github.com/twbs/bootstrap/pull/31439): Removed `flex: 1 0 100%` from rows due to regressions in grid behavior.
-
-### Reboot
-
-- Updated `th` styling to use a default `null` value for `font-weight` and inherit `text-align` instead of setting explicitly.
-
-### Colors
-
-- Bumped color contrast ratio from 3:1 to 4.5:1.
-- Set `$black` as color contrast color instead of `$gray-900`.
-- Improved `$green` (and its theme alias `$success`) color to reach a new minimum color contrast (moving from `#28a745` to `#198754`).
-- Improved `$cyan` (and its theme alias `$info`) color to be more vibrant (moving from `#17a2b8` to `#0dcaf0`).
-
-### Forms
-
-- [#31383](https://github.com/twbs/bootstrap/pull/31383): Resized checks and radios to be `1em` instead of `1.25em` in an effort to make them scale better with custom `$font-size-base` values and more.
-
-### Components
-
-#### Badges
-
-- [#31132](https://github.com/twbs/bootstrap/pull/31132): Increased default padding for badges from `.25em`/`.5em` to `.35em`/`.65em`.
-
-#### Buttons
-
-- [#30639](https://github.com/twbs/bootstrap/pull/30639): Disabled states of buttons are easier to customize thanks to additional arguments in the `button-variant()` mixin.
-- [#30989](https://github.com/twbs/bootstrap/pull/30989): Updated buttons to ensure increased contrast on hover and active states.
-
-#### Carousel
-
-- Replaced chevron icons for carousel controls with new SVGs from [Bootstrap Icons]({{< param "icons" >}}).
-- Added new [`.carousel-dark` variant]({{< docsref "/components/carousel#dark-variant" >}}) for dark text, controls, and indicators (great for lighter backgrounds).
-
-#### Close button
-
-- Renamed `.close` to `.btn-close` for a less generic name.
-- Close buttons now use a `background-image` (embedded SVG) instead of a `&times;` in the HTML, allowing for easier customization without the need to touch your markup.
-- Added new variables to better control the customization.
-- Added new `.btn-close-white` variant that uses `filter: invert(1)` to enable higher contrast dismiss icons against darker backgrounds.
-
-#### Collapse
-
-- [#31346](https://github.com/twbs/bootstrap/pull/31346): Removed scroll anchoring for accordions.
-
-#### Dropdowns
-
-- Added new `.dropdown-menu-dark` variant and associated variables for on-demand dark dropdowns.
-- Added new variable for `$dropdown-padding-x`.
-- Darkened the dropdown divider for improved contrast.
-
-#### Navs
-
-- [#31035](https://github.com/twbs/bootstrap/pull/31035): Added new `null` variables for `font-size`, `font-weight`, `color`, and `:hover` `color` to the `.nav-link` class.
-
-#### Pagination
-
-- Added `transition`s to pagination links. [See #31396](https://github.com/twbs/bootstrap/pull/31396).
-
-#### Popovers
-
-- Renamed `whiteList` option to `allowList`.
-
-#### Toasts
-
-- [#31109](https://github.com/twbs/bootstrap/pull/31109): Made default toast duration 5 seconds.
-- [#31155](https://github.com/twbs/bootstrap/pull/31155): Clear `timeout` before showing toasts.
-- [#31381](https://github.com/twbs/bootstrap/pull/31381): Removed `overflow: hidden` from toasts and replaced with proper `border-radius`s with `calc()` functions.
-- Updated docs to include additional examples for how to customize and theme toasts.
-
-#### Tooltips
-
-- Renamed `whiteList` option to `allowList`.
-
-### Helpers
-
-- Responsive embed helpers have been renamed to [ratio helpers]({{< docsref "/helpers/ratio" >}}) with new class names and improved behaviors, as well as a helpful CSS variable.
-  - Classes have been renamed to change `by` to `x` in the aspect ratio. For example, `.ratio-16by9` is now `.ratio-16x9`.
-  - We've dropped the `.embed-responsive-item` and element group selector in favor of a simpler `.ratio > *` selector. No more class is needed, and the ratio helper now works with any HTML element.
-  - The `$embed-responsive-aspect-ratios` Sass map has been renamed to `$aspect-ratios` and its values have been simplified to include the class name and the percentage as the `key: value` pair.
-  - CSS variables are now generated and included for each value in the Sass map. Modify the `--aspect-ratio` variable on the `.ratio` to create any [custom aspect ratio]({{< docsref "/helpers/ratio#custom-ratios" >}}).
-- "Screen reader" classes are now ["visually hidden" classes]({{< docsref "/helpers/visually-hidden" >}}).
-  - Changed the Sass file from `scss/helpers/_screenreaders.scss` to `scss/helpers/_visually-hidden.scss`
-  - Renamed `.sr-only` and `.sr-only-focusable` to `.visually-hidden` and `.visually-hidden-focusable`
-  - Renamed `sr-only()` and `sr-only-focusable()` mixins to `visually-hidden()` and `visually-hidden-focusable()`.
-
-### Utilities
-
-- [#31280](https://github.com/twbs/bootstrap/pull/31280): Added new [position utilities]({{< docsref "/utilities/position#arrange-elements" >}}) for `top`, `right`, `bottom`, and `left`. Values include `0`, `50%`, and `100%` for each property.
-  - We also added new `translate` utilities to accompany those position utilities for centering elements when they're being positioned.
-  - Some great examples have been added to the docs to show these off.
-- [#31484](https://github.com/twbs/bootstrap/pull/31484): Added new [`border-width` utility]({{< docsref "/utilities/borders#border-width" >}}).
-- [#31473](https://github.com/twbs/bootstrap/pull/31473): The `.d-none` utility was moved in our CSS to give it more weight over other display utilities.
-- Renamed `.text-monospace` to `.font-monospace`.
-- Removed `.text-hide` as it's an antiquated method for hiding text that shouldn't be used anymore.
-- New `line-height` utilities: `.lh-1`, `.lh-sm`, `.lh-base` and `.lh-lg`. See [here]({{< docsref "/utilities/text#line-height" >}}).
-
----
-
-## v5.0.0-alpha1
-
-### Browser support
-
-See the browser and devices page for details on what is currently supported in Bootstrap 5. Since v4, here's what's changed to our browser support:
-
-- Dropped support for Internet Explorer 10 and 11
-- Dropped support for Microsoft Edge < 16
-- Dropped support for Firefox < 60
-- Dropped support for Safari < 10
-- Dropped support for iOS Safari < 10
-- Dropped support for Chrome < 60
-- Dropped support for Android < 6
-
-### Sass
-
-Changes to our source Sass files and compiled CSS.
-
-- Removed `hover`, `hover-focus`, `plain-hover-focus`, and `hover-focus-active` mixins. Use regular CSS syntax for these moving forward. [See #28267](https://github.com/twbs/bootstrap/pull/28267).
-- Remove previously deprecated mixins
-  - `float()`
-  - `form-control-mixin()`
-  - `nav-divider()`
-  - `retina-img()`
-  - `text-hide()` (also dropped the associated utility class, `.text-hide`)
-  - `visibility()`
-  - `form-control-focus()`
-- Rearranged forms source files under `scss/forms/`. [See Forms section for more details.](#forms)
-- Removed print styles and `$enable-print-styles` variable. Print display classes, however, have remained intact. [See #28339](https://github.com/twbs/bootstrap/pull/28339).
-- Dropped `color()`, `theme-color()` & `gray()` functions in favor of variables. [See #29083](https://github.com/twbs/bootstrap/pull/29083)
-- The `theme-color-level()` function is renamed to `color-level()` and now accepts any color you want instead of only `$theme-color` colors. [See #29083](https://github.com/twbs/bootstrap/pull/29083) **Watch out:** `color-level()` was later on dropped in `v5.0.0-alpha3`.
-- `$enable-grid-classes` doesn't disable the generation of container classes anymore [See #29146](https://github.com/twbs/bootstrap/pull/29146)
-- Renamed `$enable-prefers-reduced-motion-media-query` and `$enable-pointer-cursor-for-buttons` to `$enable-reduced-motion` and `$enable-button-pointers` for brevity.
-- Line heights are dropped from several components to simplify our codebase. The `button-size()` and `pagination-size()` do not accept line height parameters anymore. [See #29271](https://github.com/twbs/bootstrap/pull/29271)
-- The `button-variant()` mixin now accepts 3 optional color parameters, for each button state, to override the color provided by `color-contrast()`. By default, these parameters will find which color provides more contrast against the button state's background color with `color-contrast()`.
-- The `button-outline-variant()` mixin now accepts an additional argument, `$active-color`, for setting the button's active state text color. By default, this parameter will find which color provides more contrast against the button's active background color with `color-contrast()`.
-- Ditch the Sass map merges, which makes it easier to remove redundant values. Keep in mind you now have to define all values in the Sass maps like `$theme-colors`. Check out how to deal with [Sass maps]({{< docsref "/customize/sass#maps-and-loops" >}}).
-- `color-yiq()` function and related variables are renamed to `color-contrast()` since it's not related to YIQ colorspace anymore. [See #30168.](https://github.com/twbs/bootstrap/pull/30168/)
-  - `$yiq-contrasted-threshold` is renamed to `$min-contrast-ratio`.
-  - `$yiq-text-dark` and `$yiq-text-light` are respectively renamed to `$color-contrast-dark` and `$color-contrast-light`.
-- Linear gradients are simplified when gradients are enabled and therefore, `gradient-bg()` now only accepts an optional `$color` parameter.
-- The `bg-gradient-variant()` mixin is removed since the `.bg-gradient` class can now be used to add gradients to elements instead of the `.bg-gradient-*` classes.
-- The `media-breakpoint-down()` uses the breakpoint itself instead of the next breakpoint. Use `media-breakpoint-down(lg)` instead of `media-breakpoint-down(md)` to target viewports smaller than the `lg` breakpoint.
-- The `media-breakpoint-between()` mixin's second parameter also uses the breakpoint itself instead of the next breakpoint. Use `media-between(sm, lg)` instead of `media-breakpoint-between(sm, md)` to target viewports between the `sm` and `lg` breakpoints.
-- The `box-shadow()` mixin now better supports `none` and `null` with multiple arguments. Now you can pass multiple arguments with either value and get the expected output. [See #30394](https://github.com/twbs/bootstrap/pull/30394).
-- Each `border-radius()` mixin now has a default value. You can now call these mixins without specifying a border radius value and the `$border-radius` variable will be used. [See #31571](https://github.com/twbs/bootstrap/pull/31571)
-
-### JavaScript
-
-Changes to our source and compiled JavaScript files.
-
-- Dropped jQuery dependency and rewrote plugins to be in regular JavaScript.
-- Removed underscore from public static methods like `_getInstance()` → `getInstance()`.
-
-### Color system
-
-We've updated the color system that powers Bootstrap to improve color contrast and provide a much more extensive set of colors.
-
-- Updated blue and pink base colors (`-500`) to ensure WCAG 2.1 AA contrast.
-- Added new tints and shades for every color, providing nine separate colors for each base color, as new Sass variables.
-- To support our color system, we've added new custom `tint-color()` and `shade-color()` functions to mix our colors appropriately.
-
-### Grid and layout
-
-Changes to any layout tools and our grid system.
-
-- Dropped the `.media` component as it can be built with utility classes. [See #28265](https://github.com/twbs/bootstrap/pull/28265).
-- Remove `position: relative` from grid columns.
-- The horizontal padding is added to the direct children in a row instead of the columns themselves.
-  - This simplifies our codebase.
-  - The column classes can now be used stand-alone. Whenever they are used outside a `.row`, horizontal padding won't be added.
-- The responsive gutter classes can be used to control the gutter width in horizontal, vertical or both directions.
-- The gutter width is now set in `rem` and decreased from `30px` to `1.5rem` (24px).
-- `bootstrap-grid.css` now only applies `box-sizing: border-box` to the column instead of resetting the global box-sizing. This way the grid system can be used, even if `box-sizing: border-box` is not applied to each element.
-
-### Content, Reboot, etc
-
-Changes to Reboot, typography, tables, and more.
-
-- [RFS]({{< docsref "/getting-started/rfs" >}}) enabled for automated font size rescaling. [See #29152](https://github.com/twbs/bootstrap/pull/29152)
-- Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`.
-- Simplified table styles (no more odd top border) and tightened cell padding.
-- Nested tables do not inherit styles anymore.
-- `.thead-light` and `.thead-dark` are dropped in favor of the `.table-*` variant classes which can be used for all table elements (`thead`, `tbody`, `tfoot`, `tr`, `th` and `td`).
-- The `table-row-variant()` mixin is renamed to `table-variant()` and accepts only 2 parameters: `$color` (colon name) and `$value` (color code). The border color and accent colors are automatically calculated based on the table factor variables.
-- Split table cell padding variables into `-y` and `-x`.
-- Dropped `.pre-scrollable` class. [See #29135](https://github.com/twbs/bootstrap/pull/29135)
-- `.text-*` utilities do not add hover and focus states to links anymore. `.link-*` helper classes can be used instead. [See #29267](https://github.com/twbs/bootstrap/pull/29267)
-- Drop `.text-justify` class. [See #29793](https://github.com/twbs/bootstrap/pull/29793)
-
-### Typography
-
-- Removed `$display-*` variables for a new `$display-font-sizes` Sass map.
-- Removed individual `$display-*-weight` variables for a single `$display-font-weight`.
-- Added two new `.display-*` heading styles, `.display-5` and `.display-6`.
-- Resized existing display headings for a slightly more consistent set of `font-size`s.
-- Links are underlined by default (not just on hover), unless they're part of specific components.
-
-### Forms
-
-- Rearranged form documentation under its own top-level section.
-  - Split out old Forms page into several subpages
-  - Moved input groups docs under the new Forms section
-- Rearranged source Sass files under `scss/forms/`, including moving over input group styles.
-- Combined native and custom checkboxes and radios into a single `.form-check` class.
-  - New checks support sizing via `em`/`font-size` or explicit modifier classes now.
-  - New checks now appear larger by default for improved usability.
-  - Dropped `.custom-control` and associated classes.
-  - Renamed most `$custom-control` variables to `$form-control` ones.
-- Combined native and custom selects into `.form-select`.
-  - Dropped `.custom-select` and associated classes.
-  - Renamed most `$custom-select` variables to `$form-select` ones.
-- Updated file input component with the same overall design, but improved HTML.
-  - Refactored `.form-file` markup to resolve some visual bugs while allowing translation and button text changes via HTML instead of CSS.
-  - Dropped native `.form-control-file` and `.form-control-range` components entirely.
-  - Renamed `.custom-file` to `.form-file` (including variables). **Watch out:** `.form-file` was later on dropped in `v5.0.0-alpha3`, now you can use `.form-control`.
-  - Added support for `:focus` and `:disabled` styles.
-- Renamed `.custom-range` to `.form-range` (including variables).
-- Dropped `.form-group` for margin utilities (we've replaced our docs examples with `.mb-3`).
-- Dropped `.form-row` for the more flexible grid gutters.
-- Dropped `.form-inline` for the more flexible grid.
-- Dropped support for `.form-control-plaintext` inside `.input-group`s.
-- Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups.
-- Form labels now require the `.form-label` class. Sass variables are now available to style form labels to your needs. [See #30476](https://github.com/twbs/bootstrap/pull/30476)
-- `.form-text` no longer sets `display`, but does set `color` and `font-size`. So instead of `<small class="form-text text-muted">` you should now use `<div class="form-text">`.
-
-### Components
-
-- Unified `padding` values for alerts, breadcrumbs, cards, dropdowns, list groups, modals, popovers, and tooltips to be based on our `$spacer` variable. [See #30564](https://github.com/twbs/bootstrap/pull/30564).
-
-#### Disabled states
-
-- Disabled states of the buttons, close button, pagination link & form range now have `pointer-events: none` added. This simplifies our codebase and makes it easier to override active states in CSS. [#29296](https://github.com/twbs/bootstrap/pull/29296).
-
-#### Alerts
-
-- Removed auto-darkening of `<hr>` elements in `.alert-*` class variants. `<hr>`s use `rgba()` for their color, so these should naturally blend anyway.
-
-#### Badges
-
-Badges were overhauled to better differentiate themselves from buttons and to better utilize utility classes.
-
-- Removed and replaced `.badge` modifier classes with background utility classes (e.g., use `.bg-primary` instead of `.badge-primary`)
-- Removed `.badge-pill` for the `.rounded-pill` utility class
-- Removed badge's hover and focus styles for `a.badge` and `button.badge`.
-
-#### Buttons
-
-- The checkbox/radio toggle is removed from the button plugin in favor of a CSS only solution, which is documented in the [form checks and radios]({{< docsref "/forms/checks-radios#toggle-buttons" >}}) docs. The `.btn-check` class can be added to inputs, any label with `.btn` and modifier class can be used to theme the labels. [See #30650](https://github.com/twbs/bootstrap/pull/30650).
-
-#### Cards
-
-- Removed the card columns in favor of a Masonry grid [See #28922](https://github.com/twbs/bootstrap/pull/28922).
-- Removed card decks in favor of the grid which adds more flexibility over responsive behavior.
-
-#### Jumbotron
-
-- The jumbotron component is removed in favor of utility classes like `.bg-light` for the background color and `.p-*` classes to control padding.
-
-#### Navbars
-
-- All navbars now require a container within. This drastically simplifies spacing requirements and removes the need for extensive CSS overrides we added for responsive containers in v4.
-
-#### Pagination
-
-- Pagination links now have customizable `margin-left` that are dynamically rounded on all corners when separated from one another.
-
-#### Popovers
-
-- Renamed `.arrow` to `.popover-arrow`
-
-#### Tooltips
-
-- Renamed `.arrow` to `.tooltip-arrow`
-
-### Accessibility
-
-- Unlike the old `.sr-only-focusable`, which only worked in combination with `.sr-only`, `.sr-only-focusable` can be used as a standalone class without `.sr-only`. [See #28720](https://github.com/twbs/bootstrap/pull/28720).
-
-### Utilities
-
-### Grid
-
-- Decreased the number of responsive order utilities per breakpoint. The highest order utility with a number now is `.order-5` instead of `.order-12`. [See #28874](https://github.com/twbs/bootstrap/pull/28874).
-
-### Misc
-
-- Added `.bg-body` for quickly setting the `<body>`'s background to additional elements.
-- Negative margin utilities are disabled by default. You can re-enable them by setting `$enable-negative-margins: true`, but keep in mind this can increase the file size quite a lot.
-
-### Docs
-
-- Removed "Wall of browser bugs" page because it has become obsolete
-- Switched from Jekyll to Hugo
-
-### Build tools
-
-- Updated all devDependencies
-- We support only the latest Node.js LTS releases which are 10 and 12 at the time of writing
diff --git a/site/content/docs/5.0/utilities/api.md b/site/content/docs/5.0/utilities/api.md
deleted file mode 100644
index ecd80af5b..000000000
--- a/site/content/docs/5.0/utilities/api.md
+++ /dev/null
@@ -1,354 +0,0 @@
----
-layout: docs
-title: Utility API
-description: The utility API is a Sass-based tool to generate utility classes.
-group: utilities
-aliases: "/docs/5.0/utilities/"
-toc: true
----
-
-Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you're unfamiliar with Sass maps, read up on the [official Sass docs](https://sass-lang.com/documentation/values/maps) to get started.
-
-The `$utilities` map contains all our utilities and is later merged with your custom `$utilities` map, if present. The utility map contains a keyed list of utility groups which accept the following options:
-
-{{< bs-table "table text-start" >}}
-| Option | Type | Description |
-| --- | --- | --- |
-| `property` | **Required** | Name of the property, this can be a string or an array of strings (e.g., horizontal paddings or margins). |
-| `values` | **Required** | List of values, or a map if you don't want the class name to be the same as the value. If `null` is used as map key, it isn't compiled. |
-| `class` | Optional | Variable for the class name if you don't want it to be the same as the property. In case you don't provide the `class` key and `property` key is an array of strings, the class name will be the first element of the `property` array. |
-| `state` | Optional | List of pseudo-class variants like `:hover` or `:focus` to generate for the utility. No default value. |
-| `responsive` | Optional | Boolean indicating if responsive classes need to be generated. `false` by default. |
-| `rfs` | Optional | Boolean to enable fluid rescaling. Have a look at the [RFS]({{< docsref "/getting-started/rfs" >}}) page to find out how this works. `false` by default. |
-| `print` | Optional | Boolean indicating if print classes need to be generated. `false` by default. |
-| `rtl` | Optional | Boolean indicating if utility should be kept in RTL. `true` by default. |
-{{< /bs-table >}}
-
-## API explained
-
-All utility variables are added to the `$utilities` variable within our `_utilities.scss` stylesheet. Each group of utilities looks something like this:
-
-```scss
-$utilities: (
-  "opacity": (
-    property: opacity,
-    values: (
-      0: 0,
-      25: .25,
-      50: .5,
-      75: .75,
-      100: 1,
-    )
-  )
- );
-```
-
-Which outputs the following:
-
-```css
-.opacity-0 { opacity: 0; }
-.opacity-25 { opacity: .25; }
-.opacity-50 { opacity: .5; }
-.opacity-75 { opacity: .75; }
-.opacity-100 { opacity: 1; }
-```
-
-### Custom class prefix
-
-Use the `class` option to change the class prefix used in the compiled CSS:
-
-```scss
-$utilities: (
-  "opacity": (
-    property: opacity,
-    class: o,
-    values: (
-      0: 0,
-      25: .25,
-      50: .5,
-      75: .75,
-      100: 1,
-    )
-  )
- );
-```
-
-Output:
-
-```css
-.o-0 { opacity: 0; }
-.o-25 { opacity: .25; }
-.o-50 { opacity: .5; }
-.o-75 { opacity: .75; }
-.o-100 { opacity: 1; }
-```
-
-## States
-
-Use the `state` option to generate pseudo-class variations. Example pseudo-classes are `:hover` and `:focus`. When a list of states are provided, classnames are created for that pseudo-class. For example, to change opacity on hover, add `state: hover` and you'll get `.opacity-hover:hover` in your compiled CSS.
-
-Need multiple pseudo-classes? Use a space-separated list of states: `state: hover focus`.
-
-```scss
-$utilities: (
-  "opacity": (
-    property: opacity,
-    class: opacity,
-    state: hover,
-    values: (
-      0: 0,
-      25: .25,
-      50: .5,
-      75: .75,
-      100: 1,
-    )
-  )
-);
-```
-
-Output:
-
-```css
-.opacity-0-hover:hover { opacity: 0; }
-.opacity-25-hover:hover { opacity: .25; }
-.opacity-50-hover:hover { opacity: .5; }
-.opacity-75-hover:hover { opacity: .75; }
-.opacity-100-hover:hover { opacity: 1; }
-```
-
-### Responsive utilities
-
-Add the `responsive` boolean to generate responsive utilities (e.g., `.opacity-md-25`) across [all breakpoints]({{< docsref "/layout/breakpoints" >}}).
-
-```scss
-$utilities: (
-  "opacity": (
-    property: opacity,
-    responsive: true,
-    values: (
-      0: 0,
-      25: .25,
-      50: .5,
-      75: .75,
-      100: 1,
-    )
-  )
- );
-```
-
-Output:
-
-```css
-.opacity-0 { opacity: 0; }
-.opacity-25 { opacity: .25; }
-.opacity-50 { opacity: .5; }
-.opacity-75 { opacity: .75; }
-.opacity-100 { opacity: 1; }
-
-@media (min-width: 576px) {
-  .opacity-sm-0 { opacity: 0; }
-  .opacity-sm-25 { opacity: .25; }
-  .opacity-sm-50 { opacity: .5; }
-  .opacity-sm-75 { opacity: .75; }
-  .opacity-sm-100 { opacity: 1; }
-}
-
-@media (min-width: 768px) {
-  .opacity-md-0 { opacity: 0; }
-  .opacity-md-25 { opacity: .25; }
-  .opacity-md-50 { opacity: .5; }
-  .opacity-md-75 { opacity: .75; }
-  .opacity-md-100 { opacity: 1; }
-}
-
-@media (min-width: 992px) {
-  .opacity-lg-0 { opacity: 0; }
-  .opacity-lg-25 { opacity: .25; }
-  .opacity-lg-50 { opacity: .5; }
-  .opacity-lg-75 { opacity: .75; }
-  .opacity-lg-100 { opacity: 1; }
-}
-
-@media (min-width: 1200px) {
-  .opacity-xl-0 { opacity: 0; }
-  .opacity-xl-25 { opacity: .25; }
-  .opacity-xl-50 { opacity: .5; }
-  .opacity-xl-75 { opacity: .75; }
-  .opacity-xl-100 { opacity: 1; }
-}
-
-@media (min-width: 1400px) {
-  .opacity-xxl-0 { opacity: 0; }
-  .opacity-xxl-25 { opacity: .25; }
-  .opacity-xxl-50 { opacity: .5; }
-  .opacity-xxl-75 { opacity: .75; }
-  .opacity-xxl-100 { opacity: 1; }
-}
-```
-
-### Changing utilities
-
-Override existing utilities by using the same key. For example, if you want additional responsive overflow utility classes, you can do this:
-
-```scss
-$utilities: (
-  "overflow": (
-    responsive: true,
-    property: overflow,
-    values: visible hidden scroll auto,
-  ),
-);
-```
-
-### Print utilities
-
-Enabling the `print` option will **also** generate utility classes for print, which are only applied within the `@media print { ... }` media query.
-
-```scss
-$utilities: (
-  "opacity": (
-    property: opacity,
-    print: true,
-    values: (
-      0: 0,
-      25: .25,
-      50: .5,
-      75: .75,
-      100: 1,
-    )
-  )
- );
-```
-
-Output:
-
-```css
-.opacity-0 { opacity: 0; }
-.opacity-25 { opacity: .25; }
-.opacity-50 { opacity: .5; }
-.opacity-75 { opacity: .75; }
-.opacity-100 { opacity: 1; }
-
-@media print {
-  .opacity-print-0 { opacity: 0; }
-  .opacity-print-25 { opacity: .25; }
-  .opacity-print-50 { opacity: .5; }
-  .opacity-print-75 { opacity: .75; }
-  .opacity-print-100 { opacity: 1; }
-}
-```
-
-## Using the API
-
-Now that you're familiar with how the utilities API works, learn how to add your own custom classes and modify our default utilities.
-
-### Add utilities
-
-New utilities can be added to the default `$utilities` map with a `map-merge`. Make sure our required Sass files and `_utilities.scss` are imported first, then use the `map-merge` to add your additional utilities. For example, here's how to add a responsive `cursor` utility with three values.
-
-```scss
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/utilities";
-
-$utilities: map-merge(
-  $utilities,
-  (
-    "cursor": (
-      property: cursor,
-      class: cursor,
-      responsive: true,
-      values: auto pointer grab,
-    )
-  )
-);
-```
-
-### Modify utilities
-
-Modify existing utilities in the default `$utilities` map with `map-get` and `map-merge` functions. In the example below, we're adding an additional value to the `width` utilities. Start with an initial `map-merge` and then specify which utility you want to modify. From there, fetch the nested `"width"` map with `map-get` to access and modify the utility's options and values.
-
-```scss
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/utilities";
-
-$utilities: map-merge(
-  $utilities,
-  (
-    "width": map-merge(
-      map-get($utilities, "width"),
-      (
-        values: map-merge(
-          map-get(map-get($utilities, "width"), "values"),
-          (10: 10%),
-        ),
-      ),
-    ),
-  )
-);
-```
-
-#### Rename utilities
-
-Missing v4 utilities, or used to another naming convention? The utilities API can be used to override the resulting `class` of a given utility—for example, to rename `.ms-*` utilities to oldish `.ml-*`:
-
-```scss
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/utilities";
-
-$utilities: map-merge(
-  $utilities, (
-    "margin-start": map-merge(
-      map-get($utilities, "margin-start"),
-      ( class: ml ),
-    ),
-  )
-);
-```
-
-### Remove utilities
-
-Remove any of the default utilities by setting the group key to `null`. For example, to remove all our `width` utilities, create a `$utilities` `map-merge` and add `"width": null` within.
-
-```scss
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/utilities";
-
-$utilities: map-merge(
-  $utilities,
-  (
-    "width": null
-  )
-);
-```
-
-#### Remove utility in RTL
-
-Some edge cases make [RTL styling difficult](https://rtlstyling.com/posts/rtl-styling#common-things-that-might-not-work-for-rtl), such as line breaks in Arabic. Thus utilities can be dropped from RTL output by setting the `rtl` option to `false`:
-
-```scss
-$utilities: (
-  "word-wrap": (
-    property: word-wrap word-break,
-    class: text,
-    values: (break: break-word),
-    rtl: false
-  ),
-);
-```
-
-Output:
-
-```css
-/* rtl:begin:remove */
-.text-break {
-  word-wrap: break-word !important;
-  word-break: break-word !important;
-}
-/* rtl:end:remove */
-```
-
-This doesn't output anything in RTL, thanks to [the RTLCSS `remove` control directive](https://rtlcss.com/learn/usage-guide/control-directives/#remove).
diff --git a/site/content/docs/5.1/_index.html b/site/content/docs/5.1/_index.html
new file mode 100644
index 000000000..198e6af8c
--- /dev/null
+++ b/site/content/docs/5.1/_index.html
@@ -0,0 +1,5 @@
+---
+layout: redirect
+sitemap_exclude: true
+redirect: "/docs/5.1/getting-started/introduction/"
+---
diff --git a/site/content/docs/5.0/about/brand.md b/site/content/docs/5.1/about/brand.md
index 80c613526..80c613526 100644
--- a/site/content/docs/5.0/about/brand.md
+++ b/site/content/docs/5.1/about/brand.md
diff --git a/site/content/docs/5.0/about/license.md b/site/content/docs/5.1/about/license.md
index 07e60e00a..07e60e00a 100644
--- a/site/content/docs/5.0/about/license.md
+++ b/site/content/docs/5.1/about/license.md
diff --git a/site/content/docs/5.0/about/overview.md b/site/content/docs/5.1/about/overview.md
index b295eb560..4fd019314 100644
--- a/site/content/docs/5.0/about/overview.md
+++ b/site/content/docs/5.1/about/overview.md
@@ -5,7 +5,7 @@ description: Learn more about the team maintaining Bootstrap, how and why the pr
 group: about
 aliases:
   - "/about/"
-  - "/docs/5.0/about/"
+  - "/docs/5.1/about/"
 ---
 
 ## Team
@@ -22,7 +22,7 @@ Originally [released](https://blog.twitter.com/developer/en_us/a/2011/bootstrap-
 
 With Bootstrap 4, we once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSS's flexbox. Our intention is to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers.
 
-Our latest release, Bootstrap 5 (currently in development), focuses on improving v4's codebase with as few major breaking changes as possible. We improved existing features and components, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of our tooling.
+Our latest release, Bootstrap 5, focuses on improving v4's codebase with as few major breaking changes as possible. We improved existing features and components, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of our tooling.
 
 ## Get involved
 
diff --git a/site/content/docs/5.0/about/team.md b/site/content/docs/5.1/about/team.md
index 3c1666f29..3c1666f29 100644
--- a/site/content/docs/5.0/about/team.md
+++ b/site/content/docs/5.1/about/team.md
diff --git a/site/content/docs/5.0/about/translations.md b/site/content/docs/5.1/about/translations.md
index e719e3a84..e719e3a84 100644
--- a/site/content/docs/5.0/about/translations.md
+++ b/site/content/docs/5.1/about/translations.md
diff --git a/site/content/docs/5.0/components/accordion.md b/site/content/docs/5.1/components/accordion.md
index 923d5a98b..535ae46b5 100644
--- a/site/content/docs/5.0/components/accordion.md
+++ b/site/content/docs/5.1/components/accordion.md
@@ -5,7 +5,7 @@ description: Build vertically collapsing accordions in combination with our Coll
 group: components
 aliases:
   - "/components/"
-  - "/docs/5.0/components/"
+  - "/docs/5.1/components/"
 toc: true
 ---
 
@@ -31,7 +31,7 @@ Click the accordions below to expand/collapse the accordion content.
     </h2>
     <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
       <div class="accordion-body">
-        <strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
       </div>
     </div>
   </div>
@@ -101,6 +101,51 @@ Add `.accordion-flush` to remove the default `background-color`, some borders, a
 </div>
 {{< /example >}}
 
+### Always open
+
+Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accordion items stay open when another item is opened.
+
+{{< example >}}
+<div class="accordion" id="accordionPanelsStayOpenExample">
+  <div class="accordion-item">
+    <h2 class="accordion-header" id="panelsStayOpen-headingOne">
+      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
+        Accordion Item #1
+      </button>
+    </h2>
+    <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
+      <div class="accordion-body">
+        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+      </div>
+    </div>
+  </div>
+  <div class="accordion-item">
+    <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
+        Accordion Item #2
+      </button>
+    </h2>
+    <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
+      <div class="accordion-body">
+        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+      </div>
+    </div>
+  </div>
+  <div class="accordion-item">
+    <h2 class="accordion-header" id="panelsStayOpen-headingThree">
+      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
+        Accordion Item #3
+      </button>
+    </h2>
+    <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
+      <div class="accordion-body">
+        <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
+      </div>
+    </div>
+  </div>
+</div>
+{{< /example >}}
+
 ## Accessibility
 
 Please read the [collapse accessibility section]({{< docsref "/components/collapse#accessibility" >}}) for more information.
diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.1/components/alerts.md
index 3ef2e62cf..1df07983e 100644
--- a/site/content/docs/5.0/components/alerts.md
+++ b/site/content/docs/5.1/components/alerts.md
@@ -23,6 +23,45 @@ Alerts are available for any length of text, as well as an optional close button
 {{< partial "callout-warning-color-assistive-technologies.md" >}}
 {{< /callout >}}
 
+### Live example
+
+Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.
+
+<div id="liveAlertPlaceholder"></div>
+
+<div class="bd-example">
+  <button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
+</div>
+
+```html
+<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
+
+<div class="alert alert-primary alert-dismissible" role="alert" id="liveAlert">
+  <strong>Nice!</strong> You've triggered this alert.
+  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+</div>
+```
+
+We use the following JavaScript to trigger our live alert demo:
+
+```js
+var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
+var alertTrigger = document.getElementById('liveAlertBtn')
+
+function alert(message, type) {
+  var wrapper = document.createElement('div')
+  wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'
+
+  alertPlaceholder.append(wrapper)
+}
+
+if (alertTrigger) {
+  alertTrigger.addEventListener('click', function () {
+    alert('Nice, you triggered this alert message!', 'success')
+  })
+}
+```
+
 ### Link color
 
 Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
@@ -49,6 +88,62 @@ Alerts can also contain additional HTML elements like headings, paragraphs and d
 </div>
 {{< /example >}}
 
+### Icons
+
+Similarly, you can use [flexbox utilities]({{< docsref "/utilities/flex" >}}) and [Bootstrap Icons]({{< param icons >}}) to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
+
+{{< example >}}
+<div class="alert alert-primary d-flex align-items-center" role="alert">
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
+    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+  </svg>
+  <div>
+    An example alert with an icon
+  </div>
+</div>
+{{< /example >}}
+
+Need more than one icon for your alerts? Consider using more Bootstrap Icons and making a local SVG sprite like so to easily reference the same icons repeatedly.
+
+{{< example >}}
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
+    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+  </symbol>
+  <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
+    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
+  </symbol>
+  <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
+    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+  </symbol>
+</svg>
+
+<div class="alert alert-primary d-flex align-items-center" role="alert">
+  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
+  <div>
+    An example alert with an icon
+  </div>
+</div>
+<div class="alert alert-success d-flex align-items-center" role="alert">
+  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
+  <div>
+    An example success alert with an icon
+  </div>
+</div>
+<div class="alert alert-warning d-flex align-items-center" role="alert">
+  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
+  <div>
+    An example warning alert with an icon
+  </div>
+</div>
+<div class="alert alert-danger d-flex align-items-center" role="alert">
+  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
+  <div>
+    An example danger alert with an icon
+  </div>
+</div>
+{{< /example >}}
+
 ### Dismissing
 
 Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how:
@@ -91,35 +186,30 @@ Loop that generates the modifier classes with the `alert-variant()` mixin.
 
 ## JavaScript behavior
 
-### Triggers
+### Initialize
 
-Enable dismissal of an alert via JavaScript:
+Initialize elements as alerts
 
 ```js
 var alertList = document.querySelectorAll('.alert')
-alertList.forEach(function (alert) {
-  new bootstrap.Alert(alert)
+var alerts =  [].slice.call(alertList).map(function (element) {
+  return new bootstrap.Alert(element)
 })
 ```
 
-Or with `data` attributes on a button **within the alert**, as demonstrated above:
-
-```html
-<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-```
+{{< callout info >}}
+For the sole purpose of dismissing an alert, it isn't necessary to initialize the component manually via the JS API. By making use of `data-bs-dismiss="alert"`, the component will be initialized automatically and properly dismissed.
 
-Note that closing an alert will remove it from the DOM.
+See the [triggers](#triggers) section for more details.
+{{< /callout >}}
 
-### Methods
+### Triggers
 
-You can create an alert instance with the alert constructor, for example:
+{{% js-dismiss "alert" %}}
 
-```js
-var myAlert = document.getElementById('myAlert')
-var bsAlert = new bootstrap.Alert(myAlert)
-```
+**Note that closing an alert will remove it from the DOM.**
 
-This makes an alert listen for click events on descendant elements which have the `data-bs-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.)
+### Methods
 
 <table class="table">
   <thead>
@@ -153,6 +243,15 @@ This makes an alert listen for click events on descendant elements which have th
         Static method which allows you to get the alert instance associated to a DOM element, you can use it like this: <code>bootstrap.Alert.getInstance(alert)</code>
       </td>
     </tr>
+    <tr>
+      <td>
+        <code>getOrCreateInstance</code>
+      </td>
+      <td>
+        Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialised.
+        You can use it like this: <code>bootstrap.Alert.getOrCreateInstance(element)</code>
+      </td>
+    </tr>
   </tbody>
 </table>
 
diff --git a/site/content/docs/5.0/components/badge.md b/site/content/docs/5.1/components/badge.md
index 50571d885..de80d3b27 100644
--- a/site/content/docs/5.0/components/badge.md
+++ b/site/content/docs/5.1/components/badge.md
@@ -6,10 +6,12 @@ group: components
 toc: true
 ---
 
-## Example
+## Examples
 
 Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. As of v5, badges no longer have focus or hover styles for links.
 
+### Headings
+
 {{< example >}}
 <h1>Example heading <span class="badge bg-secondary">New</span></h1>
 <h2>Example heading <span class="badge bg-secondary">New</span></h2>
@@ -19,6 +21,8 @@ Badges scale to match the size of the immediate parent element by using relative
 <h6>Example heading <span class="badge bg-secondary">New</span></h6>
 {{< /example >}}
 
+### Buttons
+
 Badges can be used as part of links or buttons to provide a counter.
 
 {{< example >}}
@@ -31,10 +35,28 @@ Note that depending on how they are used, badges may be confusing for users of s
 
 Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text.
 
+### Positioned
+
+Use utilities to modify a `.badge` and position it in the corner of a link or button.
+
 {{< example >}}
-<button type="button" class="btn btn-primary">
-  Profile <span class="badge bg-secondary">9</span>
-  <span class="visually-hidden">unread messages</span>
+<button type="button" class="btn btn-primary position-relative">
+  Inbox
+  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
+    99+
+    <span class="visually-hidden">unread messages</span>
+  </span>
+</button>
+{{< /example >}}
+
+You can also replace the `.badge` class with a few more utilities without a count for a more generic indicator.
+
+{{< example >}}
+<button type="button" class="btn btn-primary position-relative">
+  Profile
+  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
+    <span class="visually-hidden">New alerts</span>
+  </span>
 </button>
 {{< /example >}}
 
diff --git a/site/content/docs/5.0/components/breadcrumb.md b/site/content/docs/5.1/components/breadcrumb.md
index 9143e7612..9143e7612 100644
--- a/site/content/docs/5.0/components/breadcrumb.md
+++ b/site/content/docs/5.1/components/breadcrumb.md
diff --git a/site/content/docs/5.0/components/button-group.md b/site/content/docs/5.1/components/button-group.md
index 184ca4973..184ca4973 100644
--- a/site/content/docs/5.0/components/button-group.md
+++ b/site/content/docs/5.1/components/button-group.md
diff --git a/site/content/docs/5.0/components/buttons.md b/site/content/docs/5.1/components/buttons.md
index 063bae1c4..d62d6e2b6 100644
--- a/site/content/docs/5.0/components/buttons.md
+++ b/site/content/docs/5.1/components/buttons.md
@@ -193,6 +193,23 @@ var bsButton = new bootstrap.Button(button)
         Destroys an element's button. (Removes stored data on the DOM element)
       </td>
     </tr>
+    <tr>
+      <td>
+        <code>getInstance</code>
+      </td>
+      <td>
+        Static method which allows you to get the button instance associated to a DOM element, you can use it like this: <code>bootstrap.Button.getInstance(element)</code>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>getOrCreateInstance</code>
+      </td>
+      <td>
+        Static method which returns a button instance associated to a DOM element or create a new one in case it wasn't initialised.
+        You can use it like this: <code>bootstrap.Button.getOrCreateInstance(element)</code>
+      </td>
+    </tr>
   </tbody>
 </table>
 
diff --git a/site/content/docs/5.0/components/card.md b/site/content/docs/5.1/components/card.md
index 48f54f0c2..97bcf77d5 100644
--- a/site/content/docs/5.0/components/card.md
+++ b/site/content/docs/5.1/components/card.md
@@ -398,7 +398,7 @@ Using a combination of grid and utility classes, cards can be made horizontal in
 <div class="card mb-3" style="max-width: 540px;">
   <div class="row g-0">
     <div class="col-md-4">
-      {{< placeholder width="100%" height="250" text="Image" >}}
+      {{< placeholder width="100%" height="250" text="Image" class="img-fluid rounded-start" >}}
     </div>
     <div class="col-md-8">
       <div class="card-body">
diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.1/components/carousel.md
index 9ad7294ec..e106e76c0 100644
--- a/site/content/docs/5.0/components/carousel.md
+++ b/site/content/docs/5.1/components/carousel.md
@@ -413,8 +413,21 @@ var carousel = new bootstrap.Carousel(myCarousel, {
       <td>Destroys an element's carousel. (Removes stored data on the DOM element)</td>
     </tr>
     <tr>
-      <td><code>getInstance</code></td>
-      <td>Static method which allows you to get the carousel instance associated with a DOM element.</td>
+      <td>
+        <code>getInstance</code>
+      </td>
+      <td>
+        Static method which allows you to get the carousel instance associated to a DOM element, you can use it like this: <code>bootstrap.Carousel.getInstance(element)</code>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>getOrCreateInstance</code>
+      </td>
+      <td>
+        Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn't initialised.
+        You can use it like this: <code>bootstrap.Carousel.getOrCreateInstance(element)</code>
+      </td>
     </tr>
   </tbody>
 </table>
diff --git a/site/content/docs/5.0/components/close-button.md b/site/content/docs/5.1/components/close-button.md
index f4a3ed071..f4a3ed071 100644
--- a/site/content/docs/5.0/components/close-button.md
+++ b/site/content/docs/5.1/components/close-button.md
diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.1/components/collapse.md
index fe26918c1..5d413ad75 100644
--- a/site/content/docs/5.0/components/collapse.md
+++ b/site/content/docs/5.1/components/collapse.md
@@ -40,6 +40,29 @@ Generally, we recommend using a button with the `data-bs-target` attribute. Whil
 </div>
 {{< /example >}}
 
+## Horizontal
+
+The collapse plugin also supports horizontal collapsing. Add the `.collapse-horizontal` modifier class to transition the `width` instead of `height` and set a `width` on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our [width utilities]({{< docsref "/utilities/sizing" >}}).
+
+{{< callout info >}}
+Please note that while the example below has a `min-height` set to avoid excessive repaints in our docs, this is not explicitly required. **Only the `width` on the child element is required.**
+{{< /callout >}}
+
+{{< example >}}
+<p>
+  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
+    Toggle width collapse
+  </button>
+</p>
+<div style="min-height: 120px;">
+  <div class="collapse collapse-horizontal" id="collapseWidthExample">
+    <div class="card card-body" style="width: 300px;">
+      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
+    </div>
+  </div>
+</div>
+{{< /example >}}
+
 ## Multiple targets
 
 A `<button>` or `<a>` can show and hide multiple elements by referencing them with a selector in its `href` or `data-bs-target` attribute.
@@ -103,7 +126,7 @@ These classes can be found in `_transitions.scss`.
 
 Just add `data-bs-toggle="collapse"` and a `data-bs-target` to the element to automatically assign control of one or more collapsible elements. The `data-bs-target` attribute accepts a CSS selector to apply the collapse to. Be sure to add the class `collapse` to the collapsible element. If you'd like it to default open, add the additional class `show`.
 
-To add accordion-like group management to a collapsible area, add the data attribute `data-bs-parent="#selector"`. Refer to the demo to see this in action.
+To add accordion-like group management to a collapsible area, add the data attribute `data-bs-parent="#selector"`. Refer to the [accordion page]({{< docsref "/components/accordion" >}}) for more information.
 
 ### Via JavaScript
 
@@ -187,8 +210,21 @@ var bsCollapse = new bootstrap.Collapse(myCollapse, {
       <td>Destroys an element's collapse. (Removes stored data on the DOM element)</td>
     </tr>
     <tr>
-      <td><code>getInstance</code></td>
-      <td>Static method which allows you to get the collapse instance associated with a DOM element.</td>
+      <td>
+        <code>getInstance</code>
+      </td>
+      <td>
+        Static method which allows you to get the collapse instance associated to a DOM element, you can use it like this: <code>bootstrap.Collapse.getInstance(element)</code>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>getOrCreateInstance</code>
+      </td>
+      <td>
+        Static method which returns a collapse instance associated to a DOM element or create a new one in case it wasn't initialised.
+        You can use it like this: <code>bootstrap.Collapse.getOrCreateInstance(element)</code>
+      </td>
     </tr>
   </tbody>
 </table>
diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.1/components/dropdowns.md
index d74eec765..1668ae7bd 100644
--- a/site/content/docs/5.0/components/dropdowns.md
+++ b/site/content/docs/5.1/components/dropdowns.md
@@ -583,7 +583,7 @@ Trigger dropdown menus at the left of the elements by adding `.dropstart` to the
 
 ## Menu items
 
-Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s.
+You can use `<a>` or `<button>` elements as dropdown items.
 
 {{< example >}}
 <div class="dropdown">
@@ -903,6 +903,56 @@ Use `data-bs-offset` or `data-bs-reference` to change the location of the dropdo
 </div>
 {{< /example >}}
 
+### Auto close behavior
+
+By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the `autoClose` option to change this behavior of the dropdown.
+
+{{< example >}}
+<div class="btn-group">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
+    Default dropdown
+  </button>
+  <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
+    <li><a class="dropdown-item" href="#">Menu item</a></li>
+    <li><a class="dropdown-item" href="#">Menu item</a></li>
+    <li><a class="dropdown-item" href="#">Menu item</a></li>
+  </ul>
+</div>
+
+<div class="btn-group">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">
+    Clickable outside
+  </button>
+  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
+    <li><a class="dropdown-item" href="#">Menu item</a></li>
+    <li><a class="dropdown-item" href="#">Menu item</a></li>
+    <li><a class="dropdown-item" href="#">Menu item</a></li>
+  </ul>
+</div>
+
+<div class="btn-group">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+    Clickable inside
+  </button>
+  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
+    <li><a class="dropdown-item" href="#">Menu item</a></li>
+    <li><a class="dropdown-item" href="#">Menu item</a></li>
+    <li><a class="dropdown-item" href="#">Menu item</a></li>
+  </ul>
+</div>
+
+<div class="btn-group">
+  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">
+    Manual close
+  </button>
+  <ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
+    <li><a class="dropdown-item" href="#">Menu item</a></li>
+    <li><a class="dropdown-item" href="#">Menu item</a></li>
+    <li><a class="dropdown-item" href="#">Menu item</a></li>
+  </ul>
+</div>
+{{< /example >}}
+
 ## Sass
 
 ### Variables
@@ -967,7 +1017,7 @@ Regardless of whether you call your dropdown via JavaScript or instead use the d
 
 ### Options
 
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`.
+Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using `data-bs-autoClose="false"`, use `data-bs-auto-close="false"`.
 
 <table class="table">
   <thead>
@@ -980,16 +1030,10 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
   </thead>
   <tbody>
     <tr>
-      <td><code>flip</code></td>
-      <td>boolean</td>
-      <td><code>true</code></td>
-      <td>Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper's <a href="https://popper.js.org/docs/v2/modifiers/flip/">flip docs</a>.</td>
-    </tr>
-    <tr>
       <td><code>boundary</code></td>
       <td>string | element</td>
       <td><code>'clippingParents'</code></td>
-      <td>Overflow constraint boundary of the dropdown menu. By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">preventOverflow docs</a>.</td>
+      <td>Overflow constraint boundary of the dropdown menu (applies only to Popper's preventOverflow modifier). By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">detectOverflow docs</a>.</td>
     </tr>
     <tr>
       <td><code>reference</code></td>
@@ -1014,6 +1058,20 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       </td>
     </tr>
     <tr>
+      <td><code>autoClose</code></td>
+      <td>boolean | string</td>
+      <td><code>true</code></td>
+      <td>
+        <p>Configure the auto close behavior of the dropdown:</p>
+        <ul>
+          <li><code>true</code> - the dropdown will be closed by clicking outside or inside the dropdown menu.</li>
+          <li><code>false</code> - the dropdown will be closed by clicking the toggle button and manually calling <code>hide</code> or <code>toggle</code> method. (Also will not be closed by pressing <kbd>esc</kbd> key)</li>
+          <li><code>'inside'</code> - the dropdown will be closed (only) by clicking inside the dropdown menu.</li>
+          <li><code>'outside'</code> - the dropdown will be closed (only) by clicking outside the dropdown menu.</li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
       <td><code>popperConfig</code></td>
       <td>null | object | function</td>
       <td><code>null</code></td>
@@ -1078,9 +1136,20 @@ var dropdown = new bootstrap.Dropdown(element, {
       </td>
     </tr>
     <tr>
-      <td><code>getInstance</code></td>
       <td>
-        Static method which allows you to get the dropdown instance associated with a DOM element.
+        <code>getInstance</code>
+      </td>
+      <td>
+        Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this: <code>bootstrap.Dropdown.getInstance(element)</code>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>getOrCreateInstance</code>
+      </td>
+      <td>
+        Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn't initialised.
+        You can use it like this: <code>bootstrap.Dropdown.getOrCreateInstance(element)</code>
       </td>
     </tr>
   </tbody>
diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.1/components/list-group.md
index 1ac5a9a2b..c49541bdb 100644
--- a/site/content/docs/5.0/components/list-group.md
+++ b/site/content/docs/5.1/components/list-group.md
@@ -94,6 +94,48 @@ Add `.list-group-flush` to remove some borders and rounded corners to render lis
 </ul>
 {{< /example >}}
 
+## Numbered
+
+Add the `.list-group-numbered` modifier class (and optionally use an `<ol>` element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a `<ol>`s default browser styling) for better placement inside list group items and to allow for better customization.
+
+Numbers are generated by `counter-reset` on the `<ol>`, and then styled and placed with a `::before` pseudo-element on the `<li>` with `counter-increment` and `content`.
+
+{{< example >}}
+<ol class="list-group list-group-numbered">
+  <li class="list-group-item">Cras justo odio</li>
+  <li class="list-group-item">Cras justo odio</li>
+  <li class="list-group-item">Cras justo odio</li>
+</ol>
+{{< /example >}}
+
+These work great with custom content as well.
+
+{{< example >}}
+<ol class="list-group list-group-numbered">
+  <li class="list-group-item d-flex justify-content-between align-items-start">
+    <div class="ms-2 me-auto">
+      <div class="fw-bold">Subheading</div>
+      Cras justo odio
+    </div>
+    <span class="badge bg-primary rounded-pill">14</span>
+  </li>
+  <li class="list-group-item d-flex justify-content-between align-items-start">
+    <div class="ms-2 me-auto">
+      <div class="fw-bold">Subheading</div>
+      Cras justo odio
+    </div>
+    <span class="badge bg-primary rounded-pill">14</span>
+  </li>
+  <li class="list-group-item d-flex justify-content-between align-items-start">
+    <div class="ms-2 me-auto">
+      <div class="fw-bold">Subheading</div>
+      Cras justo odio
+    </div>
+    <span class="badge bg-primary rounded-pill">14</span>
+  </li>
+</ol>
+{{< /example >}}
+
 ## Horizontal
 
 Add `.list-group-horizontal` to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant `.list-group-horizontal-{sm|md|lg|xl|xxl}` to make a list group horizontal starting at that breakpoint's `min-width`. Currently **horizontal list groups cannot be combined with flush list groups.**
@@ -309,10 +351,10 @@ Use the tab JavaScript plugin—include it individually or through the compiled
 <div class="row">
   <div class="col-4">
     <div class="list-group" id="list-tab" role="tablist">
-      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
-      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
-      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
-      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
+      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
+      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
+      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
+      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
     </div>
   </div>
   <div class="col-8">
@@ -442,6 +484,15 @@ var triggerEl = document.querySelector('#trigger')
 var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
 ```
 
+#### getOrCreateInstance
+
+*Static* method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn't initialised
+
+```js
+var triggerEl = document.querySelector('#trigger')
+var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
+```
+
 ### Events
 
 When showing a new tab, the events fire in the following order:
@@ -481,9 +532,11 @@ If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will
 </table>
 
 ```js
-var tabEl = document.querySelector('a[data-bs-toggle="list"]')
-tabEl.addEventListener('shown.bs.tab', function (event) {
-  event.target // newly activated tab
-  event.relatedTarget // previous active tab
-})
+var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
+tabElms.forEach(function(tabElm) {
+  tabElm.addEventListener('shown.bs.tab', function (event) {
+    event.target // newly activated tab
+    event.relatedTarget // previous active tab
+  })
+}
 ```
diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.1/components/modal.md
index 0abe0ce0f..118dc842f 100644
--- a/site/content/docs/5.0/components/modal.md
+++ b/site/content/docs/5.1/components/modal.md
@@ -197,15 +197,8 @@ When modals become too long for the user's viewport or device, they scroll indep
         <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
-      <div class="modal-body">
-        <p>What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.</p>
-        <p>We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.</p>
-        <p>Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.</p>
-        <p>Just own the night like the 4th of July! I’m gon’ put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I’m gon’ put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.</p>
-        <p>You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.</p>
-        <p>I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?</p>
-        <p>Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.</p>
-        <p>We'd keep all our promises be us against the world. If you get the chance you better keep her. It's time to bring out the big, big, big, big, big, big balloons. I hope you got a healthy appetite. Don't let the greatness get you down, oh, oh yeah. Yeah, she's footloose and so fancy free. I want the jaw droppin', eye poppin', head turnin', body shockin'. End of the rainbow looking treasure.</p>
+      <div class="modal-body" style="min-height: 1500px">
+        <p>This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text the modal, we use an inline style set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
@@ -231,14 +224,9 @@ You can also create a scrollable modal that allows scroll the modal body by addi
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
-        <p>What follows is just some placeholder text for this modal dialog. You just gotta ignite the light and let it shine! Come just as you are to me. Just own the night like the 4th of July. Infect me with your love and fill me with your poison. Come just as you are to me. End of the rainbow looking treasure.</p>
-        <p>I can't sleep let's run away and don't ever look back, don't ever look back. I can't sleep let's run away and don't ever look back, don't ever look back. Yes, we make angels cry, raining down on earth from up above. I'm walking on air (tonight). Let you put your hands on me in my skin-tight jeans. Stinging like a bee I earned my stripes. I went from zero, to my own hero. Even brighter than the moon, moon, moon. Make 'em go, 'Aah, aah, aah' as you shoot across the sky-y-y! Why don't you let me stop by?</p>
-        <p>Boom, boom, boom. Never made me blink one time. Yeah, you're lucky if you're on her plane. Talk about our future like we had a clue. Oh my God no exaggeration. You're original, cannot be replaced. The girl's a freak, she drive a jeep in Laguna Beach. It's no big deal, it's no big deal, it's no big deal. In another life I would make you stay. I'm ma get your heart racing in my skin-tight jeans. I wanna walk on your wave length and be there when you vibrate Never made me blink one time.</p>
-        <p>We'd keep all our promises be us against the world. In another life I would be your girl. We can dance, until we die, you and I, will be young forever. And on my 18th Birthday we got matching tattoos. So open up your heart and just let it begin. 'Cause she's the muse and the artist. She eats your heart out. Like Jeffrey Dahmer (woo). Pop your confetti. (This is how we do) I know one spark will shock the world, yeah yeah. If you only knew what the future holds.</p>
-        <p>Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.</p>
-        <p>We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.</p>
-        <p>Before you met me I was alright but things were kinda heavy. Peach-pink lips, yeah, everybody stares. This is no big deal. Calling out my name. I could have rewrite your addiction. She's got that, je ne sais quoi, you know it. Heavy is the head that wears the crown. 'Cause, baby, you're a firework. Like thunder gonna shake the ground.</p>
-        <p>Just own the night like the 4th of July! I’m gon’ put her in a coma. What you're waiting for, it's time for you to show it off. Can't replace you with a million rings. You open my eyes and I'm ready to go, lead me into the light. And here you are. I’m gon’ put her in a coma. Come on, let your colours burst. So cover your eyes, I have a surprise. As I march alone to a different beat. Glitter all over the room pink flamingos in the pool.</p>
+        <p>This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.</p>
+        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+        <p>This content should appear at the bottom after you scroll.</p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
@@ -273,7 +261,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
-        <p>Placeholder text for this demonstration of a vertically centered modal dialog.</p>
+        <p>This is a vertically centered modal.</p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
@@ -291,10 +279,9 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
-        <p>Placeholder text for this demonstration of a vertically centered modal dialog.</p>
-        <p>In this case, the dialog has a bit more content, just to show how vertical centering can be added to a scrollable modal.</p>
-        <p>What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.</p>
-        <p>We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.</p>
+        <p>This is some placeholder content to show a vertically centered modal. We've added some extra copy here to show how vertically centering the modal works when combined with scrollable modals. We also use some repeated line breaks to quickly extend the height of the content, thereby triggering the scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.</p>
+        <br><br><br><br><br><br><br><br><br><br>
+        <p>Just like that.</p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
@@ -509,6 +496,46 @@ exampleModal.addEventListener('show.bs.modal', function (event) {
 })
 ```
 
+### Toggle between modals
+
+Toggle between multiple modals with some clever placement of the `data-bs-target` and `data-bs-toggle` attributes. For example, you could toggle a password reset modal from within an already open sign in modal. **Please note multiple modals cannot be open at the same time**—this method simply toggles between two separate modals.
+
+{{< example >}}
+<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        Show a second modal and hide this one with the button below.
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        Hide this modal and show the first with the button below.
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
+      </div>
+    </div>
+  </div>
+</div>
+<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
+{{< /example >}}
+
 ### Change animation
 
 The `$modal-fade-transform` variable determines the transform state of `.modal-dialog` before the modal fade-in animation, the `$modal-show-transform` variable determines the transform of `.modal-dialog` at the end of the modal fade-in animation.
@@ -692,14 +719,7 @@ Another override is the option to pop up a modal that covers the user viewport,
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
-        <p>What follows is just some placeholder text for this modal dialog. I feel like I'm already there. I’m gon’ put her in a coma. Boom, boom, boom. You're reading me like erotica, boy, you make me feel exotic, yeah. Happy birthday. From Tokyo to Mexico, to Rio. I knew you were.</p>
-        <p>Last Friday night. Calling out my name. Kiss her, touch her, squeeze her buns. Heavy is the head that wears the crown. So open up your heart and just let it begin. Boy all this time was worth the waiting. You know that I'm the girl that you should call. End of the rainbow looking treasure. You're reading me like erotica, boy, you make me feel exotic, yeah. Do you know that there's still a chance for you 'Cause there's a spark in you? So I sat quietly, agreed politely. From Tokyo to Mexico, to Rio.</p>
-        <p>Don't be a shy kinda guy I'll bet it's beautiful. You fall asleep during foreplay, 'Cause the pills you take, are more your forte. Open up your heart. You're never gonna be unsatisfied. Know that you are worthy. This one goes out to the ladies at breakfast in last night's dress. You think you've seen her in a magazine. I should've told you what you meant to me 'Cause now I pay the price. Takes you miles high, so high, 'cause she’s got that one international smile.</p>
-        <p>Yo, shout out to all you kids, buying bottle service, with your rent money. So I sat quietly, agreed politely. They say, be afraid you're not like the others, futuristic lover. Boom, boom, boom. Don't need apologies. We can dance, until we die, you and I, will be young forever. If you choose to walk away, don’t walk away. You know that I'm the girl that you should call. This Friday night, do it all again.</p>
-        <p>I'm walking on air. But lil' mama so dope. It's time to bring out the big balloons. Are you ready for, ready for. The boys break their necks try'na to creep a little sneak peek. Summer after high school when we first met. If you want it all. (This is how we do) You open my eyes and I'm ready to go, lead me into the light.</p>
-        <p>Growing fast into a bolt of lightning. We freak in my jeep, Snoop Doggy Dogg on the stereo. Baby do you dare to do this? Open up your heart and just let it begin. Peach-pink lips, yeah, everybody stares. Be your teenage dream tonight. Are you brave enough to let me see your peacock? You think I'm funny when I tell the punchline wrong. Woo! I knew you were. All this money can't buy me a time machine. I can't sleep let's run away and don't ever look back, don't ever look back.</p>
-        <p>Make it like your birthday everyday. I'm not sticking around to watch you go down. Uh-huh, I see you. For you I'll risk it all, all. I’m gon’ put her in a coma. She ride me like a roller coaster. You hear my voice, you hear that sound. 'Cause I will love you unconditionally (oh yeah). They say, be afraid you're not like the others, futuristic lover. There is no fear now, let go and just be free, I will love you unconditionally.</p>
-        <p>We can dance, until we die, you and I, will be young forever. Pop your Pérignon. Last Friday night, yeah I think we broke the law, always say we're gonna stop. Don't need apologies. Give you something good to celebrate. But don’t make me your enemy, your enemy, your enemy. Flowers in her hair, she don't care. Tone, tan fit and ready, turn it up cause its gettin' heavy.</p>
+        ...
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
@@ -807,16 +827,26 @@ Another override is the option to pop up a modal that covers the user viewport,
 
 ## Usage
 
-The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `<body>` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal.
+The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also overrides default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal.
 
 ### Via data attributes
 
+#### Toggle
+
 Activate a modal without writing JavaScript. Set `data-bs-toggle="modal"` on a controller element, like a button, along with a `data-bs-target="#foo"` or `href="#foo"` to target a specific modal to toggle.
 
 ```html
 <button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
 ```
 
+#### Dismiss
+
+{{% js-dismiss "modal" %}}
+
+{{< callout warning >}}
+While both ways to dismiss a modal are supported, keep in mind that dismissing from outside a modal does not match [the WAI-ARIA modal dialog design pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). Do this at your own risk.
+{{< /callout >}}
+
 ### Via JavaScript
 
 Create a modal with a single line of JavaScript:
@@ -892,6 +922,13 @@ Manually opens a modal. **Returns to the caller before the modal has actually be
 myModal.show()
 ```
 
+Also, you can pass a DOM element as an argument that can be received in the modal events (as the `relatedTarget` property).
+
+```js
+var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
+myModal.show(modalToggle)
+```
+
 #### hide
 
 Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs).
@@ -925,6 +962,15 @@ var myModalEl = document.getElementById('myModal')
 var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
 ```
 
+#### getOrCreateInstance
+
+*Static* method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn't initialised
+
+```js
+var myModalEl = document.querySelector('#myModal')
+var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
+```
+
 ### Events
 
 Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">`).
diff --git a/site/content/docs/5.0/components/navbar.md b/site/content/docs/5.1/components/navbar.md
index 34d43a29a..1abfcd16c 100644
--- a/site/content/docs/5.0/components/navbar.md
+++ b/site/content/docs/5.1/components/navbar.md
@@ -80,6 +80,10 @@ This example uses [background]({{< docsref "/utilities/background" >}}) (`bg-lig
 
 The `.navbar-brand` can be applied to most elements, but an anchor works best, as some elements might require utility classes or custom styles.
 
+#### Text
+
+Add your text within an element with the `.navbar-brand` class.
+
 {{< example >}}
 <!-- As a link -->
 <nav class="navbar navbar-light bg-light">
@@ -96,10 +100,11 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best, a
 </nav>
 {{< /example >}}
 
-Adding images to the `.navbar-brand` will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.
+#### Image
+
+You can replace the text within the `.navbar-brand` with an `<img>`.
 
 {{< example >}}
-<!-- Just an image -->
 <nav class="navbar navbar-light bg-light">
   <div class="container">
     <a class="navbar-brand" href="#">
@@ -109,12 +114,15 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
 </nav>
 {{< /example >}}
 
+#### Image and text
+
+You can also make use of some additional utilities to add an image and text at the same time. Note the addition of `.d-inline-block` and `.align-text-top` on the `<img>`.
+
 {{< example >}}
-<!-- Image and text -->
 <nav class="navbar navbar-light bg-light">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">
-      <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-top">
+      <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
       Bootstrap
     </a>
   </div>
@@ -647,6 +655,70 @@ Sometimes you want to use the collapse plugin to trigger a container element for
 
 When you do this, we recommend including additional JavaScript to move the focus programmatically to the container when it is opened. Otherwise, keyboard users and users of assistive technologies will likely have a hard time finding the newly revealed content - particularly if the container that was opened comes *before* the toggler in the document's structure. We also recommend making sure that the toggler has the `aria-controls` attribute, pointing to the `id` of the content container. In theory, this allows assistive technology users to jump directly from the toggler to the container it controls–but support for this is currently quite patchy.
 
+### Offcanvas
+
+Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin. We extend both the offcanvas default styles and use our `.navbar-expand-*` classes to create a dynamic and flexible navigation sidebar.
+
+In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `.navbar-expand-*` class entirely.
+
+{{< example >}}
+<nav class="navbar navbar-light bg-light fixed-top">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="#">Offcanvas navbar</a>
+    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
+      <div class="offcanvas-header">
+        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
+        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      </div>
+      <div class="offcanvas-body">
+        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="#">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#">Link</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Dropdown
+            </a>
+            <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li>
+                <hr class="dropdown-divider">
+              </li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
+          </li>
+        </ul>
+        <form class="d-flex">
+          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
+          <button class="btn btn-outline-success" type="submit">Search</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</nav>
+{{< /example >}}
+
+To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `lg`, use `.navbar-expand-lg`.
+
+```html
+<nav class="navbar navbar-light navbar-expand-lg bg-light fixed-top">
+  <a class="navbar-brand" href="#">Offcanvas navbar</a>
+  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
+    ...
+  </div>
+</nav>
+```
+
 ## Sass
 
 ### Variables
diff --git a/site/content/docs/5.0/components/navs-tabs.md b/site/content/docs/5.1/components/navs-tabs.md
index f1253768f..043a04f5b 100644
--- a/site/content/docs/5.0/components/navs-tabs.md
+++ b/site/content/docs/5.1/components/navs-tabs.md
@@ -3,7 +3,7 @@ layout: docs
 title: Navs and tabs
 description: Documentation and examples for how to use Bootstrap's included navigation components.
 group: components
-aliases: "/docs/5.0/components/navs/"
+aliases: "/docs/5.1/components/navs/"
 toc: true
 ---
 
@@ -332,13 +332,13 @@ Note that dynamic tabbed interfaces should <em>not</em> contain dropdown menus,
   </ul>
   <div class="tab-content" id="myTabContent">
     <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
-      <p>Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p>
+      <p><strong>This is some placeholder content the Home tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
     </div>
     <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
-      <p>Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p>
+      <p><strong>This is some placeholder content the Profile tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
     </div>
     <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
-      <p>Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</p>
+      <p><strong>This is some placeholder content the Contact tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
     </div>
   </div>
 </div>
@@ -374,13 +374,13 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
   </nav>
   <div class="tab-content" id="nav-tabContent">
     <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
-      <p>Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p>
+      <p><strong>This is some placeholder content the Home tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
     </div>
     <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
-      <p>Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p>
+      <p><strong>This is some placeholder content the Profile tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
     </div>
     <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
-      <p>Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</p>
+      <p><strong>This is some placeholder content the Contact tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
     </div>
   </div>
 </div>
@@ -416,13 +416,13 @@ The tabs plugin also works with pills.
   </ul>
   <div class="tab-content" id="pills-tabContent">
     <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
-      <p>Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p>
+      <p><strong>This is some placeholder content the Home tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
     </div>
     <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
-      <p>Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p>
+      <p><strong>This is some placeholder content the Profile tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
     </div>
     <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
-      <p>Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</p>
+      <p><strong>This is some placeholder content the Contact tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
     </div>
   </div>
 </div>
@@ -458,16 +458,16 @@ And with vertical pills.
     </div>
     <div class="tab-content" id="v-pills-tabContent">
       <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
-        <p>Placeholder content for the tab panel. This one relates to the home tab. Saw you downtown singing the Blues. Watch you circle the drain. Why don't you let me stop by? Heavy is the head that wears the crown. Yes, we make angels cry, raining down on earth from up above. Wanna see the show in 3D, a movie. Do you ever feel, feel so paper thin. It’s a yes or no, no maybe.</p>
+      <p><strong>This is some placeholder content the Home tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
       </div>
       <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
-        <p>Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p>
+      <p><strong>This is some placeholder content the Profile tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
       </div>
       <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
-        <p>Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p>
+      <p><strong>This is some placeholder content the Messages tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
       </div>
       <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
-        <p>Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</p>
+      <p><strong>This is some placeholder content the Settings tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
       </div>
     </div>
   </div>
@@ -507,7 +507,7 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
     <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
   </li>
   <li class="nav-item" role="presentation">
-    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" hdata-bs-targetref="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
+    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
   </li>
 </ul>
 
@@ -525,7 +525,7 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
 Enable tabbable tabs via JavaScript (each tab needs to be activated individually):
 
 ```js
-var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
+var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
 triggerTabList.forEach(function (triggerEl) {
   var tabTrigger = new bootstrap.Tab(triggerEl)
 
@@ -539,10 +539,10 @@ triggerTabList.forEach(function (triggerEl) {
 You can activate individual tabs in several ways:
 
 ```js
-var triggerEl = document.querySelector('#myTab a[href="#profile"]')
+var triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
 bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
 
-var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
+var triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
 bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
 ```
 
@@ -593,7 +593,7 @@ Activates a tab element and content container. Tab should have either a `data-bs
 </div>
 
 <script>
-  var firstTabEl = document.querySelector('#myTab li:last-child a')
+  var firstTabEl = document.querySelector('#myTab li:last-child button')
   var firstTab = new bootstrap.Tab(firstTabEl)
 
   firstTab.show()
@@ -624,6 +624,15 @@ var triggerEl = document.querySelector('#trigger')
 var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
 ```
 
+#### getOrCreateInstance
+
+*Static* method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn't initialised
+
+```js
+var triggerEl = document.querySelector('#trigger')
+var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
+```
+
 ### Events
 
 When showing a new tab, the events fire in the following order:
diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.1/components/offcanvas.md
new file mode 100644
index 000000000..c28e005e6
--- /dev/null
+++ b/site/content/docs/5.1/components/offcanvas.md
@@ -0,0 +1,275 @@
+---
+layout: docs
+title: Offcanvas
+description: Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.
+group: components
+toc: true
+---
+
+## How it works
+
+Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.
+
+- Offcanvas shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they are separate plugins.
+- Similarly, some [source Sass](#sass) variables for offcanvas's styles and dimensions are inherited from the modal's variables.
+- When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas.
+- Similar to modals, only one offcanvas can be shown at a time.
+
+**Heads up!** Given how CSS handles animations, you cannot use `margin` or `translate` on an `.offcanvas` element. Instead, use the class as an independent wrapping element.
+
+{{< callout info >}}
+{{< partial "callout-info-prefersreducedmotion.md" >}}
+{{< /callout >}}
+
+## Examples
+
+### Offcanvas components
+
+Below is an offcanvas example that is shown by default (via `.show` on `.offcanvas`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.
+
+{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}}
+<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
+    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body">
+    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
+  </div>
+</div>
+{{< /example >}}
+
+### Live demo
+
+Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the `.show` class on an element with the `.offcanvas` class.
+
+- `.offcanvas` hides content (default)
+- `.offcanvas.show` shows content
+
+You can use a link with the `href` attribute, or a button with the `data-bs-target` attribute. In both cases, the `data-bs-toggle="offcanvas"` is required.
+
+{{< example >}}
+<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
+  Link with href
+</a>
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
+  Button with data-bs-target
+</button>
+
+<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
+    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body">
+    <div class="">
+      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
+    </div>
+    <div class="dropdown mt-3">
+      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
+        Dropdown button
+      </button>
+      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+        <li><a class="dropdown-item" href="#">Action</a></li>
+        <li><a class="dropdown-item" href="#">Another action</a></li>
+        <li><a class="dropdown-item" href="#">Something else here</a></li>
+      </ul>
+    </div>
+  </div>
+</div>
+{{< /example >}}
+
+## Placement
+
+There's no default placement for offcanvas components, so you must add one of the modifier classes below;
+
+- `.offcanvas-start` places offcanvas on the left of the viewport (shown above)
+- `.offcanvas-end` places offcanvas on the right of the viewport
+- `.offcanvas-top` places offcanvas on the top of the viewport
+- `.offcanvas-bottom` places offcanvas on the bottom of the viewport
+
+Try the top, right, and bottom examples out below.
+
+{{< example >}}
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>
+
+<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
+  <div class="offcanvas-header">
+    <h5 id="offcanvasTopLabel">Offcanvas top</h5>
+    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body">
+    ...
+  </div>
+</div>
+{{< /example >}}
+
+{{< example >}}
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>
+
+<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
+  <div class="offcanvas-header">
+    <h5 id="offcanvasRightLabel">Offcanvas right</h5>
+    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body">
+    ...
+  </div>
+</div>
+{{< /example >}}
+
+{{< example >}}
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
+
+<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
+    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body small">
+    ...
+  </div>
+</div>
+{{< /example >}}
+
+## Backdrop
+
+Scrolling the `<body>` element is disabled when an offcanvas and its backdrop are visible. Use the `data-bs-scroll` attribute to toggle `<body>` scrolling and `data-bs-backdrop` to toggle the backdrop.
+
+{{< example >}}
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
+<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>
+
+<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
+    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body">
+    <p>Try scrolling the rest of the page to see this option in action.</p>
+  </div>
+</div>
+<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
+    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body">
+    <p>.....</p>
+  </div>
+</div>
+<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
+  <div class="offcanvas-header">
+    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
+    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+  </div>
+  <div class="offcanvas-body">
+    <p>Try scrolling the rest of the page to see this option in action.</p>
+  </div>
+</div>
+{{< /example >}}
+
+## Accessibility
+
+Since the offcanvas panel is conceptually a modal dialog, be sure to add `aria-labelledby="..."`—referencing the offcanvas title—to `.offcanvas`. Note that you don’t need to add `role="dialog"` since we already add it via JavaScript.
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="offcanvas-variables" file="scss/_variables.scss" >}}
+
+## Usage
+
+The offcanvas plugin utilizes a few classes and attributes to handle the heavy lifting:
+
+- `.offcanvas` hides the content
+- `.offcanvas.show` shows the content
+- `.offcanvas-start` hides the offcanvas on the left
+- `.offcanvas-end` hides the offcanvas on the right
+- `.offcanvas-bottom` hides the offcanvas on the bottom
+
+Add a dismiss button with the `data-bs-dismiss="offcanvas"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices.
+
+### Via data attributes
+
+#### Toggle
+
+Add `data-bs-toggle="offcanvas"` and a `data-bs-target` or `href` to the element to automatically assign control of one offcanvas element. The `data-bs-target` attribute accepts a CSS selector to apply the offcanvas to. Be sure to add the class `offcanvas` to the offcanvas element. If you'd like it to default open, add the additional class `show`.
+
+#### Dismiss
+
+{{% js-dismiss "offcanvas" %}}
+
+{{< callout warning >}}
+While both ways to dismiss an offcanvas are supported, keep in mind that dismissing from outside an offcanvas does not match [the WAI-ARIA modal dialog design pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). Do this at your own risk.
+{{< /callout >}}
+
+### Via JavaScript
+
+Enable manually with:
+
+```js
+var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
+var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
+  return new bootstrap.Offcanvas(offcanvasEl)
+})
+```
+
+### Options
+
+Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-backdrop=""`.
+
+{{< bs-table "table" >}}
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `backdrop` | boolean | `true` | Apply a backdrop on body while offcanvas is open |
+| `keyboard` | boolean | `true` | Closes the offcanvas when escape key is pressed |
+| `scroll` | boolean | `false` | Allow body scrolling while offcanvas is open |
+{{< /bs-table >}}
+
+### Methods
+
+{{< callout danger >}}
+{{< partial "callout-danger-async-methods.md" >}}
+{{< /callout >}}
+
+Activates your content as an offcanvas element. Accepts an optional options `object`.
+
+You can create an offcanvas instance with the constructor, for example:
+
+```js
+var myOffcanvas = document.getElementById('myOffcanvas')
+var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
+```
+
+{{< bs-table "table" >}}
+| Method | Description |
+| --- | --- |
+| `toggle` | Toggles an offcanvas element to shown or hidden. **Returns to the caller before the offcanvas element has actually been shown or hidden** (i.e. before the `shown.bs.offcanvas` or `hidden.bs.offcanvas` event occurs). |
+| `show` | Shows an offcanvas element. **Returns to the caller before the offcanvas element has actually been shown** (i.e. before the `shown.bs.offcanvas` event occurs).|
+| `hide` | Hides an offcanvas element. **Returns to the caller before the offcanvas element has actually been hidden** (i.e. before the `hidden.bs.offcanvas` event occurs).|
+| `getInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element |
+| `getOrCreateInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn't initialised |
+{{< /bs-table >}}
+
+### Events
+
+Bootstrap's offcanvas class exposes a few events for hooking into offcanvas functionality.
+
+{{< bs-table "table" >}}
+| Event type | Description |
+| --- | --- |
+| `show.bs.offcanvas` | This event fires immediately when the `show` instance method is called. |
+| `shown.bs.offcanvas` | This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete). |
+| `hide.bs.offcanvas` | This event is fired immediately when the `hide` method has been called. |
+| `hidden.bs.offcanvas` | This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete). |
+{{< /bs-table >}}
+
+```js
+var myOffcanvas = document.getElementById('myOffcanvas')
+myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
+  // do something...
+})
+```
diff --git a/site/content/docs/5.0/components/pagination.md b/site/content/docs/5.1/components/pagination.md
index 6b7c7a3da..6b7c7a3da 100644
--- a/site/content/docs/5.0/components/pagination.md
+++ b/site/content/docs/5.1/components/pagination.md
diff --git a/site/content/docs/5.1/components/placeholders.md b/site/content/docs/5.1/components/placeholders.md
new file mode 100644
index 000000000..41313a70f
--- /dev/null
+++ b/site/content/docs/5.1/components/placeholders.md
@@ -0,0 +1,144 @@
+---
+layout: docs
+title: Placeholders
+description: Use loading placeholders for your components or pages to indicate something may still be loading.
+group: components
+toc: true
+---
+
+## About
+
+Placeholders can be used to enhance the experience of your application. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, color, and sizing can be easily customized with our utility classes.
+
+## Example
+
+In the example below, we take a typical card component and recreate it with placeholders applied to create a "loading card". Size and proportions are the same between the two.
+
+<div class="bd-example bd-example-placeholder-cards d-flex justify-content-around">
+<div class="card">
+  {{< placeholder width="100%" height="180" class="card-img-top" text="false" background="#20c997" >}}
+  <div class="card-body">
+    <h5 class="card-title">Card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+</div>
+
+<div class="card" aria-hidden="true">
+  {{< placeholder width="100%" height="180" class="card-img-top" text="false" >}}
+  <div class="card-body">
+    <div class="h5 card-title placeholder-glow">
+      <span class="placeholder col-6"></span>
+    </div>
+    <p class="card-text placeholder-glow">
+      <span class="placeholder col-7"></span>
+      <span class="placeholder col-4"></span>
+      <span class="placeholder col-4"></span>
+      <span class="placeholder col-6"></span>
+      <span class="placeholder col-8"></span>
+    </p>
+    <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
+  </div>
+</div>
+</div>
+
+```html
+<div class="card">
+  <img src="..." class="card-img-top" alt="...">
+
+  <div class="card-body">
+    <h5 class="card-title">Card title</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    <a href="#" class="btn btn-primary">Go somewhere</a>
+  </div>
+</div>
+
+<div class="card" aria-hidden="true">
+  <img src="..." class="card-img-top" alt="...">
+  <div class="card-body">
+    <h5 class="card-title placeholder-glow">
+      <span class="placeholder col-6"></span>
+    </h5>
+    <p class="card-text placeholder-glow">
+      <span class="placeholder col-7"></span>
+      <span class="placeholder col-4"></span>
+      <span class="placeholder col-4"></span>
+      <span class="placeholder col-6"></span>
+      <span class="placeholder col-8"></span>
+    </p>
+    <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
+  </div>
+</div>
+```
+
+## How it works
+
+Create placeholders with the `.placeholder` class and a grid column class (e.g., `.col-6`) to set the `width`. They can replace the text inside an element or as be added as a modifier class to an existing component.
+
+We apply additional styling to `.btn`s via `::before` to ensure the `height` is respected. You may extend this pattern for other situations as needed, or add a `&nbsp;` within the element to reflect the height when actual text is rendered in its place.
+
+{{< example >}}
+<p aria-hidden="true">
+  <span class="placeholder col-6"></span>
+</p>
+
+<a href="#" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>
+{{< /example >}}
+
+{{< callout info >}}
+The use of `aria-hidden="true"` only indicates that the element should be hidden to screen readers. The *loading* behaviour of the placeholder depends on how authors will actually use the placeholder styles, how they plan to update things, etc. Some JavasSript code may be needed to *swap* the state of the placeholder and inform AT users of the update.
+{{< /callout >}}
+
+### Width
+
+You can change the `width` through grid column classes, width utilities, or inline styles.
+
+{{< example >}}
+<span class="placeholder col-6"></span>
+<span class="placeholder w-75"></span>
+<span class="placeholder" style="width: 25%;"></span>
+{{< /example >}}
+
+### Color
+
+By default, the `placeholder` uses `currentColor`. This can be overriden with a custom color or utility class.
+
+{{< example >}}
+<span class="placeholder col-12"></span>
+{{< placeholders.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<span class="placeholder col-12 bg-{{ .name }}"></span>
+{{- end -}}
+{{< /placeholders.inline >}}
+{{< /example >}}
+
+### Sizing
+
+The size of `.placeholder`s are based on the typographic style of the parent element. Customize them with sizing modifiers: `.placeholder-lg`, `.placeholder-sm`, or `.placeholder-xs`.
+
+{{< example >}}
+<span class="placeholder col-12 placeholder-lg"></span>
+<span class="placeholder col-12"></span>
+<span class="placeholder col-12 placeholder-sm"></span>
+<span class="placeholder col-12 placeholder-xs"></span>
+{{< /example >}}
+
+### Animation
+
+Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being _actively_ loaded.
+
+{{< example >}}
+<p class="placeholder-glow">
+  <span class="placeholder col-12"></span>
+</p>
+
+<p class="placeholder-wave">
+  <span class="placeholder col-12"></span>
+</p>
+{{< /example >}}
+
+## Sass
+
+### Variables
+
+{{< scss-docs name="placeholders" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/components/popovers.md b/site/content/docs/5.1/components/popovers.md
index 9506fa8f7..06aa656d9 100644
--- a/site/content/docs/5.0/components/popovers.md
+++ b/site/content/docs/5.1/components/popovers.md
@@ -136,7 +136,7 @@ Additionally, while it is possible to also include interactive controls (such as
 
 ### Options
 
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing via data attributes. For example: instead of using `data-bs-customClass="beautifier"`, use `data-bs-custom-class="beautifier"`.
+Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using `data-bs-customClass="beautifier"`, use `data-bs-custom-class="beautifier"`.
 
 {{< callout warning >}}
 Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
@@ -244,7 +244,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
       <td><code>boundary</code></td>
       <td>string | element</td>
       <td><code>'clippingParents'</code></td>
-      <td>Overflow constraint boundary of the popover. By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">preventOverflow docs</a>.</td>
+      <td>Overflow constraint boundary of the popover (applies only to Popper's preventOverflow modifier). By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">detectOverflow docs</a>.</td>
     </tr>
     <tr>
       <td><code>customClass</code></td>
@@ -393,6 +393,15 @@ var exampleTriggerEl = document.getElementById('example')
 var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
 ```
 
+#### getOrCreateInstance
+
+*Static* method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn't initialised
+
+```js
+var exampleTriggerEl = document.getElementById('example')
+var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance
+```
+
 ### Events
 
 <table class="table">
diff --git a/site/content/docs/5.0/components/progress.md b/site/content/docs/5.1/components/progress.md
index 1b59dc97a..1b59dc97a 100644
--- a/site/content/docs/5.0/components/progress.md
+++ b/site/content/docs/5.1/components/progress.md
diff --git a/site/content/docs/5.0/components/scrollspy.md b/site/content/docs/5.1/components/scrollspy.md
index 3904990af..580a1e2d5 100644
--- a/site/content/docs/5.0/components/scrollspy.md
+++ b/site/content/docs/5.1/components/scrollspy.md
@@ -31,34 +31,33 @@ Scroll the area below the navbar and watch the active class change. The dropdown
     <a class="navbar-brand" href="#">Navbar</a>
     <ul class="nav nav-pills">
       <li class="nav-item">
-        <a class="nav-link" href="#fat">@fat</a>
+        <a class="nav-link" href="#scrollspyHeading1">First</a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" href="#mdo">@mdo</a>
+        <a class="nav-link" href="#scrollspyHeading2">Second</a>
       </li>
       <li class="nav-item dropdown">
         <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
         <ul class="dropdown-menu">
-          <li><a class="dropdown-item" href="#one">one</a></li>
-          <li><a class="dropdown-item" href="#two">two</a></li>
+          <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
+          <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
           <li><hr class="dropdown-divider"></li>
-          <li><a class="dropdown-item" href="#three">three</a></li>
+          <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
         </ul>
       </li>
     </ul>
   </nav>
   <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
-    <h4 id="fat">@fat</h4>
-    <p>Placeholder content for the scrollspy example. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p>
-    <h4 id="mdo">@mdo</h4>
-    <p>Placeholder content for the scrollspy example. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk.</p>
-    <h4 id="one">one</h4>
-    <p>Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p>
-    <h4 id="two">two</h4>
-    <p>Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.</p>
-    <h4 id="three">three</h4>
-    <p>Placeholder content for the scrollspy example. If you wanna dance, if you want it all, you know that I'm the girl that you should call. Walk through the storm I would. So let me get you in your birthday suit. The one that got away. Last Friday night, yeah I think we broke the law, always say we're gonna stop. 'Cause she's a little bit of Yoko, And she's a little bit of 'Oh no'. I want the jaw droppin', eye poppin', head turnin', body shockin'. Yeah, we maxed our credit cards and got kicked out of the bar.</p>
-    <p>And some more placeholder content, for good measure.</p>
+    <h4 id="scrollspyHeading1">First heading</h4>
+    <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+    <h4 id="scrollspyHeading2">Second heading</h4>
+    <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+    <h4 id="scrollspyHeading3">Third heading</h4>
+    <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+    <h4 id="scrollspyHeading4">Fourth heading</h4>
+    <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+    <h4 id="scrollspyHeading5">Fifth heading</h4>
+    <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
   </div>
 </div>
 
@@ -67,32 +66,32 @@ Scroll the area below the navbar and watch the active class change. The dropdown
   <a class="navbar-brand" href="#">Navbar</a>
   <ul class="nav nav-pills">
     <li class="nav-item">
-      <a class="nav-link" href="#fat">@fat</a>
+      <a class="nav-link" href="#scrollspyHeading1">First</a>
     </li>
     <li class="nav-item">
-      <a class="nav-link" href="#mdo">@mdo</a>
+      <a class="nav-link" href="#scrollspyHeading2">Second</a>
     </li>
     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
-      <ul class="dropdown-menu dropdown-menu-end">
-        <li><a class="dropdown-item" href="#one">one</a></li>
-        <li><a class="dropdown-item" href="#two">two</a></li>
+      <ul class="dropdown-menu">
+        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
+        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
         <li><hr class="dropdown-divider"></li>
-        <li><a class="dropdown-item" href="#three">three</a></li>
+        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
       </ul>
     </li>
   </ul>
 </nav>
-<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
-  <h4 id="fat">@fat</h4>
+<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
+  <h4 id="scrollspyHeading1">First heading</h4>
   <p>...</p>
-  <h4 id="mdo">@mdo</h4>
+  <h4 id="scrollspyHeading2">Second heading</h4>
   <p>...</p>
-  <h4 id="one">one</h4>
+  <h4 id="scrollspyHeading3">Third heading</h4>
   <p>...</p>
-  <h4 id="two">two</h4>
+  <h4 id="scrollspyHeading4">Fourth heading</h4>
   <p>...</p>
-  <h4 id="three">three</h4>
+  <h4 id="scrollspyHeading5">Fifth heading</h4>
   <p>...</p>
 </div>
 ```
@@ -104,7 +103,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
 <div class="bd-example">
   <div class="row">
     <div class="col-4">
-      <nav id="navbar-example3" class="navbar navbar-light bg-light flex-column">
+      <nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
         <a class="navbar-brand" href="#">Navbar</a>
         <nav class="nav nav-pills flex-column">
           <a class="nav-link" href="#item-1">Item 1</a>
@@ -124,26 +123,26 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
     <div class="col-8">
       <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" class="scrollspy-example-2" tabindex="0">
         <h4 id="item-1">Item 1</h4>
-        <p>Placeholder content for the scrollspy example. This one relates to item 1. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p>
+        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
         <h5 id="item-1-1">Item 1-1</h5>
-        <p>Placeholder content for the scrollspy example. This one relates to the item 1-1. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p>
+        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
         <h5 id="item-1-2">Item 1-2</h5>
-        <p>Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</p>
+        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
         <h4 id="item-2">Item 2</h4>
-        <p>Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.</p>
+        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
         <h4 id="item-3">Item 3</h4>
-        <p>Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.</p>
+        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
         <h5 id="item-3-1">Item 3-1</h5>
-        <p>Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.</p>
+        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
         <h5 id="item-3-2">Item 3-2</h5>
-        <p>Placeholder content for the scrollspy example. This one relates to item 3-2. You're original, cannot be replaced. All night they're playing, your song. California girls we're undeniable. Like a bird without a cage. There is no fear now, let go and just be free, I will love you unconditionally. I can see the writing on the wall. You could travel the world but nothing comes close to the golden coast.</p>
+        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
       </div>
     </div>
   </div>
 </div>
 
 ```html
-<nav id="navbar-example3" class="navbar navbar-light bg-light">
+<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
   <a class="navbar-brand" href="#">Navbar</a>
   <nav class="nav nav-pills flex-column">
     <a class="nav-link" href="#item-1">Item 1</a>
@@ -195,13 +194,13 @@ Scrollspy also works with `.list-group`s. Scroll the area next to the list group
     <div class="col-8">
       <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
         <h4 id="list-item-1">Item 1</h4>
-        <p>Placeholder content for the scrollspy list-group example. This one relates to item 1. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. Thought that I was the exception.</p>
+        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
         <h4 id="list-item-2">Item 2</h4>
-        <p>Placeholder content for the scrollspy list-group example. This one relates to item 2. Yeah, she dances to her own beat. Oh, no. You could've been the greatest. 'Cause, baby, you're a firework. Maybe a reason why all the doors are closed. Open up your heart and just let it begin. So très chic, yeah, she's a classic.</p>
+        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
         <h4 id="list-item-3">Item 3</h4>
-        <p>Placeholder content for the scrollspy list-group example. This one relates to item 3. We go higher and higher. Never one without the other, we made a pact. I'm walking on air. Someone said you had your tattoo removed. Now I’m floating like a butterfly. Tone, tan fit and ready, turn it up cause its gettin' heavy. Cause once you’re mine, once you’re mine. You just gotta ignite the light and let it shine! So we hit the boulevard. Do you ever feel, feel so paper thin. I see it all, I see it now.</p>
+        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
         <h4 id="list-item-4">Item 4</h4>
-        <p>Placeholder content for the scrollspy list-group example. This one relates to item 4. Summer after high school when we first met. There is no fear now, let go and just be free, I will love you unconditionally. Sun-kissed skin so hot we'll melt your popsicle. This love will make you levitate.</p>
+        <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
       </div>
     </div>
   </div>
@@ -299,6 +298,15 @@ var scrollSpyContentEl = document.getElementById('content')
 var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
 ```
 
+#### getOrCreateInstance
+
+*Static* method which allows you to get the scrollspy instance associated with a DOM element, or create a new one in case it wasn't initialised
+
+```js
+var scrollSpyContentEl = document.getElementById('content')
+var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
+```
+
 ### Options
 
 Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`.
diff --git a/site/content/docs/5.0/components/spinners.md b/site/content/docs/5.1/components/spinners.md
index 37908f5b6..ef7efaf58 100644
--- a/site/content/docs/5.0/components/spinners.md
+++ b/site/content/docs/5.1/components/spinners.md
@@ -192,4 +192,4 @@ Used for creating the CSS animations for our spinners. Included in `scss/_spinne
 [float]:   {{< docsref "/utilities/float" >}}
 [margin]:  {{< docsref "/utilities/spacing" >}}
 [sizing]:  {{< docsref "/utilities/sizing" >}}
-[text]:    {{< docsref "/content/typography" >}}
+[text]:    {{< docsref "/utilities/text" >}}
diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.1/components/toasts.md
index 57bcd319b..d17d8b3df 100644
--- a/site/content/docs/5.0/components/toasts.md
+++ b/site/content/docs/5.1/components/toasts.md
@@ -41,12 +41,16 @@ Toasts are as flexible as you need and have very little required markup. At a mi
 </div>
 {{< /example >}}
 
-### Live
+{{< callout warning >}}
+Previously, our scripts dynamically added the `.hide` class to completely hide a toast (with `display:none`, rather than just with `opacity:0`). This is now not necessary anymore. However, for backwards compatibility, our script will continue to toggle the class (even though there is no practical need for it) until the next major version.
+{{< /callout >}}
+
+### Live example
 
-Click the button the below to show as toast (positioning with our utilities in the lower right corner) that has been hidden by default with `.hide`.
+Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default.
 
-<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
-  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
+<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
+  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header">
       {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
       <strong class="me-auto">Bootstrap</strong>
@@ -66,8 +70,8 @@ Click the button the below to show as toast (positioning with our utilities in t
 ```html
 <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
 
-<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
-  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
+<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
+  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
     <div class="toast-header">
       <img src="..." class="rounded me-2" alt="...">
       <strong class="me-auto">Bootstrap</strong>
@@ -81,9 +85,23 @@ Click the button the below to show as toast (positioning with our utilities in t
 </div>
 ```
 
+We use the following JavaScript to trigger our live toast demo:
+
+```js
+var toastTrigger = document.getElementById('liveToastBtn')
+var toastLiveExample = document.getElementById('liveToast')
+if (toastTrigger) {
+  toastTrigger.addEventListener('click', function () {
+    var toast = new bootstrap.Toast(toastLiveExample)
+
+    toast.show()
+  })
+}
+```
+
 ### Translucent
 
-Toasts are slightly translucent, too, so they blend over whatever they might appear over.
+Toasts are slightly translucent to blend in with what's below them.
 
 {{< example class="bg-dark" >}}
 <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
@@ -133,7 +151,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
 
 ### Custom content
 
-Customize your toasts by removing sub-components, tweaking with [utilities]({{< docsref "/utilities/api" >}}), or adding your own markup. Here we've created a simpler toast by removing the default `.toast-header`, adding a custom hide icon from [Bootstrap Icons]({{< param icons >}}), and using some [flexbox utilities]({{< docsref "/utilities/flex" >}}) to adjust the layout.
+Customize your toasts by removing sub-components, tweaking them with [utilities]({{< docsref "/utilities/api" >}}), or by adding your own markup. Here we've created a simpler toast by removing the default `.toast-header`, adding a custom hide icon from [Bootstrap Icons]({{< param icons >}}), and using some [flexbox utilities]({{< docsref "/utilities/flex" >}}) to adjust the layout.
 
 {{< example class="bg-light" >}}
 <div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
@@ -274,13 +292,13 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o
 
 ## Accessibility
 
-Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an [`aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user's focus or otherwise interrupt the user. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than announcing what was changed (which could lead to problems if you only update part of the toast's content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the [alert component]({{< docsref "/components/alerts" >}}) instead of toast.
+Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an [`aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user's focus or otherwise interrupt the user. Additionally, include `aria-atomic="true"` to ensure that the entire toast is always announced as a single (atomic) unit, rather than just announcing what was changed (which could lead to problems if you only update part of the toast's content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list of errors in a form, then use the [alert component]({{< docsref "/components/alerts" >}}) instead of toast.
 
 Note that the live region needs to be present in the markup *before* the toast is generated or updated. If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.
 
 You also need to adapt the `role` and `aria-live` level depending on the content. If it's an important message like an error, use `role="alert" aria-live="assertive"`, otherwise use `role="status" aria-live="polite"` attributes.
 
-As the content you're displaying changes, be sure to update the [`delay` timeout](#options) to ensure people have enough time to read the toast.
+As the content you're displaying changes, be sure to update the [`delay` timeout](#options) so that users have enough time to read the toast.
 
 ```html
 <div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
@@ -304,6 +322,8 @@ When using `autohide: false`, you must add a close button to allow users to dism
 </div>
 {{< /example >}}
 
+While technically it's possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for autohiding toasts. Even if you give the toast a long [`delay` timeout](#options), keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don't receive focus when they are displayed). If you absolutely must have further controls, we recommend using a toast with `autohide: false`.
+
 ## Sass
 
 ### Variables
@@ -321,6 +341,10 @@ var toastList = toastElList.map(function (toastEl) {
 })
 ```
 
+### Triggers
+
+{{% js-dismiss "toast" %}}
+
 ### Options
 
 Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`.
@@ -389,6 +413,24 @@ Hides an element's toast. Your toast will remain on the DOM but won't show anymo
 toast.dispose()
 ```
 
+#### getInstance
+
+*Static* method which allows you to get the toast instance associated with a DOM element
+
+```js
+var myToastEl = document.getElementById('myToastEl')
+var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
+```
+
+#### getOrCreateInstance
+
+*Static* method which allows you to get the toast instance associated with a DOM element, or create a new one in case it wasn't initialised
+
+```js
+var myToastEl = document.getElementById('myToastEl')
+var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance
+```
+
 ### Events
 
 <table class="table">
diff --git a/site/content/docs/5.0/components/tooltips.md b/site/content/docs/5.1/components/tooltips.md
index 6c3577f3c..59d2480d4 100644
--- a/site/content/docs/5.0/components/tooltips.md
+++ b/site/content/docs/5.1/components/tooltips.md
@@ -88,7 +88,7 @@ And with custom HTML added:
 With an SVG:
 
 <div class="bd-example tooltip-demo">
-  <a href="#" data-bs-toggle="tooltip" title="Default tooltip">
+  <a href="#" class="d-inline-block" data-bs-toggle="tooltip" title="Default tooltip">
     <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 100 100">
       <rect width="100%" height="100%" fill="#563d7c"/>
       <circle cx="50" cy="50" r="30" fill="#007bff"/>
@@ -116,12 +116,12 @@ var tooltip = new bootstrap.Tooltip(exampleEl, options)
 {{< callout warning >}}
 ##### Overflow `auto` and `scroll`
 
-Tooltip position attempts to automatically change when a parent container has `overflow: auto` or `overflow: scroll` like our `.table-responsive`, but still keeps the original placement's positioning. To resolve, set the `boundary` option to anything other than default value, `'scrollParent'`, such as `'window'`:
+Tooltip position attempts to automatically change when a **parent container** has `overflow: auto` or `overflow: scroll` like our `.table-responsive`, but still keeps the original placement's positioning. To resolve this, set the [`boundary` option](https://popper.js.org/docs/v2/modifiers/flip/#boundary) (for the flip modifier using the `popperConfig` option) to any HTMLElement to override the default value, `'clippingParents'`, such as `document.body`:
 
 ```js
 var exampleEl = document.getElementById('example')
 var tooltip = new bootstrap.Tooltip(exampleEl, {
-  boundary: 'window'
+  boundary: document.body // or document.querySelector('#boundary')
 })
 ```
 {{< /callout >}}
@@ -163,7 +163,7 @@ Elements with the `disabled` attribute aren't interactive, meaning users cannot
 
 ### Options
 
-Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing via data attributes. For example: instead of using `data-bs-customClass="beautifier"`, use `data-bs-custom-class="beautifier"`.
+Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`. Make sure to change the case type of the option name from camelCase to kebab-case when passing the options via data attributes. For example, instead of using `data-bs-customClass="beautifier"`, use `data-bs-custom-class="beautifier"`.
 
 {{< callout warning >}}
 Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` options cannot be supplied using data attributes.
@@ -254,7 +254,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
       <td><code>'hover focus'</code></td>
       <td>
         <p>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</p>
-        <p><code>'manual'</code> indicates that the tooltip will be triggered programmatically via the <code>.tooltip('show')</code>, <code>.tooltip('hide')</code> and <code>.tooltip('toggle')</code> methods; this value cannot be combined with any other trigger.</p>
+        <p><code>'manual'</code> indicates that the tooltip will be triggered programmatically via the <code>.show()</code>, <code>.hide()</code> and <code>.toggle()</code> methods; this value cannot be combined with any other trigger.</p>
         <p><code>'hover'</code> on its own will result in tooltips that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present.</p>
       </td>
     </tr>
@@ -269,7 +269,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
       <td><code>boundary</code></td>
       <td>string | element</td>
       <td><code>'clippingParents'</code></td>
-      <td>Overflow constraint boundary of the tooltip. By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">preventOverflow docs</a>.</td>
+      <td>Overflow constraint boundary of the tooltip (applies only to Popper's preventOverflow modifier). By default it's <code>'clippingParents'</code> and can accept an HTMLElement reference (via JavaScript only). For more information refer to Popper's <a href="https://popper.js.org/docs/v2/utils/detect-overflow/#boundary">detectOverflow docs</a>.</td>
     </tr>
     <tr>
       <td><code>customClass</code></td>
@@ -417,6 +417,15 @@ var exampleTriggerEl = document.getElementById('example')
 var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
 ```
 
+#### getOrCreateInstance
+
+*Static* method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn't initialised
+
+```js
+var exampleTriggerEl = document.getElementById('example')
+var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
+```
+
 ### Events
 
 <table class="table">
diff --git a/site/content/docs/5.0/content/figures.md b/site/content/docs/5.1/content/figures.md
index 29a38d723..29a38d723 100644
--- a/site/content/docs/5.0/content/figures.md
+++ b/site/content/docs/5.1/content/figures.md
diff --git a/site/content/docs/5.0/content/images.md b/site/content/docs/5.1/content/images.md
index f1012efbf..f1012efbf 100644
--- a/site/content/docs/5.0/content/images.md
+++ b/site/content/docs/5.1/content/images.md
diff --git a/site/content/docs/5.0/content/reboot.md b/site/content/docs/5.1/content/reboot.md
index 6529e5ef2..73286c21e 100644
--- a/site/content/docs/5.0/content/reboot.md
+++ b/site/content/docs/5.1/content/reboot.md
@@ -3,7 +3,7 @@ layout: docs
 title: Reboot
 description: Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.
 group: content
-aliases: "/docs/5.0/content/"
+aliases: "/docs/5.1/content/"
 toc: true
 ---
 
@@ -37,8 +37,6 @@ $font-family-sans-serif:
   system-ui,
   // Safari for macOS and iOS (San Francisco)
   -apple-system,
-  // Chrome < 56 for macOS (San Francisco)
-  BlinkMacSystemFont,
   // Windows
   "Segoe UI",
   // Android
@@ -58,6 +56,26 @@ Note that because the font stack includes emoji fonts, many common symbol/dingba
 
 This `font-family` is applied to the `<body>` and automatically inherited globally throughout Bootstrap. To switch the global `font-family`, update `$font-family-base` and recompile Bootstrap.
 
+## CSS variables
+
+As Bootstrap 5 continues to mature, more and more styles will be built with [CSS variables]({{< docsref "/customize/css-variables" >}}) as a means to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don't use CSS variables, you still have all the power of Sass. **This is still in-progress and will take time to fully implement.**
+
+For example, consider these `:root` CSS variables for common `<body>` styles:
+
+{{< scss-docs name="root-body-variables" file="scss/_root.scss" >}}
+
+In practice, those variables are then applied in Reboot like so:
+
+{{< scss-docs name="reboot-body-rules" file="scss/_reboot.scss" >}}
+
+Which allows you to make real-time customizations however you like:
+
+```html
+<body style="--bs-body-color: #333;">
+  <!-- ... -->
+</body>
+```
+
 ## Headings and paragraphs
 
 All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing.
diff --git a/site/content/docs/5.0/content/tables.md b/site/content/docs/5.1/content/tables.md
index 3681e186a..7ec00201b 100644
--- a/site/content/docs/5.0/content/tables.md
+++ b/site/content/docs/5.1/content/tables.md
@@ -290,31 +290,29 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells
 </div>
 
 ```html
-<table class="table table-sm table-dark">
-  <div class="table-responsive">
-    <table class="table align-middle">
-      <thead>
-        <tr>
-          ...
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          ...
-        </tr>
-        <tr class="align-bottom">
-          ...
-        </tr>
-        <tr>
-          <td>...</td>
-          <td>...</td>
-          <td class="align-top">This cell is aligned to the top.</td>
-          <td>...</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</table>
+<div class="table-responsive">
+  <table class="table align-middle">
+    <thead>
+      <tr>
+        ...
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        ...
+      </tr>
+      <tr class="align-bottom">
+        ...
+      </tr>
+      <tr>
+        <td>...</td>
+        <td>...</td>
+        <td class="align-top">This cell is aligned to the top.</td>
+        <td>...</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 ```
 
 ## Nesting
diff --git a/site/content/docs/5.0/content/typography.md b/site/content/docs/5.1/content/typography.md
index 7d41f04de..7d41f04de 100644
--- a/site/content/docs/5.0/content/typography.md
+++ b/site/content/docs/5.1/content/typography.md
diff --git a/site/content/docs/5.0/customize/color.md b/site/content/docs/5.1/customize/color.md
index 7d1615589..63e5d19e6 100644
--- a/site/content/docs/5.0/customize/color.md
+++ b/site/content/docs/5.1/customize/color.md
@@ -106,3 +106,45 @@ Here's how you can use these in your Sass:
 ```
 
 [Color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utility classes are also available for setting `color` and `background-color` using the `500` color values.
+
+## Generating utilities
+
+<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.1.0</small>
+
+Bootstrap doesn't include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]({{< docsref "/utilities/api" >}}) and our extended Sass maps added in v5.1.0.
+
+1. To start, make sure you've imported our functions, variables, mixins, and utilities.
+2. Use our `map-merge-multiple()` function to quickly merge multiple Sass maps together in a new map.
+3. Merge this new combined map to extend any utility with a `{color}-{level}` class name.
+
+Here's an example that generates text color utilities (e.g., `.text-purple-500`) using the above steps.
+
+```scss
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+
+$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "color": map-merge(
+      map-get($utilities, "color"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "color"), "values"),
+          (
+            $all-colors
+          ),
+        ),
+      ),
+    ),
+  )
+);
+
+@import "bootstrap/scss/utilities/api";
+```
+
+This will generate new `.text-{color}-{level}` utilities for every color and level. You can do the same for any other utility and property as well.
diff --git a/site/content/docs/5.0/customize/components.md b/site/content/docs/5.1/customize/components.md
index b512a9036..b512a9036 100644
--- a/site/content/docs/5.0/customize/components.md
+++ b/site/content/docs/5.1/customize/components.md
diff --git a/site/content/docs/5.0/customize/css-variables.md b/site/content/docs/5.1/customize/css-variables.md
index a2d0f33b7..079f9ad23 100644
--- a/site/content/docs/5.0/customize/css-variables.md
+++ b/site/content/docs/5.1/customize/css-variables.md
@@ -6,7 +6,7 @@ group: customize
 toc: true
 ---
 
-Bootstrap includes around two dozen [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) in its compiled CSS, with dozens more on the way for improved customization on a per-component basis. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser's inspector, a code sandbox, or general prototyping.
+Bootstrap includes many [CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) in its compiled CSS for real-time customization without the need to recompile Sass. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser's inspector, a code sandbox, or general prototyping.
 
 **All our custom properties are prefixed with `bs-`** to avoid conflicts with third party CSS.
 
@@ -48,3 +48,7 @@ a {
   color: var(--bs-blue);
 }
 ```
+
+## Grid breakpoints
+
+While we include our grid breakpoints as CSS variables (except for `xs`), be aware that **CSS variables do not work in media queries**. This is by design in the CSS spec for variables, but may change in coming years with support for `env()` variables. Check out [this Stack Overflow answer](https://stackoverflow.com/a/47212942) for some helpful links. In the mean time, you can use these variables in other CSS situations, as well as in your JavaScript.
diff --git a/site/content/docs/5.0/customize/optimize.md b/site/content/docs/5.1/customize/optimize.md
index 6763d95c5..29b152154 100644
--- a/site/content/docs/5.0/customize/optimize.md
+++ b/site/content/docs/5.1/customize/optimize.md
@@ -30,6 +30,7 @@ For instance, assuming you're using your own JavaScript bundler like Webpack or
 // import 'bootstrap/js/dist/collapse';
 // import 'bootstrap/js/dist/dropdown';
 import 'bootstrap/js/dist/modal';
+// import 'bootstrap/js/dist/offcanvas';
 // import 'bootstrap/js/dist/popover';
 // import 'bootstrap/js/dist/scrollspy';
 // import 'bootstrap/js/dist/tab';
@@ -72,7 +73,18 @@ Whenever possible, be sure to compress all the code you serve to your visitors.
 
 ## Nonblocking files
 
-_Help wanted with this section, please consider opening a PR. Thanks!_
+While minifying and using compression might seem like enough, making your files nonblocking ones is also a big step in making your site well-optimized and fast enough.
+
+If you are using a [Lighthouse](https://developers.google.com/web/tools/lighthouse/) plugin in Google Chrome, you may have stumbled over FCP. [The First Contentful Paint](https://web.dev/fcp/) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen.
+
+You can improve FCP by deferring non-critical JavaScript or CSS. What does that mean? Simply, JavaScript or stylesheets that don't need to be present on the first paint of your page should be marked with `async` or `defer` attributes.
+
+This ensures that the less important resources are loaded later and not blocking the first paint. On the other hand, critical resources can be included as inline scripts or styles.
+
+If you want to learn more about this, there are already a lot of great articles about it:
+
+- <https://web.dev/render-blocking-resources/>
+- <https://web.dev/defer-non-critical-css/>
 
 ## Always use HTTPS
 
diff --git a/site/content/docs/5.0/customize/options.md b/site/content/docs/5.1/customize/options.md
index 0d846270b..0d846270b 100644
--- a/site/content/docs/5.0/customize/options.md
+++ b/site/content/docs/5.1/customize/options.md
diff --git a/site/content/docs/5.0/customize/overview.md b/site/content/docs/5.1/customize/overview.md
index 07431575a..03b4bff33 100644
--- a/site/content/docs/5.0/customize/overview.md
+++ b/site/content/docs/5.1/customize/overview.md
@@ -4,7 +4,7 @@ title: Customize
 description: Learn how to theme, customize, and extend Bootstrap with Sass, a boatload of global options, an expansive color system, and more.
 group: customize
 toc: false
-aliases: "/docs/5.0/customize/"
+aliases: "/docs/5.1/customize/"
 sections:
   - title: Sass
     description: Utilize our source Sass files to take advantage of variables, maps, mixins, and functions.
@@ -48,4 +48,4 @@ Several Bootstrap components include embedded SVGs in our CSS to style component
 - [Carousel controls]({{< docsref "/components/carousel#with-controls" >}})
 - [Navbar toggle buttons]({{< docsref "/components/navbar#responsive-behaviors" >}})
 
-Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include replacing the URLs with locally hosted assets, removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on a best path forward, if necessary.
+Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include replacing the URLs with locally hosted assets, removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary.
diff --git a/site/content/docs/5.0/customize/sass.md b/site/content/docs/5.1/customize/sass.md
index eda2d83fb..137f1cfd8 100644
--- a/site/content/docs/5.0/customize/sass.md
+++ b/site/content/docs/5.1/customize/sass.md
@@ -41,29 +41,40 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two
 // Custom.scss
 // Option A: Include all of Bootstrap
 
+// Include any default variable overrides here (though functions won't be available)
+
 @import "../node_modules/bootstrap/scss/bootstrap";
 
-// Add custom code after this
+// Then add additional custom code here
 ```
 
 ```scss
 // Custom.scss
 // Option B: Include parts of Bootstrap
 
-// Required
+// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
 @import "../node_modules/bootstrap/scss/functions";
-@import "../node_modules/bootstrap/scss/variables";
-@import "../node_modules/bootstrap/scss/mixins";
 
-// Include custom variable default overrides here
+// 2. Include any default variable overrides here
 
-// Optional
+// 3. Include remainder of required Bootstrap stylesheets
+@import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/mixins";
 @import "../node_modules/bootstrap/scss/root";
+
+// 4. Include any optional Bootstrap CSS as needed
+@import "../node_modules/bootstrap/scss/utilities";
 @import "../node_modules/bootstrap/scss/reboot";
 @import "../node_modules/bootstrap/scss/type";
 @import "../node_modules/bootstrap/scss/images";
 @import "../node_modules/bootstrap/scss/containers";
 @import "../node_modules/bootstrap/scss/grid";
+@import "../node_modules/bootstrap/scss/helpers";
+
+// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utililies.scss`
+@import "../node_modules/bootstrap/scss/utilities/api";
+
+// 6. Add additional custom code here
 ```
 
 With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `bootstrap.scss` file as your starting point.
@@ -74,24 +85,24 @@ Every Sass variable in Bootstrap includes the `!default` flag allowing you to ov
 
 You will find the complete list of Bootstrap's variables in `scss/_variables.scss`. Some variables are set to `null`, these variables don't output the property unless they are overridden in your configuration.
 
-Variable overrides must come after our functions, variables, and mixins are imported, but before the rest of the imports.
+Variable overrides must come after our functions are imported, but before the rest of the imports.
 
 Here's an example that changes the `background-color` and `color` for the `<body>` when importing and compiling Bootstrap via npm:
 
 ```scss
 // Required
 @import "../node_modules/bootstrap/scss/functions";
-@import "../node_modules/bootstrap/scss/variables";
-@import "../node_modules/bootstrap/scss/mixins";
 
-// Your variable overrides
+// Default variable overrides
 $body-bg: #000;
 $body-color: #111;
 
-// Bootstrap and its default variables
-
-// Optional
+// Required
+@import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/mixins";
 @import "../node_modules/bootstrap/scss/root";
+
+// Optional Bootstrap components here
 @import "../node_modules/bootstrap/scss/reboot";
 @import "../node_modules/bootstrap/scss/type";
 // etc
@@ -118,7 +129,7 @@ $primary: #0074d9;
 $danger: #ff4136;
 ```
 
-Later on, theses variables are set in Bootstrap's `$theme-colors` map:
+Later on, these variables are set in Bootstrap's `$theme-colors` map:
 
 ```scss
 $theme-colors: (
@@ -150,11 +161,11 @@ To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aw
 @import "../node_modules/bootstrap/scss/functions";
 @import "../node_modules/bootstrap/scss/variables";
 @import "../node_modules/bootstrap/scss/mixins";
+@import "../node_modules/bootstrap/scss/root";
 
 $theme-colors: map-remove($theme-colors, "info", "light", "dark");
 
 // Optional
-@import "../node_modules/bootstrap/scss/root";
 @import "../node_modules/bootstrap/scss/reboot";
 @import "../node_modules/bootstrap/scss/type";
 // etc
@@ -268,3 +279,25 @@ $border-width: 0;
   border-radius: subtract($border-radius, $border-width);
 }
 ```
+
+## Mixins
+
+Our `scss/mixins/` directory has a ton of mixins that power parts of Bootstrap and can also be used across your own project.
+
+### Color schemes
+
+A shorthand mixin for the `prefers-color-scheme` media query is available with support for `light`, `dark`, and custom color schemes.
+
+{{< scss-docs name="mixin-color-scheme" file="scss/mixins/_color-scheme.scss" >}}
+
+```scss
+.custom-element {
+  @include color-scheme(dark) {
+    // Insert dark mode styles here
+  }
+
+  @include color-scheme(custom-named-scheme) {
+    // Insert custom color scheme styles here
+  }
+}
+```
diff --git a/site/content/docs/5.0/examples/.stylelintrc b/site/content/docs/5.1/examples/.stylelintrc
index dc76dedbd..dc76dedbd 100644
--- a/site/content/docs/5.0/examples/.stylelintrc
+++ b/site/content/docs/5.1/examples/.stylelintrc
diff --git a/site/content/docs/5.0/examples/_index.md b/site/content/docs/5.1/examples/_index.md
index 4d747cd78..3d5bfab2f 100644
--- a/site/content/docs/5.0/examples/_index.md
+++ b/site/content/docs/5.1/examples/_index.md
@@ -19,7 +19,7 @@ aliases: "/examples/"
     {{- $len := len $entry.examples -}}
     {{ if (eq $i 0) }}<div class="row">{{ end }}
       <div class="col-sm-6 col-md-4 col-xl-3 mb-3">
-        <a href="/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}>
+        <a class="d-block" href="/docs/{{ $.Site.Params.docs_version }}/examples/{{ $example.name | urlize }}/"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}>
           <img class="img-thumbnail mb-3" srcset="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png,
                                                   /docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}@2x.png 2x"
                                           src="/docs/{{ $.Site.Params.docs_version }}/assets/img/examples/{{ $example.name | urlize }}.png"
diff --git a/site/content/docs/5.0/examples/album-rtl/index.html b/site/content/docs/5.1/examples/album-rtl/index.html
index ff84f122b..3408056bc 100644
--- a/site/content/docs/5.0/examples/album-rtl/index.html
+++ b/site/content/docs/5.1/examples/album-rtl/index.html
@@ -10,14 +10,14 @@ direction: rtl
       <div class="row">
         <div class="col-sm-8 col-md-7 py-4">
           <h4 class="text-white">حول</h4>
-          <p class="text-muted">أضف بعض المعلومات حول الألبوم أدناه أو المؤلف أو أي سياق خلفية آخر. اجعلها بضع جمل طويلة حتى يتمكن الناس من التقاط بعض الحكايات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p>
+          <p class="text-muted">أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p>
         </div>
         <div class="col-sm-4 offset-md-1 py-4">
-          <h4 class="text-white">اتصل</h4>
+          <h4 class="text-white">تواصل معي</h4>
           <ul class="list-unstyled">
-            <li><a href="#" class="text-white">تابع على تويتر</a></li>
-            <li><a href="#" class="text-white">مثل في الفيسبوك</a></li>
-            <li><a href="#" class="text-white">راسلني</a></li>
+            <li><a href="#" class="text-white">تابعني على تويتر</a></li>
+            <li><a href="#" class="text-white">شاركني الإعجاب في فيسبوك</a></li>
+            <li><a href="#" class="text-white">راسلني على البريد الإلكتروني</a></li>
           </ul>
         </div>
       </div>
@@ -42,7 +42,7 @@ direction: rtl
     <div class="row py-lg-5">
       <div class="col-lg-6 col-md-8 mx-auto">
         <h1 class="fw-light">مثال الألبوم</h1>
-        <p class="lead text-muted">شيء قصير وقائد حول المجموعة أدناه - محتوياتها ، ومنشئها ، وما إلى ذلك. اجعلها قصيرة ولطيفة ، ولكن ليست قصيرة جدًا حتى لا يتخطى الناس ببساطة هذه المجموعة تمامًا.</p>
+        <p class="lead text-muted">وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.</p>
         <p>
           <a href="#" class="btn btn-primary my-2">الدعوة الرئيسية للعمل</a>
           <a href="#" class="btn btn-secondary my-2">عمل ثانوي</a>
@@ -57,12 +57,12 @@ direction: rtl
       <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}}
+            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
             <div class="card-body">
               <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
               <div class="d-flex justify-content-between align-items-center">
                 <div class="btn-group">
-                  <button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
+                  <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
                 <small class="text-muted">9 دقائق</small>
@@ -72,12 +72,12 @@ direction: rtl
         </div>
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}}
+            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
             <div class="card-body">
               <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
               <div class="d-flex justify-content-between align-items-center">
                 <div class="btn-group">
-                  <button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
+                  <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
                 <small class="text-muted">9 دقائق</small>
@@ -87,12 +87,12 @@ direction: rtl
         </div>
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}}
+            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
             <div class="card-body">
               <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
               <div class="d-flex justify-content-between align-items-center">
                 <div class="btn-group">
-                  <button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
+                  <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
                 <small class="text-muted">9 دقائق</small>
@@ -103,12 +103,12 @@ direction: rtl
 
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}}
+            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
             <div class="card-body">
               <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
               <div class="d-flex justify-content-between align-items-center">
                 <div class="btn-group">
-                  <button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
+                  <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
                 <small class="text-muted">9 دقائق</small>
@@ -118,12 +118,12 @@ direction: rtl
         </div>
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}}
+            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
             <div class="card-body">
               <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
               <div class="d-flex justify-content-between align-items-center">
                 <div class="btn-group">
-                  <button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
+                  <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
                 <small class="text-muted">9 دقائق</small>
@@ -133,12 +133,12 @@ direction: rtl
         </div>
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}}
+            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
             <div class="card-body">
               <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
               <div class="d-flex justify-content-between align-items-center">
                 <div class="btn-group">
-                  <button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
+                  <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
                 <small class="text-muted">9 دقائق</small>
@@ -149,12 +149,12 @@ direction: rtl
 
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}}
+            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
             <div class="card-body">
               <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
               <div class="d-flex justify-content-between align-items-center">
                 <div class="btn-group">
-                  <button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
+                  <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
                 <small class="text-muted">9 دقائق</small>
@@ -164,12 +164,12 @@ direction: rtl
         </div>
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}}
+            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
             <div class="card-body">
               <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
               <div class="d-flex justify-content-between align-items-center">
                 <div class="btn-group">
-                  <button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
+                  <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
                 <small class="text-muted">9 دقائق</small>
@@ -179,12 +179,12 @@ direction: rtl
         </div>
         <div class="col">
           <div class="card shadow-sm">
-            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="ظفري" >}}
+            {{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="صورة مصغرة" >}}
             <div class="card-body">
               <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
               <div class="d-flex justify-content-between align-items-center">
                 <div class="btn-group">
-                  <button type="button" class="btn btn-sm btn-outline-secondary">رأي</button>
+                  <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
                   <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
                 </div>
                 <small class="text-muted">9 دقائق</small>
diff --git a/site/content/docs/5.0/examples/album/index.html b/site/content/docs/5.1/examples/album/index.html
index 2d25d726a..2d25d726a 100644
--- a/site/content/docs/5.0/examples/album/index.html
+++ b/site/content/docs/5.1/examples/album/index.html
diff --git a/site/content/docs/5.1/examples/blog-rtl/index.html b/site/content/docs/5.1/examples/blog-rtl/index.html
new file mode 100644
index 000000000..d3b732c64
--- /dev/null
+++ b/site/content/docs/5.1/examples/blog-rtl/index.html
@@ -0,0 +1,206 @@
+---
+layout: examples
+title: قالب المدونة
+direction: rtl
+extra_css:
+  - "https://fonts.googleapis.com/css?family=Amiri:wght@400;700&display=swap"
+  - "../blog/blog.rtl.css"
+include_js: false
+---
+
+<div class="container">
+  <header class="blog-header py-3">
+    <div class="row flex-nowrap justify-content-between align-items-center">
+      <div class="col-4 pt-1">
+        <a class="link-secondary" href="#">الإشتراك في النشرة البريدية</a>
+      </div>
+      <div class="col-4 text-center">
+        <a class="blog-header-logo text-dark" href="#">كبير</a>
+      </div>
+      <div class="col-4 d-flex justify-content-end align-items-center">
+        <a class="link-secondary" href="#" aria-label="بحث">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24"><title>بحث</title><circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2"/></svg>
+        </a>
+        <a class="btn btn-sm btn-outline-secondary" href="#">إنشاء حساب</a>
+      </div>
+    </div>
+  </header>
+
+  <div class="nav-scroller py-1 mb-2">
+    <nav class="nav d-flex justify-content-between">
+      <a class="p-2 link-secondary" href="#">العالم</a>
+      <a class="p-2 link-secondary" href="#">الولايات المتحدة</a>
+      <a class="p-2 link-secondary" href="#">التقنية</a>
+      <a class="p-2 link-secondary" href="#">التصميم</a>
+      <a class="p-2 link-secondary" href="#">الحضارة</a>
+      <a class="p-2 link-secondary" href="#">المال والأعمال</a>
+      <a class="p-2 link-secondary" href="#">السياسة</a>
+      <a class="p-2 link-secondary" href="#">الرأي العام</a>
+      <a class="p-2 link-secondary" href="#">العلوم</a>
+      <a class="p-2 link-secondary" href="#">الصحة</a>
+      <a class="p-2 link-secondary" href="#">الموضة</a>
+      <a class="p-2 link-secondary" href="#">السفر</a>
+    </nav>
+  </div>
+</div>
+
+<main class="container">
+  <div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
+    <div class="col-md-6 px-0">
+      <h1 class="display-4 fst-italic">عنوان تدوينة مميزة أطول</h1>
+      <p class="lead my-3">عدة أسطر نصية متعددة تعبر عن التدوية، وذلك لإعلام القراء الجدد بسرعة وكفاءة حول أكثر الأشياء إثارة للاهتمام في محتويات هذه التدوينة.</p>
+      <p class="lead mb-0"><a href="#" class="text-white fw-bold">أكمل القراءة...</a></p>
+    </div>
+  </div>
+
+  <div class="row mb-2">
+    <div class="col-md-6">
+      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
+        <div class="col p-4 d-flex flex-column position-static">
+          <strong class="d-inline-block mb-2 text-primary">العالم</strong>
+          <h3 class="mb-0">مشاركة مميزة</h3>
+          <div class="mb-1 text-muted">نوفمبر 12</div>
+          <p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
+          <a href="#" class="stretched-link">أكمل القراءة</a>
+        </div>
+        <div class="col-auto d-none d-lg-block">
+          {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}}
+        </div>
+      </div>
+    </div>
+    <div class="col-md-6">
+      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
+        <div class="col p-4 d-flex flex-column position-static">
+          <strong class="d-inline-block mb-2 text-success">التصميم</strong>
+          <h3 class="mb-0">عنوان الوظيفة</h3>
+          <div class="mb-1 text-muted">نوفمبر 11</div>
+          <p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
+          <a href="#" class="stretched-link">أكمل القراءة</a>
+        </div>
+        <div class="col-auto d-none d-lg-block">
+          {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="صورة مصغرة" >}}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-md-8">
+      <h3 class="pb-4 mb-4 fst-italic border-bottom">
+        من Firehose
+      </h3>
+
+      <article class="blog-post">
+        <h2 class="blog-post-title">مثال على تدوينة</h2>
+        <p class="blog-post-meta">1 يناير 2021 بواسطة <a href="#"> Mark </a></p>
+
+        <p>تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. النصوص الأساسية، الصور، والأكواد مدعومة بشكل كامل.</p>
+        <hr>
+        <p>يشكِّل تأمين الغذاء في المستقبل قضية تؤرِّق حكومات العالَم والعلماء على حدٍّ سواء. فخلال القرن العشرين ازداد عدد سكان الأرض أربعة أضعاف، وتشير التقديرات إلى أن العدد سوف يصل إلى عشرة مليارات إنسان بحلول عام 2050م. وسوف تمثل هذه الزيادة الهائلة تحدياً كبيراً وضغطاً متصاعداً على قدرة الإنتاج الزراعي. الأمر الذي كان ولا بد من أن يدفع إلى تطوير تقنيات مبتكرة في تصنيع الغذاء غير الزراعة، منها تقنية مستقبلية تقوم على تصنيع الغذاء من الهواء.</p>
+        <blockquote>
+          <p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه، كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية</p>
+        </blockquote>
+        <p>تشغل الزراعة مساحات كبيرة من اليابسة، وتستهلك كميات هائلة من المياه. كما أن إنتاج الغذاء بواسطة الزراعة يسهم بنسبة عالية من انبعاثات غازات الاحتباس الحراري العالمية، وللمقارنة فإن هذه النسبة من الانبعاثات هي أكبر مما ينتجه قطاع النقل بكل ما فيه من سيارات وشاحنات وطائرات وقطارات.</p>
+        <h2>عنوان</h2>
+        <p>تحصل النباتات على غذائها بواسطة عملية تسمى البناء الضوئي، حيث تقوم النباتات بتحويل ضوء الشمس والماء وثاني أكسيد الكربون الموجود في الغلاف الجوي إلى غذاء وتطلق الأكسجين كمنتج ثانوي لهذا التفاعل الكيميائي. وتحدث هذه العملية في "البلاستيدات الخضراء". فالنباتات تستفيد من طاقة ضوء الشمس في تقسيم الماء إلى هيدروجين وأكسجين، وتحدث تفاعلات كيميائية أخرى ينتج عنها سكر الجلكوز الذي تستخدمه كمصدر للغذاء وينطلق الأكسجين من النباتات إلى الغلاف الجوي. وهذا يعني أن النباتات تحوِّل ثاني أكسيد الكربون إلى غذاء من خلال تفاعلات كيميائية معقَّدة. ويُعد البناء الضوئي من أهم التفاعلات الكيميائية على كوكب الأرض، فقد ساعد في الماضي على تطوُّر كوكبنا وظهور الحياة عليه. فالنباتات تستخدم ثاني أكسيد الكربون لصنع غذائها، وتطلق الأكسجين لتساعد الكائنات الأخرى على التنفس!</p>
+        <h3>عنوان فرعي</h3>
+        <p>ألهمت هذه العملية علماء وكالة الفضاء الأمريكية (ناسا) خلال الستينيات من القرن الماضي، لبحث فكرة إطعام روَّاد الفضاء في مهمات الفضاء الطويلة مثل السفر إلى المريخ. وكانت واحدة من الأفكار الواعدة تصنيع الغذاء عن طريق ثاني أكسيد الكربون الذي ينتجه روَّاد الفضاء، لكن ليس بواسطة النباتات بل عن طريق ميكروبات صغيرة وحيدة الخلية قادرة على حصد ثاني أكسيد الكربون لإنتاج كميات وفيرة من البروتين المغذي على شكل مسحوق عديم النكهة، كما يمكن استخدام المادة في صنع الأطعمة المألوفة لدينا.</p>
+        <pre><code>Example code block</code></pre>
+        <p>وخلافاً لما هو الحال في عالم النبات، فإن هذه الميكروبات لا تستخدم الضوء كما يحدث في عملية البناء الضوئي التي تستخدمها النباتات للحصول على الغذاء، أي لأنها قادرة على النمو في الظلام. تسمى هذه البكتريا "هيدروجينوتروف" (Hydrogenotrophs)، وهي تستخدم الهيدروجين كوقود لإنتاج الغذاء من ثاني أكسيد الكربون. فعندما يُنتج روَّاد الفضاء ثاني أكسيد الكربون، تلتقطه الميكروبات، ويتحوَّل مع مدخلات أخرى إلى غذاء غني بالكربون. وبهذه الطريقة سوف نحصل على دورة كربون مغلقة الحلقة.</p>
+        <h3>عنوان فرعي</h3>
+        <p>بعد مرور أكثر من نصف قرن على أبحاث ناسا، تعمل حالياً عدة شركات في قطاع البيولوجيا التركيبية من ضمنها إير بروتين (Air Protein) وسولار فودز (Solar Foods) على تطوير جيل جديد من المنتجات الغذائية المستدامة، من دون وجود بصمة كربونية. ولن تقتصر هذه المنتجات الغذائية على روَّاد الفضاء فحسب، بل سوف تمتد لتشمل جميع سكان الأرض، وسوف تُنتَج في فترة زمنية قصيرة، بدلاً من الشهور، ومن دون الاعتماد على الأراضي الزراعية. وهذا يعني الحصول على منتجات غذائية بشكل سريع جداً. كما سيصبح من الممكن تصنيع الغذاء بطريقة عمودية من خلال هذه الميكروبات، بدلاً من الطريقة الأفقية التقليدية الشبيهة بتقنية الزراعة العمودية الحديثة. وهذا يعني توفير منتجات غذائية أكبر من المساحة نفسها.</p>
+        <p>يتكوَّن الغذاء البشري من ثلاثة أنواع رئيسة، هي:</p>
+        <ul>
+          <li>البروتينات</li>
+          <li>الكربوهيدرات</li>
+          <li>الدهون</li>
+        </ul>
+        <p>وتتكوَّن البروتينات من الأحماض الأمينية، وهي مجموعة من المركبات العضوية يبلغ عددها في جسم الإنسان عشرين حمضاً أمينياً، من بينها تسعة أساسية يحصل عليها الجسم من الغذاء. وتتكوَّن الأحماض الأمينية بشكل أساس من:</p>
+        <ol>
+          <li>الكربون</li>
+          <li>الهيدروجين</li>
+          <li>الأكسجين</li>
+          <li>النيتروجين</li>
+        </ol>
+        <p>ومن الملاحظ أن النيتروجين يشكِّل نسبة %78 من الهواء، كما أن الهيدروجين نحصل عليه من خلال التحليل الكهربائي للماء، ومن الممكن نظرياً سحب الكربون من الهواء لتشكيل هذه الأحماض، ذلك أن الكربون هو العمود الفقري للأحماض الأمينية، كما أن الحياة على كوكب الأرض قائمة على الكربون لقدرته على تكوين سلاسل كربونية طويلة، وهذا ما تفعله الميكروبات بتصنيع أحماض أمينية من ثاني أكسيد الكربون من خلال مجموعة من التفاعلات الكيميائية المعقَّدة. وإضافة إلى صنع وجبات غنية بالبروتين، فهذه الميكروبات تنتج منتجات أخرى مثل الزيوت التي لها عديد من الاستخدامات.</p>
+      </article>
+
+      <article class="blog-post">
+        <h2 class="blog-post-title">تدوينة أخرى</h2>
+        <p class="blog-post-meta">23 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p>
+
+        <p>في الوقت الحالي، تدرس عدَّة شركات هذه الميكروبات بشكل أعمق، وتستزرعها من أجل الحصول على الغذاء. ففي عام 2019م، أعلن باحثون في شركة (Air Protein) الأمريكية نجاحهم في تحويل ثاني أكسيد الكربون الموجود في الهواء إلى لحوم صناعية مصنوعة من البروتين، التي لا تتطلَّب أي أرض زراعية، بل هي معتمدة بشكل أساسي على الهواء.</p>
+        <blockquote>
+          <p>تم تصنيع اللحوم بأنواع عديدة</p>
+        </blockquote>
+        <p>إذ استخدم هؤلاء الباحثون الهواء والطاقة المتجدِّدة كمدخلات في عملية مشابهة للتخمير، لإنتاج بروتين يحتوي على الأحماض الأمينية التسعة الأساسية وغني بالفيتامينات والمعادن، كما أنه خالٍ من الهرمونات والمضادات الحيوية والمبيدات الحشرية ومبيدات الأعشاب.</p>
+        <p> وتم تصنيع اللحوم بأنواع عديدة بما فيها الدواجن والأبقار والمأكولات البحرية، من دون حصول انبعاثات كربونية، على عكس تربية الأبقار التي تسهم في انبعاث غاز الميثان أحد غازات الاحتباس الحراري.</p>
+      </article>
+
+      <article class="blog-post">
+        <h2 class="blog-post-title">ميزة جديدة</h2>
+        <p class="blog-post-meta">14 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p>
+
+        <p>كما أن الشركة الفنلندية (Solar Foods) طوَّرت تقنية لإنتاج البروتين من الهواء، حيث تبدأ العملية بتقسيم الماء إلى مكوناته الهيدروجين والأكسجين عن طريق الكهرباء. فالهيدروجين يوفِّر الطاقة للبكتريا لتحويل ثاني أكسيد الكربون والنيتروجين الموجودين في الهواء إلى مادة عضوية غنية بالبروتين بشكل أكفأ من نمو النباتات باستخدام البناء الضوئي. وهذا البروتين يشبه دقيق القمح وقد أطلق عليه اسم "سولين" (Solein).</p>
+        <p>وتقوم الشركة حالياً بجمع البيانات حول المنتج الغذائي لتقديمه إلى الاتحاد الأوروبي بهدف الحصول على ترخيص غذائي، كما أنها تخطط لبدء الإنتاج التجاري في العام المقبل 2021م. وقد أوضحت الشركة أنها مهتمة بإنتاج أطعمة صديقة للبيئة من خلال استخدام المواد الأساسية: الكهرباء وثاني أكسيد الكربون، وهذه الأطعمة سوف تجنبنا الأثر السلبي البيئي للزراعة التقليدية الذي يشمل كل شيء من استخدام الأرض والمياه إلى الانبعاثات الناتجة من تسميد المحاصيل أو تربية الحيوانات.</p>
+        <p>وعلى هذا، فإن البروتينات المشتقة من الميكروبات سوف:</p>
+        <ul>
+          <li>توفر حلاً ممكناً في ظل زيادة الطلب العالمي المستقبلي على الغذاء</li>
+          <li>تتوسع مصانع الغذاء في المستقبل لتكون أكفأ وأكثر استدامة</li>
+          <li>تصبح قادرة على توفير الغذاء لروَّاد الفضاء في سفرهم إلى المريخ وجميع سكان كوكب الأرض في عام 2050م</li>
+        </ul>
+        <p>فتخيّل أن الميكروبات ستكون مصانع المستقبل، وأن غذاء المستقبل سيكون مصنوعاً من الهواء! وأن عام 2050م سيكون مختلفاً تماماً عن عالمنا اليوم. فهو عالم من دون زراعة ولا تربية حيوانات من أجل الغذاء! قد يبدو ذلك خيالياً لكنه ليس مستحيلاً!</p>
+      </article>
+
+      <nav class="blog-pagination" aria-label="Pagination">
+        <a class="btn btn-outline-primary" href="#">تدوينات أقدم</a>
+        <a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">تدوينات أحدث</a>
+      </nav>
+
+    </div>
+
+    <div class="col-md-4">
+      <div class="position-sticky" style="top: 2rem;">
+        <div class="p-4 mb-3 bg-light rounded">
+          <h4 class="fst-italic">حول</h4>
+          <p class="mb-0">أقبلت، فأقبلت معك الحياة بجميع صنوفها وألوانها: فالنبات ينبت، والأشجار تورق وتزهر، والهرة تموء، والقمري يسجع، والغنم يثغو، والبقر يخور، وكل أليف يدعو أليفه. كل شيء يشعر بالحياة وينسي هموم الحياة، ولا يذكر إلا سعادة الحياة، فإن كان الزمان جسدا فأنت روحه، وإن كان عمرا فأنت شبابه.</p>
+        </div>
+
+        <div class="p-4">
+          <h4 class="fst-italic">الأرشيف</h4>
+          <ol class="list-unstyled mb-0">
+            <li><a href="#">مارس 2021</a></li>
+            <li><a href="#">شباط 2021</a></li>
+            <li><a href="#">يناير 2021</a></li>
+            <li><a href="#">ديسمبر 2020</a></li>
+            <li><a href="#">نوفمبر 2020</a></li>
+            <li><a href="#">أكتوبر 2020</a></li>
+            <li><a href="#">سبتمبر 2020</a></li>
+            <li><a href="#">اغسطس 2020</a></li>
+            <li><a href="#">يوليو 2020</a></li>
+            <li><a href="#">يونيو 2020</a></li>
+            <li><a href="#">مايو 2020</a></li>
+            <li><a href="#">ابريل 2020</a></li>
+          </ol>
+        </div>
+
+        <div class="p-4">
+          <h4 class="fst-italic">في مكان آخر</h4>
+          <ol class="list-unstyled">
+            <li><a href="#">GitHub</a></li>
+            <li><a href="#">Twitter</a></li>
+            <li><a href="#">Facebook</a></li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</main>
+
+<footer class="blog-footer">
+  <p>تم تصميم نموذج المدونة لـ <a href="https://getbootstrap.com/">Bootstrap</a> بواسطة <a href="https://twitter.com/mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>.</p>
+  <p>
+    <a href="#">عد إلى الأعلى</a>
+  </p>
+</footer>
diff --git a/site/content/docs/5.0/examples/blog/blog.css b/site/content/docs/5.1/examples/blog/blog.css
index 437a540f6..437a540f6 100644
--- a/site/content/docs/5.0/examples/blog/blog.css
+++ b/site/content/docs/5.1/examples/blog/blog.css
diff --git a/site/content/docs/5.0/examples/blog/blog.rtl.css b/site/content/docs/5.1/examples/blog/blog.rtl.css
index 35eac731f..35eac731f 100644
--- a/site/content/docs/5.0/examples/blog/blog.rtl.css
+++ b/site/content/docs/5.1/examples/blog/blog.rtl.css
diff --git a/site/content/docs/5.1/examples/blog/index.html b/site/content/docs/5.1/examples/blog/index.html
new file mode 100644
index 000000000..13c013b2c
--- /dev/null
+++ b/site/content/docs/5.1/examples/blog/index.html
@@ -0,0 +1,258 @@
+---
+layout: examples
+title: Blog Template
+extra_css:
+  - "https://fonts.googleapis.com/css?family=Playfair+Display:700,900&display=swap"
+  - "blog.css"
+include_js: false
+---
+
+<div class="container">
+  <header class="blog-header py-3">
+    <div class="row flex-nowrap justify-content-between align-items-center">
+      <div class="col-4 pt-1">
+        <a class="link-secondary" href="#">Subscribe</a>
+      </div>
+      <div class="col-4 text-center">
+        <a class="blog-header-logo text-dark" href="#">Large</a>
+      </div>
+      <div class="col-4 d-flex justify-content-end align-items-center">
+        <a class="link-secondary" href="#" aria-label="Search">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24"><title>Search</title><circle cx="10.5" cy="10.5" r="7.5"/><path d="M21 21l-5.2-5.2"/></svg>
+        </a>
+        <a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
+      </div>
+    </div>
+  </header>
+
+  <div class="nav-scroller py-1 mb-2">
+    <nav class="nav d-flex justify-content-between">
+      <a class="p-2 link-secondary" href="#">World</a>
+      <a class="p-2 link-secondary" href="#">U.S.</a>
+      <a class="p-2 link-secondary" href="#">Technology</a>
+      <a class="p-2 link-secondary" href="#">Design</a>
+      <a class="p-2 link-secondary" href="#">Culture</a>
+      <a class="p-2 link-secondary" href="#">Business</a>
+      <a class="p-2 link-secondary" href="#">Politics</a>
+      <a class="p-2 link-secondary" href="#">Opinion</a>
+      <a class="p-2 link-secondary" href="#">Science</a>
+      <a class="p-2 link-secondary" href="#">Health</a>
+      <a class="p-2 link-secondary" href="#">Style</a>
+      <a class="p-2 link-secondary" href="#">Travel</a>
+    </nav>
+  </div>
+</div>
+
+<main class="container">
+  <div class="p-4 p-md-5 mb-4 text-white rounded bg-dark">
+    <div class="col-md-6 px-0">
+      <h1 class="display-4 fst-italic">Title of a longer featured blog post</h1>
+      <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
+      <p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
+    </div>
+  </div>
+
+  <div class="row mb-2">
+    <div class="col-md-6">
+      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
+        <div class="col p-4 d-flex flex-column position-static">
+          <strong class="d-inline-block mb-2 text-primary">World</strong>
+          <h3 class="mb-0">Featured post</h3>
+          <div class="mb-1 text-muted">Nov 12</div>
+          <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
+          <a href="#" class="stretched-link">Continue reading</a>
+        </div>
+        <div class="col-auto d-none d-lg-block">
+          {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}}
+        </div>
+      </div>
+    </div>
+    <div class="col-md-6">
+      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
+        <div class="col p-4 d-flex flex-column position-static">
+          <strong class="d-inline-block mb-2 text-success">Design</strong>
+          <h3 class="mb-0">Post title</h3>
+          <div class="mb-1 text-muted">Nov 11</div>
+          <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
+          <a href="#" class="stretched-link">Continue reading</a>
+        </div>
+        <div class="col-auto d-none d-lg-block">
+          {{< placeholder width="200" height="250" background="#55595c" color="#eceeef" text="Thumbnail" >}}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row g-5">
+    <div class="col-md-8">
+      <h3 class="pb-4 mb-4 fst-italic border-bottom">
+        From the Firehose
+      </h3>
+
+      <article class="blog-post">
+        <h2 class="blog-post-title">Sample blog post</h2>
+        <p class="blog-post-meta">January 1, 2021 by <a href="#">Mark</a></p>
+
+        <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, lists, tables, images, code, and more are all supported as expected.</p>
+        <hr>
+        <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
+        <h2>Blockquotes</h2>
+        <p>This is an example blockquote in action:</p>
+        <blockquote class="blockquote">
+          <p>Quoted text goes here.</p>
+        </blockquote>
+        <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
+        <h3>Example lists</h3>
+        <p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout. This is an example unordered list:</p>
+        <ul>
+          <li>First list item</li>
+          <li>Second list item with a longer description</li>
+          <li>Third list item to close it out</li>
+        </ul>
+        <p>And this is an ordered list:</p>
+        <ol>
+          <li>First list item</li>
+          <li>Second list item with a longer description</li>
+          <li>Third list item to close it out</li>
+        </ol>
+        <p>And this is a definiton list:</p>
+        <dl>
+          <dt>HyperText Markup Language (HTML)</dt>
+          <dd>The language used to describe and define the content of a Web page</dd>
+          <dt>Cascading Style Sheets (CSS)</dt>
+          <dd>Used to describe the appearance of Web content</dd>
+          <dt>JavaScript (JS)</dt>
+          <dd>The programming language used to build advanced Web sites and applications</dd>
+        </dl>
+        <h2>Inline HTML elements</h2>
+        <p>HTML defines a long list of available inline tags, a complete list of which can be found on the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">Mozilla Developer Network</a>.</p>
+        <ul>
+          <li><strong>To bold text</strong>, use <code class="language-plaintext highlighter-rouge">&lt;strong&gt;</code>.</li>
+          <li><em>To italicize text</em>, use <code class="language-plaintext highlighter-rouge">&lt;em&gt;</code>.</li>
+          <li>Abbreviations, like <abbr title="HyperText Markup Langage">HTML</abbr> should use <code class="language-plaintext highlighter-rouge">&lt;abbr&gt;</code>, with an optional <code class="language-plaintext highlighter-rouge">title</code> attribute for the full phrase.</li>
+          <li>Citations, like <cite>— Mark Otto</cite>, should use <code class="language-plaintext highlighter-rouge">&lt;cite&gt;</code>.</li>
+          <li><del>Deleted</del> text should use <code class="language-plaintext highlighter-rouge">&lt;del&gt;</code> and <ins>inserted</ins> text should use <code class="language-plaintext highlighter-rouge">&lt;ins&gt;</code>.</li>
+          <li>Superscript <sup>text</sup> uses <code class="language-plaintext highlighter-rouge">&lt;sup&gt;</code> and subscript <sub>text</sub> uses <code class="language-plaintext highlighter-rouge">&lt;sub&gt;</code>.</li>
+        </ul>
+        <p>Most of these elements are styled by browsers with few modifications on our part.</p>
+        <h2>Heading</h2>
+        <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
+        <h3>Sub-heading</h3>
+        <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
+        <pre><code>Example code block</code></pre>
+        <p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.</p>
+      </article>
+
+      <article class="blog-post">
+        <h2 class="blog-post-title">Another blog post</h2>
+        <p class="blog-post-meta">December 23, 2020 by <a href="#">Jacob</a></p>
+
+        <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
+        <blockquote>
+          <p>Longer quote goes here, maybe with some <strong>emphasized text</strong> in the middle of it.</p>
+        </blockquote>
+        <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
+        <h3>Example table</h3>
+        <p>And don't forget about tables in these posts:</p>
+        <table class="table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Upvotes</th>
+              <th>Downvotes</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Alice</td>
+              <td>10</td>
+              <td>11</td>
+            </tr>
+            <tr>
+              <td>Bob</td>
+              <td>4</td>
+              <td>3</td>
+            </tr>
+            <tr>
+              <td>Charlie</td>
+              <td>7</td>
+              <td>9</td>
+            </tr>
+          </tbody>
+          <tfoot>
+            <tr>
+              <td>Totals</td>
+              <td>21</td>
+              <td>23</td>
+            </tr>
+          </tfoot>
+        </table>
+
+        <p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.</p>
+      </article>
+
+      <article class="blog-post">
+        <h2 class="blog-post-title">New feature</h2>
+        <p class="blog-post-meta">December 14, 2020 by <a href="#">Chris</a></p>
+
+        <p>This is some additional paragraph placeholder content. It has been written to fill the available space and show how a longer snippet of text affects the surrounding content. We'll repeat it often to keep the demonstration flowing, so be on the lookout for this exact same string of text.</p>
+        <ul>
+          <li>First list item</li>
+          <li>Second list item with a longer description</li>
+          <li>Third list item to close it out</li>
+        </ul>
+        <p>This is some additional paragraph placeholder content. It's a slightly shorter version of the other highly repetitive body text used throughout.</p>
+      </article>
+
+      <nav class="blog-pagination" aria-label="Pagination">
+        <a class="btn btn-outline-primary" href="#">Older</a>
+        <a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-disabled="true">Newer</a>
+      </nav>
+
+    </div>
+
+    <div class="col-md-4">
+      <div class="position-sticky" style="top: 2rem;">
+        <div class="p-4 mb-3 bg-light rounded">
+          <h4 class="fst-italic">About</h4>
+          <p class="mb-0">Customize this section to tell your visitors a little bit about your publication, writers, content, or something else entirely. Totally up to you.</p>
+        </div>
+
+        <div class="p-4">
+          <h4 class="fst-italic">Archives</h4>
+          <ol class="list-unstyled mb-0">
+            <li><a href="#">March 2021</a></li>
+            <li><a href="#">February 2021</a></li>
+            <li><a href="#">January 2021</a></li>
+            <li><a href="#">December 2020</a></li>
+            <li><a href="#">November 2020</a></li>
+            <li><a href="#">October 2020</a></li>
+            <li><a href="#">September 2020</a></li>
+            <li><a href="#">August 2020</a></li>
+            <li><a href="#">July 2020</a></li>
+            <li><a href="#">June 2020</a></li>
+            <li><a href="#">May 2020</a></li>
+            <li><a href="#">April 2020</a></li>
+          </ol>
+        </div>
+
+        <div class="p-4">
+          <h4 class="fst-italic">Elsewhere</h4>
+          <ol class="list-unstyled">
+            <li><a href="#">GitHub</a></li>
+            <li><a href="#">Twitter</a></li>
+            <li><a href="#">Facebook</a></li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</main>
+
+<footer class="blog-footer">
+  <p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
+  <p>
+    <a href="#">Back to top</a>
+  </p>
+</footer>
diff --git a/site/content/docs/5.0/examples/carousel-rtl/index.html b/site/content/docs/5.1/examples/carousel-rtl/index.html
index 7f162efd0..4e0285686 100644
--- a/site/content/docs/5.0/examples/carousel-rtl/index.html
+++ b/site/content/docs/5.1/examples/carousel-rtl/index.html
@@ -1,6 +1,6 @@
 ---
 layout: examples
-title: قالب دائري
+title: قالب  شرائح العرض
 direction: rtl
 extra_css:
   - "../carousel/carousel.rtl.css"
@@ -9,7 +9,7 @@ extra_css:
 <header>
   <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
     <div class="container-fluid">
-      <a class="navbar-brand" href="#">دائري</a>
+      <a class="navbar-brand" href="#">شرائح العرض</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="تبديل التنقل">
         <span class="navbar-toggler-icon"></span>
       </button>
@@ -22,7 +22,7 @@ extra_css:
             <a class="nav-link" href="#">حلقة الوصل</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">معاق</a>
+            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">رابط غير مفعل</a>
           </li>
         </ul>
         <form class="d-flex">
@@ -48,7 +48,7 @@ extra_css:
         <div class="container">
           <div class="carousel-caption text-start">
             <h1>عنوان المثال.</h1>
-            <p> نهاية الأوضاع ان أضف, هو مما رجوعهم وقدّموا. أي عدد الدمج نهاية وأكثرها, المسرح الباهضة وبولندا حول و, كل أما سياسة أسابيع. مع حيث قُدُماً الكونجرس, بها و خيار ٢٠٠٤, كلا في مكّن وقام. مع يكن زهاء بالفشل, الجوي الصين الشمال إذ على.</p>
+            <p>تشير الدراسات الإحصائية حسب الجمعية الأمريكية للغات بأن الإقبال على العربية زاد %126 في الولايات المتحدة الأمريكية وحدها بين عامي 2002 و2009م.</p>
             <p><a class="btn btn-lg btn-primary" href="#">سجل اليوم</a></p>
           </div>
         </div>
@@ -58,7 +58,7 @@ extra_css:
         <div class="container">
           <div class="carousel-caption">
             <h1>عنوان مثال آخر.</h1>
-            <p>ثم تزامناً الفرنسي الإقتصادية دار. لكل عن الضغوط المتّبعة, أن حتى إختار المدن بالإنزال. عن الشمل بالفشل تلك, بل أراض أوزار بلديهما حول. دون لكون والتي ثم, كُلفة ويعزى استطاعوا أن لمّ. جُل بخطوط واحدة البشريةً.</p>
+            <p>حسب المجلس الثقافي البريطاني فإن تعليم الإنجليزية داخل بريطانيا يسهم في تعزيز اقتصادها بما يتجاوز ملياري جنيه سنوياً، كما أنه وفر أكثر من 26 ألف وظيفة.</p>
             <p><a class="btn btn-lg btn-primary" href="#">أعرف أكثر</a></p>
           </div>
         </div>
@@ -68,7 +68,7 @@ extra_css:
         <div class="container">
           <div class="carousel-caption text-end">
             <h1>واحد أكثر لقياس جيد.</h1>
-            <p>قررت العصبة إيطاليا وتم أن, عن سكان وقامت الحكومة وفي. كان بـ اوروبا اليابانية, ثمّة بوابة يتعلّق عل بعض. عدم رئيس الآلاف أن حدى.</p>
+            <p>الإحصاءات لحجم الاستثمار اللغوي خارج بريطانيا تتفاوت من سنة لأخرى إلا أن المدير التنفيذي للمجلس الثقافي البريطاني إدي بايرز يرى أن استثمار تعليم الإنجليزية في الخارج لا يحسب على المستوى المالي فحسب بل على المستوى السياسي أيضاً.</p>
             <p><a class="btn btn-lg btn-primary" href="#">تصفح المعرض</a></p>
           </div>
         </div>
@@ -80,7 +80,7 @@ extra_css:
     </button>
     <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
       <span class="carousel-control-next-icon" aria-hidden="true"></span>
-      <span class="visually-hidden">التالى</span>
+      <span class="visually-hidden">التالي</span>
     </button>
   </div>
 
@@ -96,19 +96,19 @@ extra_css:
       <div class="col-lg-4">
         {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
         <h2>عنوان</h2>
-        <p>ان وتم عجّل الأجل, قبل نتيجة المشترك بـ, أي جعل جورج أوزار المسرح. أن وإعلان الساحل تلك, مكن ان استبدال الباهضة التكاليف. الى ماذا اليميني الحكومة في, إجلاء نتيجة قبل تم. مساعدة بولندا، أي هذه الحكم.</p>
+        <p>تذكر دائماً أن الحاسوب لا يمتلك ذكاءً، ولكنه يكتسب الذكاء الاصطناعي من خلال ثلاثة عناصر وظيفية رئيسة، هي: القدرة على التحليل، والقدرة على التأليف، والاستدلال المنطقي.</p>
         <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
       </div><!-- /.col-lg-4 -->
       <div class="col-lg-4">
         {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
-        <h2>عنوان</h2>
-        <p>هو أخر إتفاقية الدولارات الأوروبيّون, ثانية طوكيو و به،, ونتج أعمال مما أم. عن الا يونيو أفريقيا, السيطرة التقليدي ومن ٣٠. هو الغالي الإتفاقية ويكيبيديا، مكن, و الى هُزم اعتداء وايرلندا. وقبل بمباركة الأوروبيّون عن فقد, بتحدّي والفلبين ما كلا.</p>
+        <h2>عنوان آخر</h2>
+        <p>إذا أردنا استخدام الحاسوب الذكي في معالجة اللغة العربية فإننا نجد أنفسنا أمام تحدٍّ كبير، خاصة وأن لغتنا تمتاز بتماسك منظوماتها وتداخلها، ومع ذلك فإن الذكاء الاصطناعي يمكّننا من الحصول على أربعة أنواع من المعالجة، هي: المعالجة الصوتية، والمعالجة الصرفية، والمعالجة النحوية، والمعالجة الدلالية.</p>
         <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
       </div><!-- /.col-lg-4 -->
       <div class="col-lg-4">
         {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
-        <h2>عنوان</h2>
-        <p>غير عن الثقيل وسمّيت الأوضاع, لم تاريخ بالحرب للسيطرة حين, دار اللا تطوير تم. الى بشرية اليابان في. أما الشهيرة الإثنان وايرلندا ما, لإعلان واشتدّت و مدن. في غير والحزب للسيطرة الإكتفاء. ثانية الكونجرس الا من, جُل ٣٠ وبداية الشرقية.</p>
+        <h2>عنوان ثالث لتأكيد المعلومة</h2>
+        <p>بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية تعاملنا مع لغتنا العربية.</p>
         <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
       </div><!-- /.col-lg-4 -->
     </div><!-- /.row -->
@@ -121,7 +121,7 @@ extra_css:
     <div class="row featurette">
       <div class="col-md-7">
         <h2 class="featurette-heading">العنوان الأول المميز. <span class="text-muted"> سيذهل عقلك. </span></h2>
-        <p class="lead">في التخطيط التجارية هذا, إذ هذه الشمل موالية الخاطفة. أحدث وبدون اتفاق من غير, جعل عل أطراف مشاركة الأعمال. بل الى قادة واحدة, لهيمنة التجارية حتى ثم. هو وبالرغم ابتدعها بال. بوابة ماشاء أما أي, ما وفي أحكم غريمه التقليدية.</p>
+        <p class="lead">وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.</p>
       </div>
       <div class="col-md-5">
         {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
@@ -132,8 +132,8 @@ extra_css:
 
     <div class="row featurette">
       <div class="col-md-7 order-md-2">
-        <h2 class="featurette-heading">أوه نعم ، هذا جيد. <span class="text-muted"> شاهد بنفسك. </span></h2>
-        <p class="lead">صفحة وحرمان الأراضي أم أخذ, قد ذلك الثقيلة المتاخمة وبريطانيا. أخذ أن اللا لإعلان لهيمنة, وفي كل موالية الشّعبين. تكاليف الخاسرة لمّ لم, إذ بحق موالية الثقيلة. العظمى والفلبين تم عرض, جمعت شعار الحرة حيث بل. عرض و وترك اللازمة.</p>
+        <h2 class="featurette-heading">أوه نعم، هذا جيد. <span class="text-muted"> شاهد بنفسك. </span></h2>
+        <p class="lead">عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.</p>
       </div>
       <div class="col-md-5 order-md-1">
         {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
@@ -144,8 +144,8 @@ extra_css:
 
     <div class="row featurette">
       <div class="col-md-7">
-        <h2 class="featurette-heading">وأخيرًا ، هذا. <span class="text-muted"> كش ملك. </span></h2>
-        <p class="lead">تحرّك أراضي هذا عن, كرسي وكسبت يتم بل. بحق بل القوى وفنلندا, الجو واُسدل التكاليف وتم تم, بسبب ا السادس كان أن. وبعد ميناء من بلا, تصفح يتبقّ تلك هو. ان دول بخطوط وإعلان ومطالبة, المزيفة الأوروبية، عل حدى قام.</p>
+        <h2 class="featurette-heading">وأخيرًا، هذا. <span class="text-muted"> كش ملك. </span></h2>
+        <p class="lead">إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ</p>
       </div>
       <div class="col-md-5">
         {{< placeholder width="500" height="500" background="#eee" color="#aaa" class="bd-placeholder-img-lg featurette-image img-fluid mx-auto" >}}
@@ -162,6 +162,6 @@ extra_css:
   <!-- FOOTER -->
   <footer class="container">
     <p class="float-end"><a href="#">عد إلى الأعلى</a></p>
-    <p>&copy; 2017–{{< year >}} Company, Inc. &middot; <a href="#">خصوصية</a> &middot; <a href="#">شروط</a></p>
+    <p>&copy; 2017–{{< year >}} Company, Inc. &middot; <a href="#">سياسة الخصوصية</a> &middot; <a href="#">شروط الاستخدام</a></p>
   </footer>
 </main>
diff --git a/site/content/docs/5.0/examples/carousel/carousel.css b/site/content/docs/5.1/examples/carousel/carousel.css
index f91faec76..f91faec76 100644
--- a/site/content/docs/5.0/examples/carousel/carousel.css
+++ b/site/content/docs/5.1/examples/carousel/carousel.css
diff --git a/site/content/docs/5.0/examples/carousel/carousel.rtl.css b/site/content/docs/5.1/examples/carousel/carousel.rtl.css
index 853640b97..853640b97 100644
--- a/site/content/docs/5.0/examples/carousel/carousel.rtl.css
+++ b/site/content/docs/5.1/examples/carousel/carousel.rtl.css
diff --git a/site/content/docs/5.0/examples/carousel/index.html b/site/content/docs/5.1/examples/carousel/index.html
index da5f3ab7a..da5f3ab7a 100644
--- a/site/content/docs/5.0/examples/carousel/index.html
+++ b/site/content/docs/5.1/examples/carousel/index.html
diff --git a/site/content/docs/5.0/examples/cheatsheet-rtl/index.html b/site/content/docs/5.1/examples/cheatsheet-rtl/index.html
index e124936db..b83e41dd6 100644
--- a/site/content/docs/5.0/examples/cheatsheet-rtl/index.html
+++ b/site/content/docs/5.1/examples/cheatsheet-rtl/index.html
@@ -1,6 +1,6 @@
 ---
 layout: examples
-title: ورقة غش
+title: ورقة الغش
 extra_css:
   - "../cheatsheet/cheatsheet.rtl.css"
 extra_js:
@@ -12,8 +12,8 @@ direction: rtl
 <header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark">
   <div class="container-fluid d-flex align-items-center">
     <h1 class="d-flex align-items-center fs-4 text-white mb-0">
-      <img src="/docs/5.0/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="me-3" alt="Bootstrap">
-      ورقة غش
+      <img src="/docs/5.1/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="me-3" alt="Bootstrap">
+      ورقة الغش
     </h1>
     <a href="{{< docsref "/examples/cheatsheet" >}}" class="ms-auto link-light" hreflang="en">جدول بيانات LTR</a>
   </div>
@@ -23,48 +23,48 @@ direction: rtl
   <nav class="small" id="toc">
     <ul class="list-unstyled">
       <li class="my-2">
-        <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">محتويات</button>
+        <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">المحتوى</button>
         <ul class="list-unstyled ps-3 collapse" id="contents-collapse">
-          <li><a class="d-inline-flex align-items-center rounded" href="#typography">الطباعة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#images">صور</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#tables">جدول</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#figures">رقم</a></li>
+          <li><a class="d-inline-flex align-items-center rounded" href="#typography">النصوص</a></li>
+          <li><a class="d-inline-flex align-items-center rounded" href="#images">الصور</a></li>
+          <li><a class="d-inline-flex align-items-center rounded" href="#tables">الجداول</a></li>
+          <li><a class="d-inline-flex align-items-center rounded" href="#figures">النماذج البيانية</a></li>
         </ul>
       </li>
       <li class="my-2">
-        <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">نماذج</button>
+        <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">النماذج</button>
         <ul class="list-unstyled ps-3 collapse" id="forms-collapse">
           <li><a class="d-inline-flex align-items-center rounded" href="#overview">نظرة عامة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#disabled-forms">أشكال المعطلين</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#sizing">تحجيم</a></li>
+          <li><a class="d-inline-flex align-items-center rounded" href="#disabled-forms">الحقول المعطلة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded" href="#sizing">الأحجام</a></li>
           <li><a class="d-inline-flex align-items-center rounded" href="#input-group">مجموعة الإدخال</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#floating-labels">تسميات عائمة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded" href="#floating-labels">الحقول ذوي العناوين العائمة</a></li>
           <li><a class="d-inline-flex align-items-center rounded" href="#validation">التحقق</a></li>
         </ul>
       </li>
       <li class="my-2">
         <button class="btn d-inline-flex align-items-center collapsed" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">مكونات</button>
         <ul class="list-unstyled ps-3 collapse" id="components-collapse">
-          <li><a class="d-inline-flex align-items-center rounded" href="#accordion">الأكورديون</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#alerts">إنذار</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#badge">شارة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#breadcrumb">مسار التنقل</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#buttons">أزرار</a></li>
+          <li><a class="d-inline-flex align-items-center rounded" href="#accordion">المطوية</a></li>
+          <li><a class="d-inline-flex align-items-center rounded" href="#alerts">الإنذارات</a></li>
+          <li><a class="d-inline-flex align-items-center rounded" href="#badge">الشارة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded" href="#breadcrumb">مسار التنقل التفصيلي</a></li>
+          <li><a class="d-inline-flex align-items-center rounded" href="#buttons">الأزرار</a></li>
           <li><a class="d-inline-flex align-items-center rounded" href="#button-group">مجموعة الأزرار</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#card">بطاقة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#carousel">شرائح عرض</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#dropdowns">هبوط قطرة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#list-group">مجموعة القوائم</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#modal">مشروط</a></li>
+          <li><a class="d-inline-flex align-items-center rounded" href="#card">البطاقة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded" href="#carousel">شرائح العرض</a></li>
+          <li><a class="d-inline-flex align-items-center rounded" href="#dropdowns">القوائم المنسدلة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded" href="#list-group">مجموعة العناصر</a></li>
+          <li><a class="d-inline-flex align-items-center rounded" href="#modal">الصندوق العائم</a></li>
           <li><a class="d-inline-flex align-items-center rounded" href="#navs">التنقل</a></li>
           <li><a class="d-inline-flex align-items-center rounded" href="#navbar">شريط التنقل</a></li>
           <li><a class="d-inline-flex align-items-center rounded" href="#pagination">ترقيم الصفحات</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#popovers">بوبوفيرس</a></li>
+          <li><a class="d-inline-flex align-items-center rounded" href="#popovers">الصناديق المنبثقة</a></li>
           <li><a class="d-inline-flex align-items-center rounded" href="#progress">شريط التقدم</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#scrollspy">مخطوطة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#spinners">المغازل</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#toasts">نخب</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#tooltips">تلميحات الأدوات</a></li>
+          <li><a class="d-inline-flex align-items-center rounded" href="#scrollspy">المخطوطة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded" href="#spinners">الدوائر المتحركة</a></li>
+          <li><a class="d-inline-flex align-items-center rounded" href="#toasts">الإشعارات</a></li>
+          <li><a class="d-inline-flex align-items-center rounded" href="#tooltips">التلميحات</a></li>
         </ul>
       </li>
     </ul>
@@ -72,19 +72,19 @@ direction: rtl
 </aside>
 <div class="bd-cheatsheet container-fluid bg-body">
   <section id="content">
-    <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">محتويات</h2>
+    <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">المحتوى</h2>
 
     <article class="my-3" id="typography">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
-        <h3>الطباعة</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/typography" >}}">توثيق</a>
+        <h3>النصوص</h3>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/typography" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
         {{< example show_markup="false" >}}
         <p class="display-1">العرض 1</p>
         <p class="display-2">العرض 2</p>
-        <p class="display-3 ">العرض 3</p>
+        <p class="display-3">العرض 3</p>
         <p class="display-4">العرض 4</p>
         <p class="display-5">العرض 5</p>
         <p class="display-6">العرض 6</p>
@@ -101,61 +101,58 @@ direction: rtl
 
         {{< example show_markup="false" >}}
         <p class="lead">
-          حيث وبدون الساحة وقوعها، أي, فقد عل مكّن تمهيد قتيل،. ولم والحزب الشرقي و, أضف بالفشل الخاسر استمرار ان. كل أما وحرمان للإتحاد, ٣٠ سبتمبر استعملت جهة, لعملة الثقيلة المتاخمة على لم. أي نفس دارت والفلبين.
+          هذه قطعة إملائية متميزة، فهي مصممة لتكون بارزة من بين القطع الإملائية الأخرى.
         </p>
         {{< /example >}}
 
         {{< example show_markup="false" >}}
-        <p>يمكنك استخدام علامة <mark>العلامة</mark> لتحديد نص .</p>
+        <p>يمكنك استخدام تصنيف mark <mark>لتحديد</mark> نص.</p>
         <p><del>من المفترض أن يتم التعامل مع هذا السطر كنص محذوف.</del></p>
         <p><s>من المفترض أن يتم التعامل مع هذا السطر على أنه لم يعد دقيقًا.</s></p>
         <p><ins>من المفترض أن يتم التعامل مع هذا السطر كإضافة إلى المستند.</ins></p>
-        <p><u>سيتم عرض هذا السطر كما هو مسطر.</u></p>
-        <p><small>من المفترض أن يتم التعامل مع هذا السطر على أنه طباعة جيدة.</small></p>
-        <p><strong>تم تقديم هذا السطر كنص عريض.</strong></p>
-        <p><em>تم تقديم هذا السطر كنص مائل.</em></p>
+        <p><u>سيتم عرض النص في هذا السطر كما وتحته خط.</u></p>
+        <p><small>من المفترض أن يتم التعامل مع هذا السطر على أنه يحوي تفاصيل صغيرة.</small></p>
+        <p><strong>هذا السطر يحوي نص عريض.</strong></p>
+        <p><em>هذا السطر يحوي نص مائل.</em></p>
         {{< /example >}}
 
         {{< example show_markup="false" >}}
         <blockquote class="blockquote">
-          <p>بين كرسي والمعدات بالولايات تم. الذود اتّجة التقليدية يتم و, حيث وقرى.</p>
+          <p>إقتباس مبهر، موضوع في عنصر blockquote</p>
           <footer class="blockquote-footer">شخص مشهور في <cite title= "عنوان المصدر"> عنوان المصدر </cite></footer>
         </blockquote>
         {{< /example >}}
 
         {{< example show_markup="false" >}}
         <ul class="list-unstyled">
-          <li>معقل الطريق واقتصار أم قام.</li>
-          <li>أمّا ولكسمبورغ ثم جُل, هو.</li>
-          <li>ان وبحلول لمحاكم الخارجية ومن.</li>
-          <li>بها بل العظمى إيطاليا الساحلية.</li>
-          <li>مدن قد وبحلول وأكثرها الدنمارك.
+          <li>هذه قائمة عناصر.</li>
+          <li>بالرغم من أنها مصممة كي لا تظهر كذلك.</li>
+          <li>إلا أنها مجهزة كـ قائمة خلف الكواليس</li>
+          <li>هذا التصميم ينطبق فقد على القائمة الرئيسية</li>
+          <li>القوائم الفرعية
             <ul>
-              <li>به، المشترك إتفاقية.</li>
-              <li>لإعادة الواقعة و.</li>
-              <li>وترك وانتهاءً ضرب.</li>
-              <li>الشتاء العالم، أي.</li>
+              <li>لا تتأثر بهذا التصميم</li>
+              <li>فهي تظهر عليها علامات الترقيم</li>
+              <li>وتحتوي على مساحة فارغة بجوارها</li>
             </ul>
           </li>
-          <li>ودول يتسنّى بتطويق لمّ في.</li>
-          <li>بعض و مرمى يتسنّى, في.</li>
-          <li>أسيا اعلان ومحاولة عل انه.</li>
+          <li>قد يكون هذا التصميم مفيدًا في بعض الأحيان.</li>
         </ul>
         {{< /example >}}
 
         {{< example show_markup="false" >}}
         <ul class="list-inline">
-          <li class="list-inline-item">لمّ مع.</li>
-          <li class="list-inline-item">أم دون.</li>
-          <li class="list-inline-item">ذات بل.</li>
+          <li class="list-inline-item">هذا عنصر في قائمة.</li>
+          <li class="list-inline-item">وهذا أيضًا.</li>
+          <li class="list-inline-item">لكنهم يظهرون متجاورين.</li>
         </ul>
         {{< /example >}}
       </div>
     </article>
     <article class="my-3" id="images">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
-        <h3>صور</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/images" >}}">توثيق</a>
+        <h3>الصور</h3>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/images" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
@@ -170,8 +167,8 @@ direction: rtl
     </article>
     <article class="my-3" id="tables">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
-        <h3>جدول</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/tables" >}}">توثيق</a>
+        <h3>الجداول</h3>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/tables" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
@@ -182,7 +179,7 @@ direction: rtl
             <th scope="col">#</th>
             <th scope="col">الاسم الاول</th>
             <th scope="col">الكنية</th>
-            <th scope="col">اسم مستعار</th>
+            <th scope="col">الاسم المستعار</th>
           </tr>
           </thead>
           <tbody>
@@ -190,18 +187,18 @@ direction: rtl
             <th scope="row">1</th>
             <td>Mark</td>
             <td>Otto</td>
-            <td>@mdo</td>
+            <td><bdo lang="en" dir="ltr">@mdo</bdo></td>
           </tr>
           <tr>
             <th scope="row">2</th>
             <td>Jacob</td>
             <td>Thornton</td>
-            <td>@fat</td>
+            <td><bdo lang="en" dir="ltr">@fat</bdo></td>
           </tr>
           <tr>
             <th scope="row">3</th>
             <td colspan="2">Larry the Bird</td>
-            <td>@twitter</td>
+            <td><bdo lang="en" dir="ltr">@twitter</bdo></td>
           </tr>
           </tbody>
         </table>
@@ -214,7 +211,7 @@ direction: rtl
             <th scope="col">#</th>
             <th scope="col">الاسم الاول</th>
             <th scope="col">الكنية</th>
-            <th scope="col">اسم مستعار</th>
+            <th scope="col">الاسم المستعار</th>
           </tr>
           </thead>
           <tbody>
@@ -222,18 +219,18 @@ direction: rtl
             <th scope="row">1</th>
             <td>Mark</td>
             <td>Otto</td>
-            <td>@mdo</td>
+            <td><bdo lang="en" dir="ltr">@mdo</bdo></td>
           </tr>
           <tr>
             <th scope="row">2</th>
             <td>Jacob</td>
             <td>Thornton</td>
-            <td>@fat</td>
+            <td><bdo lang="en" dir="ltr">@fat</bdo></td>
           </tr>
           <tr>
             <th scope="row">3</th>
             <td colspan="2">Larry the Bird</td>
-            <td>@twitter</td>
+            <td><bdo lang="en" dir="ltr">@twitter</bdo></td>
           </tr>
           </tbody>
         </table>
@@ -251,15 +248,15 @@ direction: rtl
           <tbody>
           <tr>
             <th scope="row">Default</th>
-            <td>زنزانة</td>
-            <td>زنزانة</td>
+            <td>خلية</td>
+            <td>خلية</td>
           </tr>
           {{< table.inline >}}
           {{- range (index $.Site.Data "theme-colors") }}
           <tr class="table-{{ .name }}">
             <th scope="row">{{ .name | title }}</th>
-            <td>زنزانة</td>
-            <td>زنزانة</td>
+            <td>خلية</td>
+            <td>خلية</td>
           </tr>
           {{- end -}}
           {{< /table.inline >}}
@@ -274,7 +271,7 @@ direction: rtl
             <th scope="col">#</th>
             <th scope="col">الاسم الاول</th>
             <th scope="col">الكنية</th>
-            <th scope="col">اسم مستعار</th>
+            <th scope="col">الاسم المستعار</th>
           </tr>
           </thead>
           <tbody>
@@ -282,18 +279,18 @@ direction: rtl
             <th scope="row">1</th>
             <td>Mark</td>
             <td>Otto</td>
-            <td>@mdo</td>
+            <td><bdo lang="en" dir="ltr">@mdo</bdo></td>
           </tr>
           <tr>
             <th scope="row">2</th>
             <td>Jacob</td>
             <td>Thornton</td>
-            <td>@fat</td>
+            <td><bdo lang="en" dir="ltr">@fat</bdo></td>
           </tr>
           <tr>
             <th scope="row">3</th>
             <td colspan="2">Larry the Bird</td>
-            <td>@twitter</td>
+            <td><bdo lang="en" dir="ltr">@twitter</bdo></td>
           </tr>
           </tbody>
         </table>
@@ -302,8 +299,8 @@ direction: rtl
     </article>
     <article class="my-3" id="figures">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
-        <h3>رقم</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/figures" >}}">توثيق</a>
+        <h3>النماذج البيانية</h3>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/content/figures" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
@@ -318,39 +315,39 @@ direction: rtl
   </section>
 
   <section id="forms">
-    <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">نماذج</h2>
+    <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">النماذج</h2>
 
     <article class="my-3" id="overview">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>نظرة عامة</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/overview" >}}">توثيق</a>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/overview" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
         {{< example show_markup="false" >}}
         <form>
           <div class="mb-3">
-            <label for="exampleInputEmail1" class="form-label">عنوان البريد الالكترونى</label>
+            <label for="exampleInputEmail1" class="form-label">البريد الإلكتروني</label>
             <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
-            <div id="emailHelp" class="form-text">لن نشارك بريدك الإلكتروني مع أي شخص آخر.</div>
+            <div id="emailHelp" class="form-text">لن نقوم بمشاركة بريدك الإلكتروني مع أي شخص آخر.</div>
           </div>
           <div class="mb-3">
-            <label for="exampleInputPassword1" class="form-label">كلمه السر</label>
+            <label for="exampleInputPassword1" class="form-label">كلمة السر</label>
             <input type="password" class="form-control" id="exampleInputPassword1">
           </div>
           <div class="mb-3 form-check">
             <input type="checkbox" class="form-check-input" id="exampleCheck1">
-            <label class="form-check-label" for="exampleCheck1">تفقدني</label>
+            <label class="form-check-label" for="exampleCheck1">اخترني</label>
           </div>
           <fieldset class="mb-3">
-            <legend>أزرار الراديو</legend>
+            <legend>أزرار الاختيار الأحادي</legend>
             <div class="form-check">
-              <input type="radio" name="radios" class="form-check-input" id="exampleRadio1">
-              <label class="form-check-label" for="exampleRadio1">الراديو الافتراضي</label>
+              <input type="radio" name="radios" class="form-check-input" id="exampleRadio1" checked>
+              <label class="form-check-label" for="exampleRadio1">الخيار الافتراضي</label>
             </div>
             <div class="mb-3 form-check">
               <input type="radio" name="radios" class="form-check-input" id="exampleRadio2">
-              <label class="form-check-label" for="exampleRadio2">راديو آخر</label>
+              <label class="form-check-label" for="exampleRadio2">خيار آخر</label>
             </div>
           </fieldset>
           <div class="mb-3">
@@ -359,10 +356,10 @@ direction: rtl
           </div>
           <div class="mb-3 form-check form-switch">
             <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
-            <label class="form-check-label" for="flexSwitchCheckChecked">تم تحديد إدخال خانة الاختيار التبديل</label>
+            <label class="form-check-label" for="flexSwitchCheckChecked">زر على شكل مفتاح اختيار.</label>
           </div>
           <div class="mb-3">
-            <label for="customRange3" class="form-label">نطاق المثال</label>
+            <label for="customRange3" class="form-label">مثال على حقل اختيار نطاقي</label>
             <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
           </div>
           <button type="submit" class="btn btn-primary">إرسال</button>
@@ -372,8 +369,8 @@ direction: rtl
     </article>
     <article class="my-3" id="disabled-forms">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
-        <h3>أشكال المعطلين</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/overview" >}}#disabled-forms">توثيق</a>
+        <h3>الحقول المعطلة</h3>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/overview" >}}#disabled-forms">دليل الإستخدام</a>
       </div>
 
       <div>
@@ -381,44 +378,44 @@ direction: rtl
         <form>
           <fieldset disabled aria-label="مثال على مجموعة الحقول المعطلة">
             <div class="mb-3">
-              <label for="disabledTextInput" class="form-label">إدخال معطل</label>
-              <input type="text" id="disabledTextInput" class="form-control" placeholder="إدخال معطل">
+              <label for="disabledTextInput" class="form-label">حقل إدخال معطل</label>
+              <input type="text" id="disabledTextInput" class="form-control" placeholder="حقل إدخال معطل">
             </div>
             <div class="mb-3">
-              <label for="disabledSelect" class="form-label">حدد القائمة معطل</label>
+              <label for="disabledSelect" class="form-label">قائمة اختيار معطلة</label>
               <select id="disabledSelect" class="form-select">
-                <option>حدد معطل</option>
+                <option>خيار معطل</option>
               </select>
             </div>
             <div class="mb-3">
               <div class="form-check">
                 <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
                 <label class="form-check-label" for="disabledFieldsetCheck">
-                  لا يمكن التحقق من هذا
+                  زر اختيار معطل
                 </label>
               </div>
             </div>
             <fieldset class="mb-3">
-              <legend>أزرار اختيار المعوقين</legend>
+              <legend>أزرار اختيار أحادي معطلين</legend>
               <div class="form-check">
                 <input type="radio" name="radios" class="form-check-input" id="disabledRadio1" disabled>
-                <label class="form-check-label" for="disabledRadio1">راديو معطل</label>
+                <label class="form-check-label" for="disabledRadio1">خيار معطل</label>
               </div>
               <div class="mb-3 form-check">
                 <input type="radio" name="radios" class="form-check-input" id="disabledRadio2" disabled>
-                <label class="form-check-label" for="disabledRadio2">راديو آخر</label>
+                <label class="form-check-label" for="disabledRadio2">خيار آخر معطل</label>
               </div>
             </fieldset>
             <div class="mb-3">
-              <label class="form-label" for="disabledCustomFile">تحميل معطل</label>
+              <label class="form-label" for="disabledCustomFile">رفع معطل</label>
               <input type="file" class="form-control" id="disabledCustomFile" disabled>
             </div>
             <div class="mb-3 form-check form-switch">
               <input class="form-check-input" type="checkbox" id="disabledSwitchCheckChecked" checked disabled>
-              <label class="form-check-label" for="disabledSwitchCheckChecked">تم تعطيل إدخال خانة الاختيار التبديل</label>
+              <label class="form-check-label" for="disabledSwitchCheckChecked">زر معطل على شكل مفتاح اختيار.</label>
             </div>
             <div class="mb-3">
-              <label for="disabledRange" class="form-label">نطاق المعوقين</label>
+              <label for="disabledRange" class="form-label">حقل اختيار نطاقي معطل</label>
               <input type="range" class="form-range" min="0" max="5" step="0.5" id="disabledRange">
             </div>
             <button type="submit" class="btn btn-primary">إرسال</button>
@@ -429,18 +426,18 @@ direction: rtl
     </article>
     <article class="my-3" id="sizing">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
-        <h3>تحجيم</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/form-control" >}}#sizing">توثيق</a>
+        <h3>الأحجام</h3>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/form-control" >}}#sizing">دليل الإستخدام</a>
       </div>
 
       <div>
         {{< example show_markup="false" >}}
         <div class="mb-3">
-          <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg مثال">
+          <input class="form-control form-control-lg" type="text" placeholder="حقل إدخال كبير" aria-label=".form-control-lg مثال">
         </div>
         <div class="mb-3">
           <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg مثال">
-            <option selected>افتح قائمة التحديد هذه</option>
+            <option selected>افتح قائمة الاختيار هذه</option>
             <option value="1">واحد</option>
             <option value="2">اثنان</option>
             <option value="3">ثلاثة</option>
@@ -453,11 +450,11 @@ direction: rtl
 
         {{< example show_markup="false" >}}
         <div class="mb-3">
-          <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm مثال">
+          <input class="form-control form-control-sm" type="text" placeholder="حقل إدخال صغير" aria-label=".form-control-sm مثال">
         </div>
         <div class="mb-3">
           <select class="form-select form-select-sm" aria-label=".form-select-sm مثال">
-            <option selected>افتح قائمة التحديد هذه</option>
+            <option selected>افتح قائمة الاختيار هذه</option>
             <option value="1">واحد</option>
             <option value="2">اثنان</option>
             <option value="3">ثلاثة</option>
@@ -472,28 +469,28 @@ direction: rtl
     <article class="my-3" id="input-group">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>مجموعة الإدخال</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/input-group" >}}">توثيق</a>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/input-group" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
         {{< example show_markup="false" >}}
         <div class="input-group mb-3">
-          <span class="input-group-text" id="basic-addon1">@</span>
-          <input type="text" class="form-control" placeholder="Username" aria-label="اسم المستخدم" aria-describedby="basic-addon1">
+          <span class="input-group-text" id="basic-addon1">أنا اسمي</span>
+          <input type="text" class="form-control" placeholder="فلان الفلاني" aria-label="الاسم" aria-describedby="basic-addon1">
         </div>
         <div class="input-group mb-3">
-          <input type="text" class="form-control" placeholder="Recipient's username" aria-label="اسم مستخدم المستلم" aria-describedby="basic-addon2">
-          <span class="input-group-text" id="basic-addon2">@example.com</span>
+          <input type="text" class="form-control" placeholder="أنا أحب الكعك والقهوة" aria-label="الطعام المفضل" aria-describedby="basic-addon2">
+          <span class="input-group-text" id="basic-addon2">وغيرها</span>
         </div>
-        <label for="basic-url" class="form-label">عنوان URL المخصص الخاص بك</label>
+        <label for="basic-url" class="form-label">عنوان حسابك الشخصي</label>
         <div class="input-group mb-3">
-          <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
           <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
+          <span class="input-group-text" id="basic-addon3"><bdo lang="en" dir="ltr">https://example.com/users/</bdo></span>
         </div>
         <div class="input-group mb-3">
-          <span class="input-group-text">$</span>
+          <span class="input-group-text"><bdo lang="en" dir="ltr">.00</bdo></span>
           <input type="text" class="form-control" aria-label="المبلغ (لأقرب دولار)">
-          <span class="input-group-text">.00</span>
+          <span class="input-group-text">$</span>
         </div>
         <div class="input-group">
           <span class="input-group-text">مع textarea</span>
@@ -504,8 +501,8 @@ direction: rtl
     </article>
     <article class="my-3" id="floating-labels">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
-        <h3>تسميات عائمة</h3>
-        <a class="d-flex align-items-center" href="{{< docsref "/forms/floating-labels" >}}">Documentation</a>
+        <h3>الحقول ذوي العناوين العائمة</h3>
+        <a class="d-flex align-items-center" href="{{< docsref "/forms/floating-labels" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
@@ -513,11 +510,11 @@ direction: rtl
         <form>
           <div class="form-floating mb-3">
             <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
-            <label for="floatingInput">عنوان بريد الكتروني</label>
+            <label for="floatingInput">البريد الالكتروني</label>
           </div>
           <div class="form-floating">
-            <input type="password" class="form-control" id="floatingPassword" placeholder="كلمه السر">
-            <label for="floatingPassword">كلمه السر</label>
+            <input type="password" class="form-control" id="floatingPassword" placeholder="كلمة السر">
+            <label for="floatingPassword">كلمة السر</label>
           </div>
         </form>
         {{< /example >}}
@@ -526,7 +523,7 @@ direction: rtl
     <article class="my-3" id="validation">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>التحقق</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/validation" >}}">توثيق</a>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/forms/validation" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
@@ -536,23 +533,23 @@ direction: rtl
             <label for="validationServer01" class="form-label">الاسم الاول</label>
             <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
             <div class="valid-feedback">
-              تبدو جيدا!
+              يبدو صحيحًا!
             </div>
           </div>
           <div class="col-md-4">
             <label for="validationServer02" class="form-label">الكنية</label>
             <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
             <div class="valid-feedback">
-              تبدو جيدا!
+              يبدو صحيحًا!
             </div>
           </div>
           <div class="col-md-4">
             <label for="validationServerUsername" class="form-label">اسم المستخدم</label>
             <div class="input-group has-validation">
-              <span class="input-group-text" id="inputGroupPrepend3">@</span>
               <input type="text" class="form-control is-invalid" id="validationServerUsername" aria-describedby="inputGroupPrepend3" required>
+              <span class="input-group-text" id="inputGroupPrepend3">@</span>
               <div class="invalid-feedback">
-                يرجى اختيار اسم المستخدم.
+                يرجى اختيار اسم مستخدم.
               </div>
             </div>
           </div>
@@ -560,39 +557,39 @@ direction: rtl
             <label for="validationServer03" class="form-label">مدينة</label>
             <input type="text" class="form-control is-invalid" id="validationServer03" required>
             <div class="invalid-feedback">
-              الرجاء إدخال مدينة صالحة.
+              يرجى إدخال مدينة صحيحة.
             </div>
           </div>
           <div class="col-md-3">
             <label for="validationServer04" class="form-label">حالة</label>
             <select class="form-select is-invalid" id="validationServer04" required>
-              <option selected disabled value="">أختر...</option>
+              <option selected disabled value="">اختر...</option>
               <option>...</option>
             </select>
             <div class="invalid-feedback">
-              الرجاء تحديد ولاية صالحة.
+              يرجى اختيار ولاية صحيحة.
             </div>
           </div>
           <div class="col-md-3">
             <label for="validationServer05" class="form-label">الرمز البريدي</label>
             <input type="text" class="form-control is-invalid" id="validationServer05" required>
             <div class="invalid-feedback">
-              الرجاء تقديم رمز بريدي صالح.
+              يرجى إدخال رمز بريدي صحيح.
             </div>
           </div>
           <div class="col-12">
             <div class="form-check">
               <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
               <label class="form-check-label" for="invalidCheck3">
-                وافق على الشروط والأحكام
+                أوافق على الشروط والأحكام
               </label>
               <div class="invalid-feedback">
-                يجب أن توافق قبل التقديم.
+                تجب الموافقة قبل إرسال النموذج.
               </div>
             </div>
           </div>
           <div class="col-12">
-            <button class="btn btn-primary" type="submit">تقديم النموذج</button>
+            <button class="btn btn-primary" type="submit">إرسال النموذج</button>
           </div>
         </form>
         {{< /example >}}
@@ -601,12 +598,12 @@ direction: rtl
   </section>
 
   <section id="components">
-    <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">مكونات</h2>
+    <h2 class="sticky-xl-top fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">العناصر</h2>
 
     <article class="my-3" id="accordion">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
-        <h3>انهيارالأكورديون</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/accordion" >}}">توثيق</a>
+        <h3>المطوية</h3>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/accordion" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
@@ -615,36 +612,36 @@ direction: rtl
           <div class="accordion-item">
             <h4 class="accordion-header" id="headingOne">
               <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
-                عنصر الأكورديون #1
+                عنصر المطوية الأول
               </button>
             </h4>
             <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
               <div class="accordion-body">
-                أخر جمعت اليها وحرمان بـ, لمّ حالية الربيع، ثم, بل حين سكان الأراضي. من سكان الإتفاقية عدم, بقصف واعتلاء بل جهة, ولم وبعد المؤلّفة هو. أمدها واقتصار ويكيبيديا إذ بعد, الطرفين والعتاد عل قبل. أدنى المؤلّفة إذ عدم, وبعد الثالث في جهة.
+                <strong>هذا هو محتوى عنصر المطوية الأول.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootsrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
               </div>
             </div>
           </div>
           <div class="accordion-item">
             <h4 class="accordion-header" id="headingTwo">
               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
-                عنصر الأكورديون #2
+                عنصر المطوية الثاني
               </button>
             </h4>
             <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
               <div class="accordion-body">
-                أخر جمعت اليها وحرمان بـ, لمّ حالية الربيع، ثم, بل حين سكان الأراضي. من سكان الإتفاقية عدم, بقصف واعتلاء بل جهة, ولم وبعد المؤلّفة هو. أمدها واقتصار ويكيبيديا إذ بعد, الطرفين والعتاد عل قبل. أدنى المؤلّفة إذ عدم, وبعد الثالث في جهة.
+                <strong>هذا هو محتوى عنصر المطوية الثاني.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootsrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
               </div>
             </div>
           </div>
           <div class="accordion-item">
             <h4 class="accordion-header" id="headingThree">
               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
-                عنصر الأكورديون #3
+                عنصر المطوية الثالث
               </button>
             </h4>
             <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
               <div class="accordion-body">
-                أخر جمعت اليها وحرمان بـ, لمّ حالية الربيع، ثم, بل حين سكان الأراضي. من سكان الإتفاقية عدم, بقصف واعتلاء بل جهة, ولم وبعد المؤلّفة هو. أمدها واقتصار ويكيبيديا إذ بعد, الطرفين والعتاد عل قبل. أدنى المؤلّفة إذ عدم, وبعد الثالث في جهة.
+                <strong>هذا هو محتوى عنصر المطوية الثالث.</strong> سيكون المحتوى مخفيًا بشكل إفتراضي حتى يقوم Bootstrap بإضافة الكلاسات اللازمة لكل عنصر في المطوية. هذه الكلاسات تتحكم بالمظهر العام ووتتحكم أيضا بإظهار وإخفاء أقسام المطوية عبر حركات CSS الإنتقالية. يمكنك تعديل أي من هذه عبر كلاسات CSS خاصة بك، او عبر تغيير القيم الإفتراضية المقدمة من Bootsrap. من الجدير بالذكر أنه يمكن وضع أي كود HTML هنا، ولكن الحركة الإنتقالية قد تحد من الoverflow.
               </div>
             </div>
           </div>
@@ -654,8 +651,8 @@ direction: rtl
     </article>
     <article class="my-3" id="alerts">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
-        <h3>إنذار</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/alerts" >}}">توثيق</a>
+        <h3>الإنذارات</h3>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/alerts" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
@@ -681,20 +678,20 @@ direction: rtl
     </article>
     <article class="my-3" id="badge">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
-        <h3>شارة</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/badge" >}}">توثيق</a>
+        <h3>الشارة</h3>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/badge" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
         {{< example show_markup="false" >}}
-        <p class="h1">عنوان المثال <span class="badge bg-primary">جديد</span></p>
-        <p class="h2">عنوان المثال <span class="badge bg-secondary">جديد</span></p>
-        <p class="h3">عنوان المثال <span class="badge bg-success">جديد</span></p>
-        <p class="h4">عنوان المثال <span class="badge bg-danger">جديد</span></p>
-        <p class="h5">عنوان المثال <span class="badge bg-warning text-dark">جديد</span></p>
-        <p class="h6">عنوان المثال <span class="badge bg-info text-dark">جديد</span></p>
-        <p class="h6">عنوان المثال <span class="badge bg-light text-dark">جديد</span></p>
-        <p class="h6">عنوان المثال <span class="badge bg-dark">جديد</span></p>
+        <p class="h1">مثال على عنوان <span class="badge bg-primary">جديد</span></p>
+        <p class="h2">مثال على عنوان <span class="badge bg-secondary">جديد</span></p>
+        <p class="h3">مثال على عنوان <span class="badge bg-success">جديد</span></p>
+        <p class="h4">مثال على عنوان <span class="badge bg-danger">جديد</span></p>
+        <p class="h5">مثال على عنوان <span class="badge bg-warning text-dark">جديد</span></p>
+        <p class="h6">مثال على عنوان <span class="badge bg-info text-dark">جديد</span></p>
+        <p class="h6">مثال على عنوان <span class="badge bg-light text-dark">جديد</span></p>
+        <p class="h6">مثال على عنوان <span class="badge bg-dark">جديد</span></p>
         {{< /example >}}
 
         {{< example show_markup="false" >}}
@@ -707,16 +704,16 @@ direction: rtl
     </article>
     <article class="my-3" id="breadcrumb">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
-        <h3>مسار التنقل</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/breadcrumb" >}}">توثيق</a>
+        <h3>مسار التنقل التفصيلي (فتات الخبز)</h3>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/breadcrumb" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
         {{< example show_markup="false" >}}
-        <nav aria-label="مسار الخبز">
+        <nav aria-label="فتات الخبز">
           <ol class="breadcrumb">
             <li class="breadcrumb-item"><a href="#">الصفحة الرئيسية</a></li>
-            <li class="breadcrumb-item"><a href="#">مكتبة</a></li>
+            <li class="breadcrumb-item"><a href="#">المكتبة</a></li>
             <li class="breadcrumb-item active" aria-current="page">البيانات</li>
           </ol>
         </nav>
@@ -725,8 +722,8 @@ direction: rtl
     </article>
     <article class="my-3" id="buttons">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
-        <h3>أزرار</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/buttons" >}}">توثيق</a>
+        <h3>الأزرار</h3>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/buttons" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
@@ -737,7 +734,7 @@ direction: rtl
         {{- end -}}
         {{< /buttons.inline >}}
 
-        <button type="button" class="btn btn-link">حلقة الوصل</button>
+        <button type="button" class="btn btn-link">رابط</button>
         {{< /example >}}
 
         {{< example show_markup="false" >}}
@@ -758,12 +755,12 @@ direction: rtl
     <article class="my-3" id="button-group">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>مجموعة الأزرار</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/button-group" >}}">توثيق</a>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/button-group" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
         {{< example show_markup="false" >}}
-        <div class="btn-toolbar" role="toolbar" aria-label="شريط الأدوات مع مجموعات الأزرار">
+        <div class="btn-toolbar" role="toolbar" aria-label="شريط أدوات مع مجموعات أزرار">
           <div class="btn-group me-2" role="group" aria-label="المجموعة الأولى">
             <button type="button" class="btn btn-secondary">1</button>
             <button type="button" class="btn btn-secondary">2</button>
@@ -784,8 +781,8 @@ direction: rtl
     </article>
     <article class="my-3" id="card">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
-        <h3>بطاقة</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/card" >}}">توثيق</a>
+        <h3>البطاقة</h3>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/card" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
@@ -812,7 +809,7 @@ direction: rtl
                 <a href="#" class="btn btn-primary">اذهب لمكان ما</a>
               </div>
               <div class="card-footer text-muted">
-                2 منذ أيام
+                منذ يومان
               </div>
             </div>
           </div>
@@ -823,9 +820,9 @@ direction: rtl
                 <p class="card-text">بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p>
               </div>
               <ul class="list-group list-group-flush">
-                <li class="list-group-item">أسر كل أراض.</li>
-                <li class="list-group-item">شرسة مشارف واستمرت.</li>
-                <li class="list-group-item">مكن إذ كانتا.</li>
+                <li class="list-group-item">عنصر</li>
+                <li class="list-group-item">عنصر آخر</li>
+                <li class="list-group-item">عنصر ثالث</li>
               </ul>
               <div class="card-body">
                 <a href="#" class="card-link">رابط البطاقة</a>
@@ -842,7 +839,7 @@ direction: rtl
                 <div class="col-md-8">
                   <div class="card-body">
                     <h5 class="card-title">عنوان البطاقة</h5>
-                    <p class="card-text">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
+                    <p class="card-text">هذه بطاقة أعرض مع نص داعم تحتها كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
                     <p class="card-text"><small class="text-muted">آخر تحديث منذ 3 دقائق</small></p>
                   </div>
                 </div>
@@ -855,8 +852,8 @@ direction: rtl
     </article>
     <article class="my-3" id="carousel">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
-        <h3>شرائح عرض</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/carousel" >}}">توثيق</a>
+        <h3>شرائح العرض</h3>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/carousel" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
@@ -871,22 +868,22 @@ direction: rtl
             <div class="carousel-item active">
               {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="الشريحة الأولى" >}}
               <div class="carousel-caption d-none d-md-block">
-                <h5>تسمية الشريحة الأولى</h5>
-                <p>إستعمل تحرّكت المتحدة كان ما. لم وفي الشرقي المتاخمة تعد.</p>
+                <h5>عنوان الشريحة الأولى</h5>
+                <p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p>
               </div>
             </div>
             <div class="carousel-item">
               {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#444" background="#666" text="الشريحة الثانية" >}}
               <div class="carousel-caption d-none d-md-block">
-                <h5>تسمية الشريحة الثانية</h5>
-                <p>أجزاء الخاسرة التّحول ٣٠ انه, وصل أن عالمية التحالف التجارية.</p>
+                <h5>عنوان الشريحة الثانية</h5>
+                <p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p>
               </div>
             </div>
             <div class="carousel-item">
               {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="الشريحة الثالثة" >}}
               <div class="carousel-caption d-none d-md-block">
-                <h5>تسمية الشريحة الثالثة</h5>
-                <p>ان فقد ترتيب والديون. وتتحمّل الحيلولة أخذ قد. ضرب بل.</p>
+                <h5>عنوان الشريحة الثالثة</h5>
+                <p>محتوى وصفي يعبئ فراغ الشريحة الأولى.</p>
               </div>
             </div>
           </div>
@@ -896,7 +893,7 @@ direction: rtl
           </button>
           <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
             <span class="carousel-control-next-icon" aria-hidden="true"></span>
-            <span class="visually-hidden">التالى</span>
+            <span class="visually-hidden">التالي</span>
           </button>
         </div>
         {{< /example >}}
@@ -904,8 +901,8 @@ direction: rtl
     </article>
     <article class="my-3" id="dropdowns">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
-        <h3>هبوط قطرة</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/dropdowns" >}}">توثيق</a>
+        <h3>القوائم المنسدلة</h3>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/dropdowns" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
@@ -916,7 +913,7 @@ direction: rtl
               زر القائمة المنسدلة
             </button>
             <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonSM">
-              <li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li>
+              <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
               <li><a class="dropdown-item" href="#">عمل</a></li>
               <li><a class="dropdown-item" href="#">عمل آخر</a></li>
               <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
@@ -929,7 +926,7 @@ direction: rtl
               زر القائمة المنسدلة
             </button>
             <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-              <li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li>
+              <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
               <li><a class="dropdown-item" href="#">عمل</a></li>
               <li><a class="dropdown-item" href="#">عمل آخر</a></li>
               <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
@@ -942,7 +939,7 @@ direction: rtl
               زر القائمة المنسدلة
             </button>
             <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLG">
-              <li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li>
+              <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
               <li><a class="dropdown-item" href="#">عمل</a></li>
               <li><a class="dropdown-item" href="#">عمل آخر</a></li>
               <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
@@ -1026,10 +1023,10 @@ direction: rtl
         <div class="btn-group w-100 align-items-center justify-content-between flex-wrap">
           <div class="dropend">
             <button class="btn btn-secondary dropdown-toggle" type="button" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
-              زر Dropend
+              زر القائمة المنسدلة لليسار
             </button>
             <ul class="dropdown-menu" aria-labelledby="dropendMenuButton">
-              <li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li>
+              <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
               <li><a class="dropdown-item" href="#">عمل</a></li>
               <li><a class="dropdown-item" href="#">عمل آخر</a></li>
               <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
@@ -1039,10 +1036,10 @@ direction: rtl
           </div>
           <div class="dropup">
             <button class="btn btn-secondary dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
-              زر Dropup
+              زر القائمة المنسدلة للأعلى
             </button>
             <ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
-              <li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li>
+              <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
               <li><a class="dropdown-item" href="#">عمل</a></li>
               <li><a class="dropdown-item" href="#">عمل آخر</a></li>
               <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
@@ -1052,10 +1049,10 @@ direction: rtl
           </div>
           <div class="dropstart">
             <button class="btn btn-secondary dropdown-toggle" type="button" id="dropstartMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
-              زر Dropstart
+              زر القائمة المنسدلة لليمين
             </button>
             <ul class="dropdown-menu" aria-labelledby="dropstartMenuButton">
-              <li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li>
+              <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
               <li><a class="dropdown-item" href="#">عمل</a></li>
               <li><a class="dropdown-item" href="#">عمل آخر</a></li>
               <li><a class="dropdown-item" href="#">شيء آخر هنا</a></li>
@@ -1070,10 +1067,10 @@ direction: rtl
         <div class="btn-group">
           <div class="dropdown">
             <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownRightMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
-              قائمة بمحاذاة النهاية
+              قائمة منسدلة بمحاذاة نهاية الزر
             </button>
             <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownRightMenuButton">
-              <li><h6 class="dropdown-header">رأس القائمة المنسدلة</h6></li>
+              <li><h6 class="dropdown-header">عنوان القائمة المنسدلة</h6></li>
               <li><a class="dropdown-item" href="#">عمل</a></li>
               <li><a class="dropdown-item" href="#">عمل آخر</a></li>
               <li><hr class="dropdown-divider"></li>
@@ -1086,34 +1083,34 @@ direction: rtl
     </article>
     <article class="my-3" id="list-group">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
-        <h3>مجموعة القوائم</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/list-group" >}}">توثيق</a>
+        <h3>مجموعة العناصر</h3>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/list-group" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
         {{< example show_markup="false" >}}
         <ul class="list-group">
-          <li class="list-group-item active" aria-current="true">الفرنسية الأثناء، أي.</li>
-          <li class="list-group-item disabled" aria-disabled="true">كلّ في تعداد.</li>
-          <li class="list-group-item">وتم الأخذ أساسي.</li>
-          <li class="list-group-item">لدحر بشرية ابتدعها.</li>
-          <li class="list-group-item">لكون أسيا ولاتّساع.</li>
+          <li class="list-group-item disabled" aria-disabled="true">عنصر معطل</li>
+          <li class="list-group-item">عنصر ثاني</li>
+          <li class="list-group-item">عنصر ثالث</li>
+          <li class="list-group-item">عنصر رابع</li>
+          <li class="list-group-item">وعنصر خامس أيضًا</li>
         </ul>
         {{< /example >}}
 
         {{< example show_markup="false" >}}
         <ul class="list-group list-group-flush">
-          <li class="list-group-item">الفرنسية الأثناء، أي.</li>
-          <li class="list-group-item">كلّ في تعداد.</li>
-          <li class="list-group-item">وتم الأخذ أساسي.</li>
-          <li class="list-group-item">لدحر بشرية ابتدعها.</li>
-          <li class="list-group-item">لكون أسيا ولاتّساع.</li>
+          <li class="list-group-item">عنصر</li>
+          <li class="list-group-item">عنصر ثاني</li>
+          <li class="list-group-item">عنصر ثالث</li>
+          <li class="list-group-item">عنصر رابع</li>
+          <li class="list-group-item">وعنصر خامس أيضًا</li>
         </ul>
         {{< /example >}}
 
         {{< example show_markup="false" >}}
         <div class="list-group">
-          <a href="#" class="list-group-item list-group-item-action">كلّ في تعداد.</a>
+          <a href="#" class="list-group-item list-group-item-action">عنصر مجموعة قائمة default بسيط</a>
           {{< list.inline >}}
           {{- range (index $.Site.Data "theme-colors") }}
           <a href="#" class="list-group-item list-group-item-action list-group-item-{{ .name }}">عنصر مجموعة قائمة {{ .name }} بسيط</a>
@@ -1125,24 +1122,24 @@ direction: rtl
     </article>
     <article class="my-3" id="modal">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
-        <h3>مشروط</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/modal" >}}">توثيق</a>
+        <h3>الصندوق العائم</h3>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/modal" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
         {{< example show_markup="false" >}}
         <div class="d-flex justify-content-between flex-wrap">
           <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalDefault">
-            إطلاق نموذج تجريبي
+            إطلاق صندوق عائم تجريبي
           </button>
           <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropLive">
-            إطلاق مشروط خلفية ثابتة
+            إطلاق صندوق عائم عالق
           </button>
           <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable">
-            مشروط قابل للتمرير تتمركز عموديًا
+            صندوق عائم متنصف عاموديًا وقابل للتمرير
           </button>
           <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">
-            شاشة كاملة
+            صندوق عائم يملأ الشاشة
           </button>
         </div>
         {{< /example >}}
@@ -1151,15 +1148,15 @@ direction: rtl
     <article class="my-3" id="navs">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>التنقل</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/navs-tabs" >}}">توثيق</a>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/navs-tabs" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
         {{< example show_markup="false" >}}
         <nav class="nav">
-          <a class="nav-link active" aria-current="page" href="#">نشيط</a>
-          <a class="nav-link" href="#">حلقة الوصل</a>
-          <a class="nav-link" href="#">حلقة الوصل</a>
+          <a class="nav-link active" aria-current="page" href="#">نشط</a>
+          <a class="nav-link" href="#">رابط</a>
+          <a class="nav-link" href="#">رابط</a>
           <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">معطل</a>
         </nav>
         {{< /example >}}
@@ -1169,18 +1166,18 @@ direction: rtl
           <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
             <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">الصفحة الرئيسية</button>
             <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">الملف الشخصي</button>
-            <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">اتصل</button>
+            <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">اتصل بنا</button>
           </div>
         </nav>
         <div class="tab-content" id="nav-tabContent">
           <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
-            <p class="px-3">هو أسيا والإتحاد أضف, فشكّل الإتفاقية ذلك في. اكتوبر والعتاد و لمّ, وفي أم ٢٠٠٤ وإقامة الانجليزية. وجزر المضي التقليدي ان أما. كلا لإنعدام استراليا، بـ, ٣٠ أضف بوابة أوزار مساعدة. ما السيطرة الأرضية دار, هو بال الساحة الموسوعة.</p>
+            <p class="px-3">محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الصفحة الرئيسية. إذن، أمامنا بعض التحدّيات الصعبة. لكن لا يمكننا أن نعتمد على التطورات التكنولوجية وحدها في ميدان قوى السوق الحرة، لإخراجنا من هذه الورطة، لا سيّما أنها نفسها، مقرونة بالافتقار إلى البصيرة، هي التي أودت بنا إلى هذا التبدُّل المناخي في الدرجة الأولى.</p>
           </div>
           <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
-            <p class="px-3">بفرض البشريةً ذلك أي, ٣٠ تنفّس ليركز الإطلاق جُل. يكن ألمّ أمام في. بفرض الصينية الخاسرة هو لها. ومن معاملة وحلفاؤها كل. بلا يعادل العظمى مع. بـ بحث وجزر الصعداء الأعمال, لكون نتيجة هذا من. مع ثانية أوروبا بحث, كلّ بتطويق واستمرت أن.</p>
+            <p class="px-3">محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الملف الشخصي. معظم البشر في بلدان العالَم النامي، لم يقتنوا بعد مكيّفهم الأول، والمشكلة إلى ازدياد. فمعظم البلدان النامية هي من البلدان الأشد حرارة والأكثر اكتظاظًا بالسكان في العالم.</p>
           </div>
           <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
-            <p class="px-3">كلا تم وزارة الأسيوي, جهة خطّة سنغافورة إذ. فقد أن قبضتهم شواطيء, مسارح أوزار إبّان كلّ أي. أحكم استمرار مدن تم, الى إتفاقية الإنذار، ان, ما هذه أراض وصغار استمرار. دنو هو تجهيز أصقاع الأعمال. و وأزيز إيطاليا ومن, بـ يبق السفن أدوات, اتفاق شواطيء الأوروبي ذلك عن.</p>
+            <p class="px-3">محتوى لتوضيح كيف يعمل التبويب. هذا المحتوى مرتبط بتبويب الاتصال بنا. أمامنا بعض التحدّيات الصعبة. لكن لا يمكننا أن نعتمد على التطورات التكنولوجية وحدها في ميدان قوى السوق الحرة، بل يجب وضع معايير جدوى جديدة لشركات البناء ومعايير أعلى لجدوى التكييف من أجل تحفيز الحلول المستدامة قانونيًا.</p>
           </div>
         </div>
         {{< /example >}}
@@ -1188,13 +1185,13 @@ direction: rtl
         {{< example show_markup="false" >}}
         <ul class="nav nav-pills">
           <li class="nav-item">
-            <a class="nav-link active" aria-current="page" href="#">نشيط</a>
+            <a class="nav-link active" aria-current="page" href="#">نشط</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="#">حلقة الوصل</a>
+            <a class="nav-link" href="#">رابط</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="#">حلقة الوصل</a>
+            <a class="nav-link" href="#">رابط</a>
           </li>
           <li class="nav-item">
             <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">معطل</a>
@@ -1206,7 +1203,7 @@ direction: rtl
     <article class="my-3" id="navbar">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>شريط التنقل</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/navbar" >}}">توثيق</a>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/navbar" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
@@ -1226,11 +1223,11 @@ direction: rtl
                   <a class="nav-link active" aria-current="page" href="#">الصفحة الرئيسية</a>
                 </li>
                 <li class="nav-item">
-                  <a class="nav-link" href="#">حلقة الوصل</a>
+                  <a class="nav-link" href="#">رابط</a>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                    اسقاط
+                    قائمة منسدلة
                   </a>
                   <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                     <li><a class="dropdown-item" href="#">عمل</a></li>
@@ -1265,11 +1262,11 @@ direction: rtl
                   <a class="nav-link active" aria-current="page" href="#">الصفحة الرئيسية</a>
                 </li>
                 <li class="nav-item">
-                  <a class="nav-link" href="#">حلقة الوصل</a>
+                  <a class="nav-link" href="#">رابط</a>
                 </li>
                 <li class="nav-item dropdown">
                   <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                    اسقاط
+                    قائمة منسدلة
                   </a>
                   <ul class="dropdown-menu" aria-labelledby="navbarDropdown2">
                     <li><a class="dropdown-item" href="#">عمل</a></li>
@@ -1295,7 +1292,7 @@ direction: rtl
     <article class="my-3" id="pagination">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>ترقيم الصفحات</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/pagination" >}}">توثيق</a>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/pagination" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
@@ -1323,7 +1320,7 @@ direction: rtl
             <li class="page-item"><a class="page-link" href="#">2</a></li>
             <li class="page-item"><a class="page-link" href="#">3</a></li>
             <li class="page-item">
-              <a class="page-link" href="#" aria-label="التالى">
+              <a class="page-link" href="#" aria-label="التالي">
                 <span aria-hidden="true">&raquo;</span>
               </a>
             </li>
@@ -1352,27 +1349,29 @@ direction: rtl
     </article>
     <article class="my-3" id="popovers">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
-        <h3>بوبوفيرس</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/popovers" >}}">توثيق</a>
+        <h3>الصناديق المنبثقة</h3>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/popovers" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
         {{< example show_markup="false" >}}
-        <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="عنوان Popover" data-bs-content="وإليك بعض المحتويات الرائعة. إنه ممتع للغاية. حق؟">انقر لتبديل المنبثقة</button>
+        <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="عنوان الصندوق المنبثق" data-bs-content="وإليك بعض المحتويات الرائعة. إنه آسر للغاية. أليس كذلك؟">
+        انقر لعرض/إخفاء الصندوق المنبثق
+        </button>
         {{< /example >}}
 
         {{< example show_markup="false" >}}
-        <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="يرتبط لفرنسا ذلك تم, ان إعلان أدوات إنطلاق.">
-          انبثاق في الأعلى
+        <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!">
+          انبثاق إلى الأعلى
         </button>
-        <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="يرتبط لفرنسا ذلك تم, ان إعلان أدوات إنطلاق.">
-          popover في النهاية
+        <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!">
+          انبثاق إلى اليسار
         </button>
-        <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="يرتبط لفرنسا ذلك تم, ان إعلان أدوات إنطلاق.">
-          انبثاق في الأسفل
+        <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!">
+          انبثاق إلى الأسفل
         </button>
-        <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="يرتبط لفرنسا ذلك تم, ان إعلان أدوات إنطلاق.">
-          popover عند البدء
+        <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="نجمٌ و لكنه ليس في السماء، بل في أعماق البحار و المحيطات!">
+          انبثاق إلى اليمين
         </button>
         {{< /example >}}
       </div>
@@ -1380,7 +1379,7 @@ direction: rtl
     <article class="my-3" id="progress">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
         <h3>شريط التقدم</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/progress" >}}">توثيق</a>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/progress" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
@@ -1412,8 +1411,8 @@ direction: rtl
     </article>
     <article class="my-3" id="scrollspy">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
-        <h3>مخطوطة</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/scrollspy" >}}">توثيق</a>
+        <h3>المخطوطة</h3>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/scrollspy" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
@@ -1422,13 +1421,13 @@ direction: rtl
             <a class="navbar-brand" href="#">شريط التنقل</a>
             <ul class="nav nav-pills">
               <li class="nav-item">
-                <a class="nav-link" href="#fat">@fat</a>
+                <a class="nav-link" href="#fat"><bdi lang="en" dir="ltr">@fat</bdi></a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="#mdo">@mdo</a>
+                <a class="nav-link" href="#mdo"><bdi lang="en" dir="ltr">@mdo</bdi></a>
               </li>
               <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">اسقاط</a>
+                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">قائمة منسدلة</a>
                 <ul class="dropdown-menu">
                   <li><a class="dropdown-item" href="#one">واحد</a></li>
                   <li><a class="dropdown-item" href="#two">اثنان</a></li>
@@ -1439,25 +1438,25 @@ direction: rtl
             </ul>
           </nav>
           <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example">
-            <h4 id="fat">@fat</h4>
-            <p>إنطلاق العالمي ما هذه, لم فسقط عُقر الهادي جُل. بعد ٣٠ شرسة النزاع اليميني. عن بحث اتّجة الصينية, مع وأزيز الفرنسية مدن, عدد مرجع العالمية لبلجيكا، أن. طوكيو أعلنت حيث بل. الأخذ واندونيسيا، إذ ذلك, به، قد معاملة وقوعها،. ولم التي إبّان بالفشل ٣٠, جنوب مشاركة حيث أم.</p>
-            <h4 id="mdo">@mdo</h4>
-            <p>بل الشتاء، بمحاولة جُل, فعل ببعض الأراضي مع. أما لم الأولى تكاليف, في بحشد جنوب الدول دون. في لمحاكم الإنزال تلك, أي بين الصفحة النزاع. عن دول فسقط احداث. وباءت التقليدي أم حيث, دنو ماذا واستمرت بل, غير ٣٠ بقعة هناك وفنلندا.</p>
+            <h4 id="fat"><bdi lang="en" dir="ltr">@fat</bdi></h4>
+            <p>محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.</p>
+            <h4 id="mdo"><bdi lang="en" dir="ltr">@mdo</bdi></h4>
+            <p>بصرف النظر عن تحسيننا جدوى المكيّفات أو عدم تحسينها، فإن الطلب على الطاقة سيزداد. وطبقاً لما جاء في مقالة معهد ماساشوستس للتكنولوجيا، السالف ذكره، ثمَّة أمر يجب عدم إغفاله، وهو كيف أن هذا الطلب سيضغط على نظم توفير الطاقة الحالية. إذ لا بد من إعادة تأهيل كل شبكات الكهرباء، وتوسيعها لتلبية طلب الطاقة في زمن الذروة، خلال موجات الحرارة المتزايدة. فحين يكون الحر شديداً يجنح الناس إلى البقاء في الداخل، وإلى زيادة تشغيل المكيّفات، سعياً إلى جو لطيف وهم يستخدمون أدوات وأجهزة مختلفة أخرى.</p>
             <h4 id="one">واحد</h4>
-            <p>وزارة العاصمة الأوربيين حتى بـ. إذ دول مقاطعة بالرغم الأوروبي, كلّ هو نهاية لبولندا،, إذ مما ماشاء إتفاقية. إذ جهة تسبب وانتهاءً, تم تعد الذود أعلنت الأمريكية. ضرب نقطة حالية أن, ثم مارد للصين جديداً بين, بعد بل العظمى ابتدعها والفرنسي. ثم جعل يذكر ووصف, أثره، وعُرفت هو كان, بها قُدُماً البولندي ان. العالمي الجديدة، الفرنسية عرض كل.</p>
+            <p>وكل هذه الأمور المتزامنة من تشغيل الأجهزة، يزيد الضغط على شبكات الطاقة، كما أسلفنا. لكن مجرد زيادة سعة الشبكة ليس كافياً. إذ لا بد من تطوير الشبكات الذكية التي تستخدم الجسّاسات، ونظم المراقبة، والبرامج الإلكترونية، لتحديد متى يكون الشاغلون في المبنى، ومتى يكون ثمَّة حاجة إلى الطاقة، ومتى تكون الحرارة منخفضة، وبذلك يخرج الناس، فلا يستخدمون كثيراً من الكهرباء.</p>
             <h4 id="two">اثنان</h4>
-            <p>إذ قِبل أعلنت عرض. ما به، هاربر قتيل، الإكتفاء, أوزار المنتصر لبولندا، بلا بـ. وبدون بزمام وبحلول جُل أن, مكن أي لعدم مشارف. تم أخر دفّة وصغار وبالتحديد،, وقد اعلان العالم واشتدّت عن. أي حين الأولية لبولندا،, كما مايو وحتّى فرنسا ثم.</p>
+            <p>مع الأسف، كل هذه الحلول المبتكرة مكلِّفة، وهذا ما يجعلها عديمة الجدوى في نظر بعض الشركات الخاصة والمواطن المتقشّف. إن بعض الأفراد الواعين بيئياً يبذلون قصارى جهدهم في تقليص استهلاكهم من الطاقة، ويعون جيداً أهمية أجهزة التكييف المجدية والأرفق بالبيئة. ولكن جهات كثيرة لن تتحرّك لمجرد حافز سلامة المناخ ووقف هدر الطاقة، ما دامت لا تحركها حوافز قانونية. وعلى الحكومات أن تُقدِم عند الاهتمام بالتغيّر المناخي، على وضع التشريعات المناسبة. فبالنظم والحوافز والدعم، يمكن دفع الشركات إلى اعتماد الحلول الأجدى في مكاتبها.</p>
             <h4 id="three">ثلاثة</h4>
-            <p>لم هذا تسمّى إعادة مليون, ان يذكر فرنسا كما. إذ الدول الشتوية وأكثرها مدن. عرض بفرض بتحدّي الأوضاع تم. أحدث شاسعة تكبّد أخر من, ٣٠ حتى الخاطفة العالمية, هناك عالمية وقد لم. بشرية إتفاقية عل جهة, كل هُزم كانتا ضرب.</p>
-            <p>أن كلّ صفحة إعادة الأمريكية. بحث تشكيل ويعزى وتزويده بل. وحتّى وإعلان أن دار, من مكّن الصينية المشتّتون مكن, وبحلول للمجهود الأمريكي أن بحق. أم جهة وجهان الأرض.</p>
+            <p>وكما يتبيّن لنا، من عدد الحلول الملطِّفة للمشكلة، ومن تنوّعها، وهي الحلول التي أسلفنا الحديث عنها، فإن التكنولوجيا التي نحتاج إليها من أجل معالجة هذه التحديات، هي في مدى قدرتنا، لكنها ربما تتطلّب بعض التحسين، ودعماً استثمارياً أكبر!</p>
+            <p>ولا مانع من إضافة محتوى آخر ليس تحت أي قسم معين.</p>
           </div>
         </div>
       </div>
     </article>
     <article class="my-3" id="spinners">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
-        <h3>المغازل</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/spinners" >}}">توثيق</a>
+        <h3>الدوائر المتحركة</h3>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/spinners" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
@@ -1484,8 +1483,8 @@ direction: rtl
     </article>
     <article class="my-3" id="toasts">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
-        <h3>نخب</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/toasts" >}}">توثيق</a>
+        <h3>الإشعارات</h3>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/toasts" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
@@ -1498,7 +1497,7 @@ direction: rtl
             <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="قريب"></button>
           </div>
           <div class="toast-body">
-            مرحبا بالعالم! هذه رسالة نخب.
+            مرحبا بالعالم! هذه رسالة إشعار.
           </div>
         </div>
         {{< /example >}}
@@ -1506,16 +1505,16 @@ direction: rtl
     </article>
     <article class="mt-3 mb-5 pb-5" id="tooltips">
       <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
-        <h3>تلميحات الأدوات</h3>
-        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/tooltips" >}}">توثيق</a>
+        <h3>التلميحات</h3>
+        <a class="d-flex align-items-center" hreflang="en" href="{{< docsref "/components/tooltips" >}}">دليل الإستخدام</a>
       </div>
 
       <div>
         {{< example show_markup="false" class="tooltip-demo" >}}
-        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="تلميح في الأعلى">تلميح في الأعلى</button>
-        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="تلميح في النهاية">تلميح في النهاية</button>
-        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="تلميح في الأسفل">تلميح في الأسفل</button>
-        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="تلميح عند البدء">تلميح عند البدء</button>
+        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="تلميح يظهر في الأعلى">تلميح يظهر في الأعلى</button>
+        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="تلميح يظهر على اليسار">تلميح يظهر على اليسار</button>
+        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="تلميح يظهر في الأسفل">تلميح يظهر في الأسفل</button>
+        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="تلميح يظهر على اليمين">تلميح يظهر على اليمين</button>
         <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>تلميح</em> <u>مع</u> <b>HTML</b>">تلميح مع HTML</button>
         {{< /example >}}
       </div>
@@ -1527,15 +1526,15 @@ direction: rtl
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalLabel">عنوان مشروط</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="قريب"></button>
+        <h5 class="modal-title" id="exampleModalLabel">عنوان الصندوق العائم</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
       </div>
       <div class="modal-body">
         ...
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">قريب</button>
-        <button type="button" class="btn btn-primary">احفظ التغييرات</button>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
+        <button type="button" class="btn btn-primary">حفظ التغيرات</button>
       </div>
     </div>
   </div>
@@ -1544,36 +1543,38 @@ direction: rtl
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="staticBackdropLiveLabel">عنوان مشروط</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="قريب"></button>
+        <h5 class="modal-title" id="staticBackdropLiveLabel">عنوان الصندوق العائم</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
       </div>
       <div class="modal-body">
-        <p>لن أغلق إذا نقرت خارج لي. لا تحاول حتى الضغط على مفتاح الهروب.</p>
+        <p>لن أغلق إذا نقرت خارجي. لا تحاول حتى الضغط على مفتاح الهروب.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">قريب</button>
-        <button type="button" class="btn btn-primary">فهمت</button>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
+        <button type="button" class="btn btn-primary">حسنًا</button>
       </div>
     </div>
   </div>
 </div>
 <div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true">
-  <div class="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollable">
+  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">عنوان مشروط</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="قريب"></button>
+        <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">عنوان الصندوق العائم</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
       </div>
       <div class="modal-body">
-        <p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p>
-        <p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p>
-        <p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</p>
-        <p>هذا وبعض قِبل من, هو ميناء فهرست قبضتهم يبق. كانت لهيمنة للإتحاد على إذ, بحشد مسرح بها أن. قد ومن الأوضاع اليابان للإتحاد, و قررت المارق عرض, أواخر محاولات بها قد. مايو لهيمنة بريطانيا مدن بل.</p>
-        <p>وفي الثالث، الإثنان من, أم وعلى مهمّات على, بـ فرنسية بولندا، لها. لمّ ان قامت تعديل المدن, ٣٠ لمحاكم المعاهدات إيو. كثيرة أدوات ويكيبيديا و بها, أم جدول العصبة بحث. أساسي معارضة بـ هذه, شيء مسرح واتّجه الشّعبين ٣٠. بينما واحدة إذ لمّ.</p>
+        <p>نص لتوضيح عمل الصندوق العائم المتنصّف عاموديًا القابل للتمرير</p>
+        <p>في هذه الحالة، هذا الصندوق يحتوي على محتوى أكثر قليلًا، ولذلك لتوضيح كيف  يمكن إضافة خاصية الإنتصاف العامودي لصندوق عائم قابل للتمرير.</p>
+        <p>يعتبر كوب أو فنجان القهوة عادة يومية عند غالبية سكان الكرة الأرضية في الصباح والمساء، وفي حين تكثر الدراسات حول إيجابياتها هناك أيضا سلبيات كثيرة للمشروب المفضل للكثيرين.</p>
+        <p>وفي هذا الشأن، أظهرت دراسة جديدة أن تناول الكافيين بانتظام يقلل من حجم المادة الرمادية في الدماغ، مما يشير إلى أن تناول القهوة يمكن أن يضعف القدرة على معالجة المعلومات، وفقاً لما نشرته "ديلي ميل" البريطانية.</p>
+        <p>وأعطى باحثون سويسريون متطوعين ثلاث حصص من الكافيين 150 ملغم يوميًا لمدة 10 أيام - وهو مقدار كافيين يعادل حوالي أربعة أو خمسة أكواب صغيرة من القهوة المخمرة يوميًا، أو سبعة إسبريسو فردي.</p>
+        <p>وتبين حدوث انخفاض في المادة الرمادية، والتي توجد غالبًا في الطبقة الخارجية للدماغ، أو القشرة، وتعمل على معالجة المعلومات.</p>
+        <p>كما كان الانخفاض مذهلاً بشكل خاص في الفص الصدغي الإنسي الأيمن، بما في ذلك الحُصين، وهي منطقة من الدماغ ضرورية لتقوية الذاكرة.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">قريب</button>
-        <button type="button" class="btn btn-primary">احفظ التغييرات</button>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
+        <button type="button" class="btn btn-primary">حفظ التغيرات</button>
       </div>
     </div>
   </div>
@@ -1582,32 +1583,22 @@ direction: rtl
   <div class="modal-dialog modal-fullscreen">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title h4" id="exampleModalFullscreenLabel">مشروط ملء الشاشة</h5>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="قريب"></button>
+        <h5 class="modal-title h4" id="exampleModalFullscreenLabel">صندوق عائم يملأ الشاشة</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
       </div>
       <div class="modal-body">
-        <p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p>
-        <p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p>
-        <p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</p>
-        <p>هذا وبعض قِبل من, هو ميناء فهرست قبضتهم يبق. كانت لهيمنة للإتحاد على إذ, بحشد مسرح بها أن. قد ومن الأوضاع اليابان للإتحاد, و قررت المارق عرض, أواخر محاولات بها قد. مايو لهيمنة بريطانيا مدن بل.</p>
-        <p>وفي الثالث، الإثنان من, أم وعلى مهمّات على, بـ فرنسية بولندا، لها. لمّ ان قامت تعديل المدن, ٣٠ لمحاكم المعاهدات إيو. كثيرة أدوات ويكيبيديا و بها, أم جدول العصبة بحث. أساسي معارضة بـ هذه, شيء مسرح واتّجه الشّعبين ٣٠. بينما واحدة إذ لمّ.</p>
-        <p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p>
-        <p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p>
-        <p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</p>
-        <p>هذا وبعض قِبل من, هو ميناء فهرست قبضتهم يبق. كانت لهيمنة للإتحاد على إذ, بحشد مسرح بها أن. قد ومن الأوضاع اليابان للإتحاد, و قررت المارق عرض, أواخر محاولات بها قد. مايو لهيمنة بريطانيا مدن بل.</p>
-        <p>وفي الثالث، الإثنان من, أم وعلى مهمّات على, بـ فرنسية بولندا، لها. لمّ ان قامت تعديل المدن, ٣٠ لمحاكم المعاهدات إيو. كثيرة أدوات ويكيبيديا و بها, أم جدول العصبة بحث. أساسي معارضة بـ هذه, شيء مسرح واتّجه الشّعبين ٣٠. بينما واحدة إذ لمّ.</p>
-        <p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p>
-        <p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p>
-        <p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</p>
-        <p>هذا وبعض قِبل من, هو ميناء فهرست قبضتهم يبق. كانت لهيمنة للإتحاد على إذ, بحشد مسرح بها أن. قد ومن الأوضاع اليابان للإتحاد, و قررت المارق عرض, أواخر محاولات بها قد. مايو لهيمنة بريطانيا مدن بل.</p>
-        <p>وفي الثالث، الإثنان من, أم وعلى مهمّات على, بـ فرنسية بولندا، لها. لمّ ان قامت تعديل المدن, ٣٠ لمحاكم المعاهدات إيو. كثيرة أدوات ويكيبيديا و بها, أم جدول العصبة بحث. أساسي معارضة بـ هذه, شيء مسرح واتّجه الشّعبين ٣٠. بينما واحدة إذ لمّ.</p>
-        <p>علاقة الشمال والفرنسي لها أن. المحيط الشهيرة البولندي دون أي, لم على مليون الثالث، بالسيطرة, نفس ان واحدة المجتمع والكوري. أي أثره، الأمم دار, مع وسفن وقام سكان انه. كان بهيئة الإمداد هو, بينما تطوير يعادل هذه بل, قد خيار يقوم أعلنت بلا. ما مسرح ٢٠٠٤ عدم, حصدت الصفحة المؤلّفة أخذ هو. هذا عل الدول الفرنسية, معقل مهمّات إذ مدن. تجهيز ألمانيا دار بل.</p>
-        <p>لان تم بسبب مئات الفترة. جهة تنفّس المشترك ٣٠, وباءت اوروبا دنو لم, أم جعل كرسي إختار وبريطانيا. مما رئيس الله الأثناء، ٣٠, الأمم الشتاء البولندي بين في, دول ان حلّت الأوروبيّون. بوابة العصبة البرية هو تحت, أضف أم الجوي أراضي, مدن العظمى قُدُماً ايطاليا، هو. حدى ثم تنفّس كنقطة, أن أما اعتداء واُسدل بالجانب.</p>
-        <p>انتهت اكتوبر واندونيسيا، حين بـ. غير بالرغم التقليدي في, و أما بزمام ا لإنعدام. هو كُلفة وانتهاءً حول. جُل مكّن الصين ان, ترتيب الأجل أوراقهم لها كل.</p>
-        <p>هذا وبعض قِبل من, هو ميناء فهرست قبضتهم يبق. كانت لهيمنة للإتحاد على إذ, بحشد مسرح بها أن. قد ومن الأوضاع اليابان للإتحاد, و قررت المارق عرض, أواخر محاولات بها قد. مايو لهيمنة بريطانيا مدن بل.</p>
+        <p>في ما يلي، نص طويل لتعبئة كامل الشاشة. قد يبدو أنني أثرثر كثيرًا، لذا سأقوم بنسخ مقالة من إحدى الصحف العربية.</p>
+        <p>تكييف الهواء هو من التكنولوجيا التي ما إن نمتلكها حتى نصبح عاجزين عن تخيّل العيش من دونها. وتكييف الهواء في مناطق عديدة من العالم ليس ترفاً يمكن الاستغناء عنه. ولكن هذه الحاجة الحيوية تثير تحديات كبيرة على مستوى استهلاك الطاقة في معظم بلدان العالم. ويُتوقع أن تتفاقم هذه التحديات خلال العقود الثلاثة المقبلة، مع توقُّع ارتفاع عدد المكيفات في العالم نحو ثلاثة أضعاف. وفي حين أن الابتكارات التكنولوجية تحقِّق كل يوم إنجازاً جديداً، وعلى الرغم من بعض التحسينات والتدابير المحدودة التي طرأت على صناعة المكيفات، “فإن تكنولوجيتها الأساسية لا تزال تعمل كما كانت، منذ اعتمادها قبل نحو قرن من السنين"، حسبما جاء في تقرير لمعهد ماساشوستس للتكنولوجيا (MIT)، في الأول من سبتمبر 2020م. ولمعالجة هذه المشكلات الخطيرة، لا مفر من إعادة التفكير بجد.</p>
+        <p>التكييف حاجة حيويّة. فالتعرّض للحرارة لمدة طويلة ضارٌ بالصحة. ووفقاً لمنظمة الصحة العالميّة يمكن للتعرُّض الطويل للحرارة أيضاً أن يؤدي إلى "إعياء حراري، وضربة شمس، وتورّم في الرجلين، وطفح جلدي على العنق، وتشنج، وصداع، وحساسيّة، والخمول والوهَن. ويمكن للحرارة أن تسبِّب جفافاً خطراً، وأعراضاً حادة في أوعية الدماغ الدمويّة، وتسهم في تكوّن الجلطات".</p>
+        <p>وموجات الحر أيضاً من أشد المخاطر الطبيعيّة المميتة. إذ يقدَّر أن بين عامي 1998 و2017م، توفي نحو 166 ألف شخص من موجات الحر. ومات 70 ألفاً من هؤلاء في أوروبا سنة 2003م وحدها. ومن دون أن يصل الخطر إلى الموت، تتسبَّب الحرارة العالية بانخفاض الأداء المعرفي لدى الشبان البالغين في المباني غير المكيّفة. فقد بيّنت دراسة أجرتها "كليّة ت. هـ. تشان" للصحة العامة في جامعة هارفرد، نشرتها "بلوس ميديسين" في 10 يوليو 2018م، أن التلاميذ الذين ينامون في مهاجع غير مكيّفة، يقل أداؤهم عن أولئك الذين ينامون في مهاجع مكيّفة. ولتجنّب مخاطر التعرّض للحرارة، يلتفت الناس إلى استخدام التكييف.</p>
+        <p>يتطلّب التكييف كثيراً من الطاقة. فنحو %10 من استهلاك الكهرباء في العالم يُنفَق في تشغيل المكيّفات. وتصل هذه النسبة إلى %50 في المملكة حسب "المركز السعودي لكفاءة الطاقة". أضف إلى ذلك أن معظم البشر في بلدان العالم النامي، لم يقتنوا بعد مكيّفهم الأول، والمشكلة إلى ازدياد. فمعظم البلدان النامية هي من البلدان الأشد حرارة والأكثر اكتظاظاً بالسكان في العالم. وجاء في تقرير لوكالة الطاقة الدوليّة بعنوان "مستقبل التبريد"، ونُشر في مايو 2018م، أن في أجزاء من أمريكا الجنوبيّة وإفريقيا وآسيا والشرق الأوسط، يعيش 2.8 مليار نسمة، ولا يملك وحدات تكييف سوى %8 من المنازل. في حين الدول المتقدِّمة مثل كوريا الجنوبيّة، واليابان، والولايات المتحدة، فإن %89 من المنازل تملك مكيفات، وفي الصين %60 من البيوت تملكها أيضاً.</p>
+        <p>ولكن مع تنامي الدخل في بلدان الاقتصاد الصاعد، يتوقّع أن تزداد المنازل التي تقتني مكيّفاً. وبحسب مقالة نُشرت في صحيفة "نيويورك تايمز"، في 15 مايو 2018م، سيرتفع عدد المكيّفات في العالم من نحو 1.6 مليار حالياً، إلى 5.6 مليارات عام 2050م، طبقاً لمعدَّلات النمو الاقتصادي.</p>
+        <p>ومع الافتقار إلى الابتكار وتطوير النظم لفرض معايير الجدوى الأعلى، فسيتضاعف استهلاك الطاقة لتشغيل المكيّفات ثلاثة أضعاف. وسينتج من ذلك طلب إضافي للطاقة يساوي مجموع إنتاج الطاقة في الصين حالياً. فمبيعات المكيّفات ترتفع اليوم في البلدان النامية، لكن فعاليّة هذه الوحدات مشكوك فيها. فمثلاً، أوسع وحدات التكييف انتشاراً في بعض الأسواق الآسيوية تتطلّب ضعفي ما تتطلّبه وحدات تكييف أجدى. والمكيّفات التي تباع في اليابان والاتحاد الأوروبي أجدى بنسبة %25 عادة، من تلك التي تباع في الصين والولايات المتحدة.</p>
+        <p>وبصرف النظر عن كثير من الطاقة التي يحتاج إليها المكيّف، فإنه يبث مقادير وفيرة من غازات الدفيئة نفسها. وطبقاً لموقع تكييف الهواء (airconditioning.com)، فإن المبرِّدات في معظم المكيّفات مثل مواد مركبات الكربون الكلورية فلورية أو مواد هيدروفلوروولفينات، ومركبات ثاني أكسيد الكربون الهيدروكلورية فلورية، أسوأ بكثير للبيئة من ثاني أكسيد الكربون، لأنها تحتبس من الحرارة مقادير أكبر حين تتسرّب إلى الجو.</p>
+        <p>وبالإضافة إلى ظاهرة الدفيئة، فهذه الغازات تسهم أيضاً بالإضرار بطبقة الأوزون. ويمكن لهذه المواد الكيميائية أن تتسرّب خلال عملية التصنيع أو التصليح. ويعرف كل من يملك في منزله مكيّفاً كم تتكرر أعطال هذه الأجهزة. ثم إن المكيف يُرمَى حين يتعطّل نهائياً ولا يعود قابلاً للإصلاح، والمواد المبرِّدة فيه ستتسرّب على الأرجح لتلوث الهواء.</p>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">قريب</button>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
       </div>
     </div>
   </div>
diff --git a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.css b/site/content/docs/5.1/examples/cheatsheet/cheatsheet.css
index 77aa0f23c..77aa0f23c 100644
--- a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.css
+++ b/site/content/docs/5.1/examples/cheatsheet/cheatsheet.css
diff --git a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.js b/site/content/docs/5.1/examples/cheatsheet/cheatsheet.js
index 541cf9350..0a50258b9 100644
--- a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.js
+++ b/site/content/docs/5.1/examples/cheatsheet/cheatsheet.js
@@ -25,8 +25,8 @@
       toast.show()
     })
 
-  // Disable empty links
-  document.querySelectorAll('[href="#"]')
+  // Disable empty links and submit buttons
+  document.querySelectorAll('[href="#"], [type="submit"]')
     .forEach(function (link) {
       link.addEventListener('click', function (event) {
         event.preventDefault()
@@ -41,6 +41,11 @@
     }
 
     var link = document.querySelector('.bd-aside a[href="' + hash + '"]')
+
+    if (!link) {
+      return
+    }
+
     var active = document.querySelector('.bd-aside .active')
     var parent = link.parentNode.parentNode.previousElementSibling
 
diff --git a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css b/site/content/docs/5.1/examples/cheatsheet/cheatsheet.rtl.css
index c1a4a1ccc..c1a4a1ccc 100644
--- a/site/content/docs/5.0/examples/cheatsheet/cheatsheet.rtl.css
+++ b/site/content/docs/5.1/examples/cheatsheet/cheatsheet.rtl.css
diff --git a/site/content/docs/5.0/examples/cheatsheet/index.html b/site/content/docs/5.1/examples/cheatsheet/index.html
index de9817845..1df5ca792 100644
--- a/site/content/docs/5.0/examples/cheatsheet/index.html
+++ b/site/content/docs/5.1/examples/cheatsheet/index.html
@@ -11,7 +11,7 @@ body_class: "bg-light"
 <header class="bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark">
   <div class="container-fluid d-flex align-items-center">
     <h1 class="d-flex align-items-center fs-4 text-white mb-0">
-      <img src="/docs/5.0/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="me-3" alt="Bootstrap">
+      <img src="/docs/5.1/assets/brand/bootstrap-logo-white.svg" width="38" height="30" class="me-3" alt="Bootstrap">
       Cheatsheet
     </h1>
     <a href="{{< docsref "/examples/cheatsheet-rtl" >}}" class="ms-auto link-light" hreflang="ar">RTL cheatsheet</a>
@@ -1170,13 +1170,13 @@ body_class: "bg-light"
         </nav>
         <div class="tab-content" id="nav-tabContent">
           <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
-            <p>Placeholder content for the tab panel. This one relates to the home tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p>
+            <p><strong>This is some placeholder content the Home tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
           </div>
           <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
-            <p>Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p>
+            <p><strong>This is some placeholder content the Profile tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
           </div>
           <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
-            <p>Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.</p>
+            <p><strong>This is some placeholder content the Contact tab's associated content.</strong> Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other <code>.nav</code>-powered navigation.</p>
           </div>
         </div>
         {{< /example >}}
@@ -1418,34 +1418,33 @@ body_class: "bg-light"
             <a class="navbar-brand" href="#">Navbar</a>
             <ul class="nav nav-pills">
               <li class="nav-item">
-                <a class="nav-link" href="#fat">@fat</a>
+                <a class="nav-link active" href="#scrollspyHeading1">First</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="#mdo">@mdo</a>
+                <a class="nav-link" href="#scrollspyHeading2">Second</a>
               </li>
               <li class="nav-item dropdown">
                 <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
                 <ul class="dropdown-menu">
-                  <li><a class="dropdown-item" href="#one">one</a></li>
-                  <li><a class="dropdown-item" href="#two">two</a></li>
+                  <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
+                  <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
                   <li><hr class="dropdown-divider"></li>
-                  <li><a class="dropdown-item" href="#three">three</a></li>
+                  <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
                 </ul>
               </li>
             </ul>
           </nav>
-          <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
-            <h4 id="fat">@fat</h4>
-            <p>Placeholder content for the scrollspy example. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.</p>
-            <h4 id="mdo">@mdo</h4>
-            <p>Placeholder content for the scrollspy example. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk.</p>
-            <h4 id="one">one</h4>
-            <p>Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.</p>
-            <h4 id="two">two</h4>
-            <p>Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.</p>
-            <h4 id="three">three</h4>
-            <p>Placeholder content for the scrollspy example. If you wanna dance, if you want it all, you know that I'm the girl that you should call. Walk through the storm I would. So let me get you in your birthday suit. The one that got away. Last Friday night, yeah I think we broke the law, always say we're gonna stop. 'Cause she's a little bit of Yoko, And she's a little bit of 'Oh no'. I want the jaw droppin', eye poppin', head turnin', body shockin'. Yeah, we maxed our credit cards and got kicked out of the bar.</p>
-            <p>And some more placeholder content, for good measure.</p>
+        <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
+            <h4 id="scrollspyHeading1">First heading</h4>
+            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+            <h4 id="scrollspyHeading2">Second heading</h4>
+            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+            <h4 id="scrollspyHeading3">Third heading</h4>
+            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+            <h4 id="scrollspyHeading4">Fourth heading</h4>
+            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
+            <h4 id="scrollspyHeading5">Fifth heading</h4>
+            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.</p>
           </div>
         </div>
       </div>
@@ -1561,10 +1560,9 @@ body_class: "bg-light"
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
-        <p>Placeholder text for this demonstration of a vertically centered modal dialog.</p>
-        <p>In this case, the dialog has a bit more content, just to show how vertical centering can be added to a scrollable modal.</p>
-        <p>What follows is just some placeholder text for this modal dialog. Sipping on Rosé, Silver Lake sun, coming up all lazy. It’s in the palm of your hand now baby. So we hit the boulevard. So make a wish, I'll make it like your birthday everyday. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. You could've been the greatest. Passport stamps, she's cosmopolitan. Your kiss is cosmic, every move is magic.</p>
-        <p>We're living the life. We're doing it right. Open up your heart. I was tryna hit it and quit it. Her love is like a drug. Always leaves a trail of stardust. The girl's a freak, she drive a jeep in Laguna Beach. Fine, fresh, fierce, we got it on lock. All my girls vintage Chanel baby.</p>
+        <p>This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.</p>
+        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+        <p>This content should appear at the bottom after you scroll.</p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
@@ -1581,14 +1579,7 @@ body_class: "bg-light"
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
-        <p>What follows is just some placeholder text for this modal dialog. I feel like I'm already there. I’m gon’ put her in a coma. Boom, boom, boom. You're reading me like erotica, boy, you make me feel exotic, yeah. Happy birthday. From Tokyo to Mexico, to Rio. I knew you were.</p>
-        <p>Last Friday night. Calling out my name. Kiss her, touch her, squeeze her buns. Heavy is the head that wears the crown. So open up your heart and just let it begin. Boy all this time was worth the waiting. You know that I'm the girl that you should call. End of the rainbow looking treasure. You're reading me like erotica, boy, you make me feel exotic, yeah. Do you know that there's still a chance for you 'Cause there's a spark in you? So I sat quietly, agreed politely. From Tokyo to Mexico, to Rio.</p>
-        <p>Don't be a shy kinda guy I'll bet it's beautiful. You fall asleep during foreplay, 'Cause the pills you take, are more your forte. Open up your heart. You're never gonna be unsatisfied. Know that you are worthy. This one goes out to the ladies at breakfast in last night's dress. You think you've seen her in a magazine. I should've told you what you meant to me 'Cause now I pay the price. Takes you miles high, so high, 'cause she’s got that one international smile.</p>
-        <p>Yo, shout out to all you kids, buying bottle service, with your rent money. So I sat quietly, agreed politely. They say, be afraid you're not like the others, futuristic lover. Boom, boom, boom. Don't need apologies. We can dance, until we die, you and I, will be young forever. If you choose to walk away, don’t walk away. You know that I'm the girl that you should call. This Friday night, do it all again.</p>
-        <p>I'm walking on air. But lil' mama so dope. It's time to bring out the big balloons. Are you ready for, ready for. The boys break their necks try'na to creep a little sneak peek. Summer after high school when we first met. If you want it all. (This is how we do) You open my eyes and I'm ready to go, lead me into the light.</p>
-        <p>Growing fast into a bolt of lightning. We freak in my jeep, Snoop Doggy Dogg on the stereo. Baby do you dare to do this? Open up your heart and just let it begin. Peach-pink lips, yeah, everybody stares. Be your teenage dream tonight. Are you brave enough to let me see your peacock? You think I'm funny when I tell the punchline wrong. Woo! I knew you were. All this money can't buy me a time machine. I can't sleep let's run away and don't ever look back, don't ever look back.</p>
-        <p>Make it like your birthday everyday. I'm not sticking around to watch you go down. Uh-huh, I see you. For you I'll risk it all, all. I’m gon’ put her in a coma. She ride me like a roller coaster. You hear my voice, you hear that sound. 'Cause I will love you unconditionally (oh yeah). They say, be afraid you're not like the others, futuristic lover. There is no fear now, let go and just be free, I will love you unconditionally.</p>
-        <p>We can dance, until we die, you and I, will be young forever. Pop your Pérignon. Last Friday night, yeah I think we broke the law, always say we're gonna stop. Don't need apologies. Give you something good to celebrate. But don’t make me your enemy, your enemy, your enemy. Flowers in her hair, she don't care. Tone, tan fit and ready, turn it up cause its gettin' heavy.</p>
+        ...
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
diff --git a/site/content/docs/5.0/examples/checkout-rtl/index.html b/site/content/docs/5.1/examples/checkout-rtl/index.html
index 5839cb112..e0ca621b1 100644
--- a/site/content/docs/5.0/examples/checkout-rtl/index.html
+++ b/site/content/docs/5.1/examples/checkout-rtl/index.html
@@ -1,6 +1,6 @@
 ---
 layout: examples
-title: مثال الخروج
+title: مثال إتمام الشراء
 direction: rtl
 extra_css:
   - "../checkout/form-validation.css"
@@ -13,14 +13,14 @@ body_class: "bg-light"
   <main>
     <div class="py-5 text-center">
       <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
-      <h2>نموذج الخروج</h2>
+      <h2>نموذج إتمام الشراء</h2>
       <p class="lead">فيما يلي مثال على نموذج تم إنشاؤه بالكامل باستخدام عناصر تحكم النموذج في Bootstrap. لكل مجموعة نماذج مطلوبة حالة تحقق يمكن تشغيلها بمحاولة إرسال النموذج دون استكماله.</p>
     </div>
 
     <div class="row g-3">
       <div class="col-md-5 col-lg-4 order-md-last">
         <h4 class="d-flex justify-content-between align-items-center mb-3">
-          <span class="text-muted">عربتك</span>
+          <span class="text-muted">عربة التسوق</span>
           <span class="badge bg-secondary rounded-pill">3</span>
         </h4>
         <ul class="list-group mb-3">
@@ -61,27 +61,27 @@ body_class: "bg-light"
         <form class="card p-2">
           <div class="input-group">
             <input type="text" class="form-control" placeholder="رمز ترويجي">
-            <button type="submit" class="btn btn-secondary">افتدى</button>
+            <button type="submit" class="btn btn-secondary">تحقق</button>
           </div>
         </form>
       </div>
       <div class="col-md-7 col-lg-8">
-        <h4 class="mb-3">عنوان وصول الفواتير</h4>
+        <h4 class="mb-3">عنوان الفوترة</h4>
         <form class="needs-validation" novalidate>
           <div class="row g-3">
             <div class="col-sm-6">
-              <label for="firstName" class="form-label">الاسم الاول</label>
+              <label for="firstName" class="form-label">الاسم الأول</label>
               <input type="text" class="form-control" id="firstName" placeholder="" value="" required>
               <div class="invalid-feedback">
-                مطلوب الاسم الأول صالح.
+                يرجى إدخال اسم أول صحيح.
               </div>
             </div>
 
             <div class="col-sm-6">
-              <label for="lastName" class="form-label">الكنية</label>
+              <label for="lastName" class="form-label">اسم العائلة</label>
               <input type="text" class="form-control" id="lastName" placeholder="" value="" required>
               <div class="invalid-feedback">
-                مطلوب اسم أخير صالح.
+                يرجى إدخال اسم عائلة صحيح.
               </div>
             </div>
 
@@ -97,45 +97,45 @@ body_class: "bg-light"
             </div>
 
             <div class="col-12">
-              <label for="email" class="form-label"><span class="text-muted">(اختياري)</span>البريد الإلكتروني </label>
+              <label for="email" class="form-label">البريد الإلكتروني <span class="text-muted">(اختياري)</span></label>
               <input type="email" class="form-control" id="email" placeholder="[email protected]">
               <div class="invalid-feedback">
-                يرجى إدخال عنوان بريد إلكتروني صالح لتحديثات الشحن.
+                يرجى إدخال عنوان بريد إلكتروني صحيح لتصلكم تحديثات الشحن.
               </div>
             </div>
 
             <div class="col-12">
-              <label for="address" class="form-label">عنوان</label>
-              <input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
+              <label for="address" class="form-label">العنوان</label>
+              <input type="text" class="form-control" id="address" placeholder="1234 الشارع الأول" required>
               <div class="invalid-feedback">
                 يرجى إدخال عنوان الشحن الخاص بك.
               </div>
             </div>
 
             <div class="col-12">
-              <label for="address2" class="form-label"><span class="text-muted">(اختياري)</span>عنوان 2 </label>
-              <input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
+              <label for="address2" class="form-label">عنوان 2 <span class="text-muted">(اختياري)</span></label>
+              <input type="text" class="form-control" id="address2" placeholder="شقة 24">
             </div>
 
             <div class="col-md-5">
-              <label for="country" class="form-label">بلد</label>
+              <label for="country" class="form-label">البلد</label>
               <select class="form-select" id="country" required>
-                <option value="">أختر...</option>
+                <option value="">اختر...</option>
                 <option>الولايات المتحدة الأمريكية</option>
               </select>
               <div class="invalid-feedback">
-                يرجى تحديد بلد صالح.
+                يرجى اختيار بلد صحيح.
               </div>
             </div>
 
             <div class="col-md-4">
-              <label for="state" class="form-label">حالة</label>
+              <label for="state" class="form-label">المنطقة</label>
               <select class="form-select" id="state" required>
-                <option value="">أختر...</option>
+                <option value="">اختر...</option>
                 <option>كاليفورنيا</option>
               </select>
               <div class="invalid-feedback">
-                يرجى تقديم حالة صالحة.
+                يرجى اختيار اسم منطقة صحيح.
               </div>
             </div>
 
@@ -152,7 +152,7 @@ body_class: "bg-light"
 
           <div class="form-check">
             <input type="checkbox" class="form-check-input" id="same-address">
-            <label class="form-check-label" for="same-address">عنوان الشحن هو نفس عنوان الفاتورة الخاص بي</label>
+            <label class="form-check-label" for="same-address">عنوان الشحن هو نفس عنوان الفوترة الخاص بي</label>
           </div>
 
           <div class="form-check">
@@ -162,16 +162,16 @@ body_class: "bg-light"
 
           <hr class="my-4">
 
-          <h4 class="mb-3">دفع</h4>
+          <h4 class="mb-3">طريقة الدفع</h4>
 
           <div class="my-3">
             <div class="form-check">
               <input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
-              <label class="form-check-label" for="credit">بطاقة الائتمان</label>
+              <label class="form-check-label" for="credit">بطاقة ائتمان</label>
             </div>
             <div class="form-check">
-              <input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
-              <label class="form-check-label" for="debit">بطاقة ائتمان</label>
+              <input id="cash" name="paymentMethod" type="radio" class="form-check-input" required>
+              <label class="form-check-label" for="cash">نقد</label>
             </div>
             <div class="form-check">
               <input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
@@ -190,7 +190,7 @@ body_class: "bg-light"
             </div>
 
             <div class="col-md-6">
-              <label for="cc-number" class="form-label">رقم بطاقه الائتمان</label>
+              <label for="cc-number" class="form-label">رقم البطاقة</label>
               <input type="text" class="form-control" id="cc-number" placeholder="" required>
               <div class="invalid-feedback">
                 رقم بطاقة الائتمان مطلوب
@@ -198,7 +198,7 @@ body_class: "bg-light"
             </div>
 
             <div class="col-md-3">
-              <label for="cc-expiration" class="form-label">انتهاء الصلاحية</label>
+              <label for="cc-expiration" class="form-label">تاريخ انتهاء الصلاحية</label>
               <input type="text" class="form-control" id="cc-expiration" placeholder="" required>
               <div class="invalid-feedback">
                 تاريخ انتهاء الصلاحية مطلوب
@@ -206,7 +206,7 @@ body_class: "bg-light"
             </div>
 
             <div class="col-md-3">
-              <label for="cc-cvv" class="form-label">CVV</label>
+              <label for="cc-cvv" class="form-label">الرمز الثلاثي (CVV)</label>
               <input type="text" class="form-control" id="cc-cvv" placeholder="" required>
               <div class="invalid-feedback">
                 رمز الحماية مطلوب
@@ -216,7 +216,7 @@ body_class: "bg-light"
 
           <hr class="my-4">
 
-          <button class="w-100 btn btn-primary btn-lg" type="submit">الاستمرار في الخروج</button>
+          <button class="w-100 btn btn-primary btn-lg" type="submit">الاستمرار بالدفع</button>
         </form>
       </div>
     </div>
@@ -224,9 +224,9 @@ body_class: "bg-light"
   <footer class="my-5 pt-5 text-muted text-center text-small">
     <p class="mb-1">&copy; {{< year >}}-2017 اسم الشركة</p>
     <ul class="list-inline">
-      <li class="list-inline-item"><a href="#">خصوصية</a></li>
-      <li class="list-inline-item"><a href="#">شروط</a></li>
-      <li class="list-inline-item"><a href="#">الدعم</a></li>
+      <li class="list-inline-item"><a href="#">سياسة الخصوصية</a></li>
+      <li class="list-inline-item"><a href="#">اتفاقية الاستخدام</a></li>
+      <li class="list-inline-item"><a href="#">الدعم الفني</a></li>
     </ul>
   </footer>
 </div>
diff --git a/site/content/docs/5.0/examples/checkout/form-validation.css b/site/content/docs/5.1/examples/checkout/form-validation.css
index e5ea31c40..e5ea31c40 100644
--- a/site/content/docs/5.0/examples/checkout/form-validation.css
+++ b/site/content/docs/5.1/examples/checkout/form-validation.css
diff --git a/site/content/docs/5.0/examples/checkout/form-validation.js b/site/content/docs/5.1/examples/checkout/form-validation.js
index f8fd583de..f8fd583de 100644
--- a/site/content/docs/5.0/examples/checkout/form-validation.js
+++ b/site/content/docs/5.1/examples/checkout/form-validation.js
diff --git a/site/content/docs/5.0/examples/checkout/index.html b/site/content/docs/5.1/examples/checkout/index.html
index fc9cfb6f8..4809dc4bb 100644
--- a/site/content/docs/5.0/examples/checkout/index.html
+++ b/site/content/docs/5.1/examples/checkout/index.html
@@ -16,11 +16,11 @@ body_class: "bg-light"
       <p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
     </div>
 
-    <div class="row g-3">
+    <div class="row g-5">
       <div class="col-md-5 col-lg-4 order-md-last">
         <h4 class="d-flex justify-content-between align-items-center mb-3">
-          <span class="text-muted">Your cart</span>
-          <span class="badge bg-secondary rounded-pill">3</span>
+          <span class="text-primary">Your cart</span>
+          <span class="badge bg-primary rounded-pill">3</span>
         </h4>
         <ul class="list-group mb-3">
           <li class="list-group-item d-flex justify-content-between lh-sm">
diff --git a/site/content/docs/5.0/examples/cover/cover.css b/site/content/docs/5.1/examples/cover/cover.css
index 87afc3be9..87afc3be9 100644
--- a/site/content/docs/5.0/examples/cover/cover.css
+++ b/site/content/docs/5.1/examples/cover/cover.css
diff --git a/site/content/docs/5.0/examples/cover/index.html b/site/content/docs/5.1/examples/cover/index.html
index 10362083e..10362083e 100644
--- a/site/content/docs/5.0/examples/cover/index.html
+++ b/site/content/docs/5.1/examples/cover/index.html
diff --git a/site/content/docs/5.0/examples/dashboard-rtl/dashboard.js b/site/content/docs/5.1/examples/dashboard-rtl/dashboard.js
index 2a511ef8b..7831fa9d0 100644
--- a/site/content/docs/5.0/examples/dashboard-rtl/dashboard.js
+++ b/site/content/docs/5.1/examples/dashboard-rtl/dashboard.js
@@ -3,7 +3,7 @@
 (function () {
   'use strict'
 
-  feather.replace()
+  feather.replace({ 'aria-hidden': 'true' })
 
   // Graphs
   var ctx = document.getElementById('myChart')
@@ -17,8 +17,8 @@
         'الثلاثاء',
         'الأربعاء',
         'الخميس',
-        'يوم الجمعة',
-        'يوم السبت'
+        'الجمعة',
+        'السبت'
       ],
       datasets: [{
         data: [
diff --git a/site/content/docs/5.0/examples/dashboard-rtl/index.html b/site/content/docs/5.1/examples/dashboard-rtl/index.html
index 848c67c0b..daef89a14 100644
--- a/site/content/docs/5.0/examples/dashboard-rtl/index.html
+++ b/site/content/docs/5.1/examples/dashboard-rtl/index.html
@@ -14,15 +14,15 @@ extra_js:
 
 <header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
   <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">اسم الشركة</a>
-  <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="تبديل التنقل">
+  <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="عرض/إخفاء لوحة التنقل">
     <span class="navbar-toggler-icon"></span>
   </button>
   <input class="form-control form-control-dark w-100" type="text" placeholder="بحث" aria-label="بحث">
-  <ul class="navbar-nav px-3">
-    <li class="nav-item text-nowrap">
-      <a class="nav-link" href="#">خروج</a>
-    </li>
-  </ul>
+  <div class="navbar-nav">
+    <div class="nav-item text-nowrap">
+      <a class="nav-link px-3" href="#">تسجيل الخروج</a>
+    </div>
+  </div>
 </header>
 
 <div class="container-fluid">
@@ -39,13 +39,13 @@ extra_js:
           <li class="nav-item">
             <a class="nav-link" href="#">
               <span data-feather="file"></span>
-              أوامر
+              الطلبات
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">
               <span data-feather="shopping-cart"></span>
-              منتجات
+              المنتجات
             </a>
           </li>
           <li class="nav-item">
@@ -63,14 +63,14 @@ extra_js:
           <li class="nav-item">
             <a class="nav-link" href="#">
               <span data-feather="layers"></span>
-              التكامل
+              التكاملات
             </a>
           </li>
         </ul>
 
         <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
           <span>التقارير المحفوظة</span>
-          <a class="link-secondary" href="#" aria-label="أضف تقرير جديد">
+          <a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
             <span data-feather="plus-circle"></span>
           </a>
         </h6>
@@ -90,13 +90,13 @@ extra_js:
           <li class="nav-item">
             <a class="nav-link" href="#">
               <span data-feather="file-text"></span>
-              ارتباط اجتماعي
+              التفاعل الإجتماعي
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">
               <span data-feather="file-text"></span>
-              بيع نهاية العام
+              مبيعات نهاية العام
             </a>
           </li>
         </ul>
@@ -108,12 +108,12 @@ extra_js:
         <h1 class="h2">لوحة القيادة</h1>
         <div class="btn-toolbar mb-2 mb-md-0">
           <div class="btn-group me-2">
-            <button type="button" class="btn btn-sm btn-outline-secondary">شارك</button>
+            <button type="button" class="btn btn-sm btn-outline-secondary">مشاركة</button>
             <button type="button" class="btn btn-sm btn-outline-secondary">تصدير</button>
           </div>
           <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
             <span data-feather="calendar"></span>
-            هذا الاسبوع
+            هذا الأسبوع
           </button>
         </div>
       </div>
@@ -125,125 +125,125 @@ extra_js:
         <table class="table table-striped table-sm">
           <thead>
             <tr>
-              <th>#</th>
-              <th>العنوان</th>
-              <th>العنوان</th>
-              <th>العنوان</th>
-              <th>العنوان</th>
+              <th scope="col">#</th>
+              <th scope="col">عنوان</th>
+              <th scope="col">عنوان</th>
+              <th scope="col">عنوان</th>
+              <th scope="col">عنوان</th>
             </tr>
           </thead>
           <tbody>
             <tr>
               <td>1,001</td>
-              <td>أم.</td>
-              <td>و.</td>
-              <td>ثمّة.</td>
-              <td>ويتّفق.</td>
+              <td>بيانات</td>
+              <td>عشوائية</td>
+              <td>تثري</td>
+              <td>الجدول</td>
             </tr>
             <tr>
               <td>1,002</td>
-              <td>أضف.</td>
-              <td>ما.</td>
-              <td>من.</td>
-              <td>أم.</td>
+              <td>تثري</td>
+              <td>مبهة</td>
+              <td>تصميم</td>
+              <td>تنسيق</td>
             </tr>
             <tr>
               <td>1,003</td>
-              <td>دار.</td>
-              <td>ذلك.</td>
-              <td>يبق.</td>
-              <td>المتحدة.</td>
+              <td>عشوائية</td>
+              <td>غنية</td>
+              <td>قيمة</td>
+              <td>مفيدة</td>
             </tr>
             <tr>
               <td>1,003</td>
-              <td>فكانت.</td>
-              <td>الخارجية.</td>
-              <td>الآخر.</td>
-              <td>حتى.</td>
+              <td>معلومات</td>
+              <td>تثري</td>
+              <td>توضيحية</td>
+              <td>عشوائية</td>
             </tr>
             <tr>
               <td>1,004</td>
-              <td>أم.</td>
-              <td>و.</td>
-              <td>ثمّة.</td>
-              <td>ويتّفق.</td>
+              <td>الجدول</td>
+              <td>بيانات</td>
+              <td>تنسيق</td>
+              <td>قيمة</td>
             </tr>
             <tr>
               <td>1,005</td>
-              <td>أضف.</td>
-              <td>ما.</td>
-              <td>من.</td>
-              <td>أم.</td>
+              <td>قيمة</td>
+              <td>مبهة</td>
+              <td>الجدول</td>
+              <td>تثري</td>
             </tr>
             <tr>
               <td>1,006</td>
-              <td>دار.</td>
-              <td>ذلك.</td>
-              <td>يبق.</td>
-              <td>المتحدة.</td>
+              <td>قيمة</td>
+              <td>توضيحية</td>
+              <td>غنية</td>
+              <td>عشوائية</td>
             </tr>
             <tr>
               <td>1,007</td>
-              <td>أم.</td>
-              <td>و.</td>
-              <td>ثمّة.</td>
-              <td>ويتّفق.</td>
+              <td>تثري</td>
+              <td>مفيدة</td>
+              <td>معلومات</td>
+              <td>مبهة</td>
             </tr>
             <tr>
               <td>1,008</td>
-              <td>أضف.</td>
-              <td>ما.</td>
-              <td>من.</td>
-              <td>أم.</td>
+              <td>بيانات</td>
+              <td>عشوائية</td>
+              <td>تثري</td>
+              <td>الجدول</td>
             </tr>
             <tr>
               <td>1,009</td>
-              <td>دار.</td>
-              <td>ذلك.</td>
-              <td>يبق.</td>
-              <td>المتحدة.</td>
+              <td>تثري</td>
+              <td>مبهة</td>
+              <td>تصميم</td>
+              <td>تنسيق</td>
             </tr>
             <tr>
               <td>1,010</td>
-              <td>أم.</td>
-              <td>و.</td>
-              <td>ثمّة.</td>
-              <td>ويتّفق.</td>
+              <td>عشوائية</td>
+              <td>غنية</td>
+              <td>قيمة</td>
+              <td>مفيدة</td>
             </tr>
             <tr>
               <td>1,011</td>
-              <td>أضف.</td>
-              <td>ما.</td>
-              <td>من.</td>
-              <td>أم.</td>
+              <td>معلومات</td>
+              <td>تثري</td>
+              <td>توضيحية</td>
+              <td>عشوائية</td>
             </tr>
             <tr>
               <td>1,012</td>
-              <td>دار.</td>
-              <td>ذلك.</td>
-              <td>يبق.</td>
-              <td>المتحدة.</td>
+              <td>الجدول</td>
+              <td>تثري</td>
+              <td>تنسيق</td>
+              <td>قيمة</td>
             </tr>
             <tr>
               <td>1,013</td>
-              <td>أم.</td>
-              <td>و.</td>
-              <td>ثمّة.</td>
-              <td>ويتّفق.</td>
+              <td>قيمة</td>
+              <td>مبهة</td>
+              <td>الجدول</td>
+              <td>تصميم</td>
             </tr>
             <tr>
               <td>1,014</td>
-              <td>أضف.</td>
-              <td>ما.</td>
-              <td>من.</td>
-              <td>أم.</td>
+              <td>قيمة</td>
+              <td>توضيحية</td>
+              <td>غنية</td>
+              <td>عشوائية</td>
             </tr>
             <tr>
               <td>1,015</td>
-              <td>دار.</td>
-              <td>ذلك.</td>
-              <td>يبق.</td>
-              <td>المتحدة.</td>
+              <td>بيانات</td>
+              <td>مفيدة</td>
+              <td>معلومات</td>
+              <td>الجدول</td>
             </tr>
           </tbody>
         </table>
diff --git a/site/content/docs/5.0/examples/dashboard/dashboard.css b/site/content/docs/5.1/examples/dashboard/dashboard.css
index 8b0fa7253..e1099fbb3 100644
--- a/site/content/docs/5.0/examples/dashboard/dashboard.css
+++ b/site/content/docs/5.1/examples/dashboard/dashboard.css
@@ -52,7 +52,7 @@ body {
 }
 
 .sidebar .nav-link.active {
-  color: #007bff;
+  color: #2470dc;
 }
 
 .sidebar .nav-link:hover .feather,
diff --git a/site/content/docs/5.0/examples/dashboard/dashboard.js b/site/content/docs/5.1/examples/dashboard/dashboard.js
index d3f549928..7c2402ae2 100644
--- a/site/content/docs/5.0/examples/dashboard/dashboard.js
+++ b/site/content/docs/5.1/examples/dashboard/dashboard.js
@@ -3,7 +3,7 @@
 (function () {
   'use strict'
 
-  feather.replace()
+  feather.replace({ 'aria-hidden': 'true' })
 
   // Graphs
   var ctx = document.getElementById('myChart')
diff --git a/site/content/docs/5.0/examples/dashboard/dashboard.rtl.css b/site/content/docs/5.1/examples/dashboard/dashboard.rtl.css
index 2406ce5cc..a88226ecf 100644
--- a/site/content/docs/5.0/examples/dashboard/dashboard.rtl.css
+++ b/site/content/docs/5.1/examples/dashboard/dashboard.rtl.css
@@ -48,7 +48,7 @@ body {
 }
 
 .sidebar .nav-link.active {
-  color: #007bff;
+  color: #2470dc;
 }
 
 .sidebar .nav-link:hover .feather,
diff --git a/site/content/docs/5.0/examples/dashboard/index.html b/site/content/docs/5.1/examples/dashboard/index.html
index 21d78e47f..04c187dbc 100644
--- a/site/content/docs/5.0/examples/dashboard/index.html
+++ b/site/content/docs/5.1/examples/dashboard/index.html
@@ -17,11 +17,11 @@ extra_js:
     <span class="navbar-toggler-icon"></span>
   </button>
   <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
-  <ul class="navbar-nav px-3">
-    <li class="nav-item text-nowrap">
-      <a class="nav-link" href="#">Sign out</a>
-    </li>
-  </ul>
+  <div class="navbar-nav">
+    <div class="nav-item text-nowrap">
+      <a class="nav-link px-3" href="#">Sign out</a>
+    </div>
+  </div>
 </header>
 
 <div class="container-fluid">
@@ -124,11 +124,11 @@ extra_js:
         <table class="table table-striped table-sm">
           <thead>
             <tr>
-              <th>#</th>
-              <th>Header</th>
-              <th>Header</th>
-              <th>Header</th>
-              <th>Header</th>
+              <th scope="col">#</th>
+              <th scope="col">Header</th>
+              <th scope="col">Header</th>
+              <th scope="col">Header</th>
+              <th scope="col">Header</th>
             </tr>
           </thead>
           <tbody>
diff --git a/site/content/docs/5.1/examples/dropdowns/dropdowns.css b/site/content/docs/5.1/examples/dropdowns/dropdowns.css
new file mode 100644
index 000000000..4341c59ea
--- /dev/null
+++ b/site/content/docs/5.1/examples/dropdowns/dropdowns.css
@@ -0,0 +1,89 @@
+.b-example-divider {
+  height: 3rem;
+  background-color: rgba(0, 0, 0, .1);
+  border: solid rgba(0, 0, 0, .15);
+  border-width: 1px 0;
+  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+}
+
+.bi {
+  vertical-align: -.125em;
+  fill: currentColor;
+}
+
+.dropdown-menu {
+  position: static;
+  display: block;
+  width: auto;
+  margin: 4rem auto;
+}
+
+.dropdown-menu-macos {
+  display: grid;
+  gap: .25rem;
+  padding: .5rem;
+  border-radius: .5rem;
+}
+.dropdown-menu-macos .dropdown-item {
+  border-radius: .25rem;
+}
+
+.dropdown-item-danger {
+  color: var(--bs-red);
+}
+.dropdown-item-danger:hover,
+.dropdown-item-danger:focus {
+  color: #fff;
+  background-color: var(--bs-red);
+}
+.dropdown-item-danger.active {
+  background-color: var(--bs-red);
+}
+
+.btn-hover-light {
+  text-align: left;
+  background-color: var(--bs-white);
+  border-radius: .25rem;
+}
+.btn-hover-light:hover,
+.btn-hover-light:focus {
+  color: var(--bs-blue);
+  background-color: var(--bs-light);
+}
+
+.cal-month,
+.cal-days,
+.cal-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  align-items: center;
+}
+.cal-month-name {
+  grid-column-start: 2;
+  grid-column-end: 7;
+  text-align: center;
+}
+.cal-weekday,
+.cal-btn {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  height: 3rem;
+  padding: 0;
+}
+.cal-btn:not([disabled]) {
+  font-weight: 500;
+}
+.cal-btn:hover,
+.cal-btn:focus {
+  background-color: rgba(0, 0, 0, .05);
+}
+.cal-btn[disabled] {
+  opacity: .5;
+}
+
+.form-control-dark {
+  background-color: rgba(255, 255, 255, .05);
+  border-color: rgba(255, 255, 255, .15);
+}
diff --git a/site/content/docs/5.1/examples/dropdowns/index.html b/site/content/docs/5.1/examples/dropdowns/index.html
new file mode 100644
index 000000000..5296d1507
--- /dev/null
+++ b/site/content/docs/5.1/examples/dropdowns/index.html
@@ -0,0 +1,339 @@
+---
+layout: examples
+title: Dropdowns
+extra_css:
+  - "dropdowns.css"
+body_class: ""
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <symbol id="bootstrap" viewBox="0 0 118 94">
+    <title>Bootstrap</title>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
+  </symbol>
+
+  <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
+    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+  </symbol>
+
+  <symbol id="check2" viewBox="0 0 16 16">
+    <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
+  </symbol>
+
+  <symbol id="check2-circle" viewBox="0 0 16 16">
+    <path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"/>
+    <path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"/>
+  </symbol>
+
+  <symbol id="bookmark-star" viewBox="0 0 16 16">
+    <path d="M7.84 4.1a.178.178 0 0 1 .32 0l.634 1.285a.178.178 0 0 0 .134.098l1.42.206c.145.021.204.2.098.303L9.42 6.993a.178.178 0 0 0-.051.158l.242 1.414a.178.178 0 0 1-.258.187l-1.27-.668a.178.178 0 0 0-.165 0l-1.27.668a.178.178 0 0 1-.257-.187l.242-1.414a.178.178 0 0 0-.05-.158l-1.03-1.001a.178.178 0 0 1 .098-.303l1.42-.206a.178.178 0 0 0 .134-.098L7.84 4.1z"/>
+    <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/>
+  </symbol>
+
+  <symbol id="grid-fill" viewBox="0 0 16 16">
+    <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
+  </symbol>
+
+  <symbol id="stars" viewBox="0 0 16 16">
+    <path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/>
+  </symbol>
+
+  <symbol id="film" viewBox="0 0 16 16">
+    <path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/>
+  </symbol>
+
+  <symbol id="joystick" viewBox="0 0 16 16">
+    <path d="M10 2a2 2 0 0 1-1.5 1.937v5.087c.863.083 1.5.377 1.5.726 0 .414-.895.75-2 .75s-2-.336-2-.75c0-.35.637-.643 1.5-.726V3.937A2 2 0 1 1 10 2z"/>
+    <path d="M0 9.665v1.717a1 1 0 0 0 .553.894l6.553 3.277a2 2 0 0 0 1.788 0l6.553-3.277a1 1 0 0 0 .553-.894V9.665c0-.1-.06-.19-.152-.23L9.5 6.715v.993l5.227 2.178a.125.125 0 0 1 .001.23l-5.94 2.546a2 2 0 0 1-1.576 0l-5.94-2.546a.125.125 0 0 1 .001-.23L6.5 7.708l-.013-.988L.152 9.435a.25.25 0 0 0-.152.23z"/>
+  </symbol>
+
+  <symbol id="music-note-beamed" viewBox="0 0 16 16">
+    <path d="M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2zm9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2z"/>
+    <path fill-rule="evenodd" d="M14 11V2h1v9h-1zM6 3v10H5V3h1z"/>
+    <path d="M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4V2.905z"/>
+  </symbol>
+
+  <symbol id="files" viewBox="0 0 16 16">
+    <path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z"/>
+  </symbol>
+
+  <symbol id="image-fill" viewBox="0 0 16 16">
+    <path d="M.002 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2V3zm1 9v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12zm5-6.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z"/>
+  </symbol>
+
+  <symbol id="trash" viewBox="0 0 16 16">
+    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+  </symbol>
+
+  <symbol id="question-circle" viewBox="0 0 16 16">
+    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+    <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
+  </symbol>
+
+  <symbol id="arrow-left-short" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"/>
+  </symbol>
+
+  <symbol id="arrow-right-short" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"/>
+  </symbol>
+</svg>
+
+<div class="d-flex gap-5 justify-content-center" id="dropdownMacos">
+  <ul class="dropdown-menu dropdown-menu-macos mx-0 shadow" style="width: 220px;">
+    <li><a class="dropdown-item active" href="#">Action</a></li>
+    <li><a class="dropdown-item" href="#">Another action</a></li>
+    <li><a class="dropdown-item" href="#">Something else here</a></li>
+    <li><hr class="dropdown-divider"></li>
+    <li><a class="dropdown-item" href="#">Separated link</a></li>
+  </ul>
+  <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-macos mx-0 border-0 shadow" style="width: 220px;">
+    <li><a class="dropdown-item active" href="#">Action</a></li>
+    <li><a class="dropdown-item" href="#">Another action</a></li>
+    <li><a class="dropdown-item" href="#">Something else here</a></li>
+    <li><hr class="dropdown-divider"></li>
+    <li><a class="dropdown-item" href="#">Separated link</a></li>
+  </ul>
+</div>
+
+<div class="b-example-divider"></div>
+
+
+<div class="d-flex gap-5 justify-content-center" id="dropdownFilter">
+  <div class="dropdown-menu pt-0 mx-0 rounded-3 shadow overflow-hidden" style="width: 280px;">
+    <form class="p-2 mb-2 bg-light border-bottom">
+      <input type="search" class="form-control" autocomplete="false" placeholder="Type to filter...">
+    </form>
+    <ul class="list-unstyled mb-0">
+      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+        <span class="d-inline-block bg-success rounded-circle" style="width: .5em; height: .5em;"></span>
+        Action
+      </a></li>
+      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+        <span class="d-inline-block bg-primary rounded-circle" style="width: .5em; height: .5em;"></span>
+        Another action
+      </a></li>
+      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+        <span class="d-inline-block bg-danger rounded-circle" style="width: .5em; height: .5em;"></span>
+        Something else here
+      </a></li>
+      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+        <span class="d-inline-block bg-info rounded-circle" style="width: .5em; height: .5em;"></span>
+        Separated link
+      </a></li>
+    </ul>
+  </div>
+
+  <div class="dropdown-menu dropdown-menu-dark border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden" style="width: 280px;">
+    <form class="p-2 mb-2 bg-dark border-bottom border-dark">
+      <input type="search" class="form-control form-control-dark" autocomplete="false" placeholder="Type to filter...">
+    </form>
+    <ul class="list-unstyled mb-0">
+      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+        <span class="d-inline-block bg-success rounded-circle" style="width: .5em; height: .5em;"></span>
+        Action
+      </a></li>
+      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+        <span class="d-inline-block bg-primary rounded-circle" style="width: .5em; height: .5em;"></span>
+        Another action
+      </a></li>
+      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+        <span class="d-inline-block bg-danger rounded-circle" style="width: .5em; height: .5em;"></span>
+        Something else here
+      </a></li>
+      <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="#">
+        <span class="d-inline-block bg-info rounded-circle" style="width: .5em; height: .5em;"></span>
+        Separated link
+      </a></li>
+    </ul>
+  </div>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="d-flex gap-5 justify-content-center" id="dropdownIcons">
+  <ul class="dropdown-menu mx-0 shadow" style="width: 220px;">
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
+        Documents
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg>
+        Photos
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg>
+        Movies
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg>
+        Music
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg>
+        Games
+      </a>
+    </li>
+    <li><hr class="dropdown-divider"></li>
+    <li>
+      <a class="dropdown-item dropdown-item-danger d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg>
+        Trash
+      </a>
+    </li>
+  </ul>
+  <ul class="dropdown-menu dropdown-menu-dark mx-0 border-0 shadow" style="width: 220px;">
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#files"/></svg>
+        Documents
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#image-fill"/></svg>
+        Photos
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#film"/></svg>
+        Movies
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#music-note-beamed"/></svg>
+        Music
+      </a>
+    </li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#joystick"/></svg>
+        Games
+      </a>
+    </li>
+    <li><hr class="dropdown-divider"></li>
+    <li>
+      <a class="dropdown-item d-flex gap-2 align-items-center" href="#">
+        <svg class="bi" width="16" height="16"><use xlink:href="#trash"/></svg>
+        Trash
+      </a>
+    </li>
+  </ul>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="dropdown-menu p-2 shadow rounded-3" style="width: 340px" id="dropdownCalendar">
+  <div class="d-grid gap-1">
+    <div class="cal">
+      <div class="cal-month">
+        <button class="btn cal-btn" type="button">
+          <svg class="bi" width="16" height="16"><use xlink:href="#arrow-left-short"/></svg>
+        </button>
+        <strong class="cal-month-name">June</strong>
+        <select class="form-select cal-month-name d-none">
+          <option value="January">January</option>
+          <option value="February">February</option>
+          <option value="March">March</option>
+          <option value="April">April</option>
+          <option value="May">May</option>
+          <option selected value="June">June</option>
+          <option value="July">July</option>
+          <option value="August">August</option>
+          <option value="September">September</option>
+          <option value="October">October</option>
+          <option value="November">November</option>
+          <option value="December">December</option>
+        </select>
+        <button class="btn cal-btn" type="button">
+          <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
+        </button>
+      </div>
+      <div class="cal-weekdays text-muted">
+        <div class="cal-weekday">Sun</div>
+        <div class="cal-weekday">Mon</div>
+        <div class="cal-weekday">Tue</div>
+        <div class="cal-weekday">Wed</div>
+        <div class="cal-weekday">Thu</div>
+        <div class="cal-weekday">Fri</div>
+        <div class="cal-weekday">Sat</div>
+      </div>
+      <div class="cal-days">
+        <button class="btn cal-btn" disabled type="button">30</button>
+        <button class="btn cal-btn" disabled type="button">31</button>
+
+        <button class="btn cal-btn" type="button">1</button>
+        <button class="btn cal-btn" type="button">2</button>
+        <button class="btn cal-btn" type="button">3</button>
+        <button class="btn cal-btn" type="button">4</button>
+        <button class="btn cal-btn" type="button">5</button>
+        <button class="btn cal-btn" type="button">6</button>
+        <button class="btn cal-btn" type="button">7</button>
+
+        <button class="btn cal-btn" type="button">8</button>
+        <button class="btn cal-btn" type="button">9</button>
+        <button class="btn cal-btn" type="button">10</button>
+        <button class="btn cal-btn" type="button">11</button>
+        <button class="btn cal-btn" type="button">12</button>
+        <button class="btn cal-btn" type="button">13</button>
+        <button class="btn cal-btn" type="button">14</button>
+
+        <button class="btn cal-btn" type="button">15</button>
+        <button class="btn cal-btn" type="button">16</button>
+        <button class="btn cal-btn" type="button">17</button>
+        <button class="btn cal-btn" type="button">18</button>
+        <button class="btn cal-btn" type="button">19</button>
+        <button class="btn cal-btn" type="button">20</button>
+        <button class="btn cal-btn" type="button">21</button>
+
+        <button class="btn cal-btn" type="button">22</button>
+        <button class="btn cal-btn" type="button">23</button>
+        <button class="btn cal-btn" type="button">24</button>
+        <button class="btn cal-btn" type="button">25</button>
+        <button class="btn cal-btn" type="button">26</button>
+        <button class="btn cal-btn" type="button">27</button>
+        <button class="btn cal-btn" type="button">28</button>
+
+        <button class="btn cal-btn" type="button">29</button>
+        <button class="btn cal-btn" type="button">30</button>
+        <button class="btn cal-btn" type="button">31</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="dropdown-menu d-flex align-items-stretch p-3 rounded-3 shadow-lg" style="width: 600px" id="dropdownMega">
+  <nav class="d-grid gap-2 col-8">
+    <a href="#" class="btn btn-hover-light d-flex align-items-center gap-3 py-2 px-3 lh-sm">
+      <svg class="bi" width="32" height="32"><use xlink:href="#image-fill"/></svg>
+      <div>
+        <strong class="d-block">Features</strong>
+        <small>Take a tour through the product</small>
+      </div>
+    </a>
+    <a href="#" class="btn btn-hover-light d-flex align-items-center gap-3 py-2 px-3 lh-sm">
+      <svg class="bi" width="32" height="32"><use xlink:href="#question-circle"/></svg>
+      <div>
+        <strong class="d-block">Support</strong>
+        <small>Get help from our support crew</small>
+      </div>
+    </a>
+  </nav>
+  <div class="col-4">
+    ...
+  </div>
+</div>
\ No newline at end of file
diff --git a/site/content/docs/5.1/examples/features/features.css b/site/content/docs/5.1/examples/features/features.css
new file mode 100644
index 000000000..33942f7f1
--- /dev/null
+++ b/site/content/docs/5.1/examples/features/features.css
@@ -0,0 +1,61 @@
+.b-example-divider {
+  height: 3rem;
+  background-color: rgba(0, 0, 0, .1);
+  border: solid rgba(0, 0, 0, .15);
+  border-width: 1px 0;
+  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+}
+
+.bi {
+  vertical-align: -.125em;
+  fill: currentColor;
+}
+
+.feature-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 4rem;
+  height: 4rem;
+  margin-bottom: 1rem;
+  font-size: 2rem;
+  color: #fff;
+  border-radius: .75rem;
+}
+
+.icon-link {
+  display: inline-flex;
+  align-items: center;
+}
+.icon-link > .bi {
+  margin-top: .125rem;
+  margin-left: .125rem;
+  transition: transform .25s ease-in-out;
+  fill: currentColor;
+}
+.icon-link:hover > .bi {
+  transform: translate(.25rem);
+}
+
+.icon-square {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+  border-radius: .75rem;
+}
+
+.rounded-4 { border-radius: .5rem; }
+.rounded-5 { border-radius: 1rem; }
+
+.text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); }
+.text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); }
+.text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }
+
+.card-cover {
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+}
diff --git a/site/content/docs/5.1/examples/features/index.html b/site/content/docs/5.1/examples/features/index.html
new file mode 100644
index 000000000..1e331f00a
--- /dev/null
+++ b/site/content/docs/5.1/examples/features/index.html
@@ -0,0 +1,288 @@
+---
+layout: examples
+title: Features
+extra_css:
+  - "features.css"
+body_class: ""
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <symbol id="bootstrap" viewBox="0 0 118 94">
+    <title>Bootstrap</title>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
+  </symbol>
+  <symbol id="home" viewBox="0 0 16 16">
+    <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/>
+  </symbol>
+  <symbol id="speedometer2" viewBox="0 0 16 16">
+    <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
+    <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/>
+  </symbol>
+  <symbol id="table" viewBox="0 0 16 16">
+    <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/>
+  </symbol>
+  <symbol id="people-circle" viewBox="0 0 16 16">
+    <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
+    <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
+  </symbol>
+  <symbol id="grid" viewBox="0 0 16 16">
+    <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
+  </symbol>
+  <symbol id="collection" viewBox="0 0 16 16">
+    <path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/>
+  </symbol>
+  <symbol id="calendar3" viewBox="0 0 16 16">
+    <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
+    <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
+  </symbol>
+  <symbol id="chat-quote-fill" viewBox="0 0 16 16">
+    <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/>
+  </symbol>
+  <symbol id="cpu-fill" viewBox="0 0 16 16">
+    <path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
+    <path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/>
+  </symbol>
+  <symbol id="gear-fill" viewBox="0 0 16 16">
+    <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
+  </symbol>
+  <symbol id="speedometer" viewBox="0 0 16 16">
+    <path d="M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2zM3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
+    <path fill-rule="evenodd" d="M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.945 11.945 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0z"/>
+  </symbol>
+  <symbol id="toggles2" viewBox="0 0 16 16">
+    <path d="M9.465 10H12a2 2 0 1 1 0 4H9.465c.34-.588.535-1.271.535-2 0-.729-.195-1.412-.535-2z"/>
+    <path d="M6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm.535-10a3.975 3.975 0 0 1-.409-1H4a1 1 0 0 1 0-2h2.126c.091-.355.23-.69.41-1H4a2 2 0 1 0 0 4h2.535z"/>
+    <path d="M14 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/>
+  </symbol>
+  <symbol id="tools" viewBox="0 0 16 16">
+    <path d="M1 0L0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
+  </symbol>
+  <symbol id="chevron-right" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+  </symbol>
+  <symbol id="geo-fill" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/>
+  </symbol>
+</svg>
+<main>
+  <h1 class="visually-hidden">Features examples</h1>
+
+  <div class="container px-4 py-5" id="featured-3">
+    <h2 class="pb-2 border-bottom">Columns with icons</h2>
+    <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
+      <div class="feature col">
+        <div class="feature-icon bg-primary bg-gradient">
+          <svg class="bi" width="1em" height="1em"><use xlink:href="#collection"/></svg>
+        </div>
+        <h2>Featured title</h2>
+        <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
+        <a href="#" class="icon-link">
+          Call to action
+          <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
+        </a>
+      </div>
+      <div class="feature col">
+        <div class="feature-icon bg-primary bg-gradient">
+          <svg class="bi" width="1em" height="1em"><use xlink:href="#people-circle"/></svg>
+        </div>
+        <h2>Featured title</h2>
+        <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
+        <a href="#" class="icon-link">
+          Call to action
+          <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
+        </a>
+      </div>
+      <div class="feature col">
+        <div class="feature-icon bg-primary bg-gradient">
+          <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
+        </div>
+        <h2>Featured title</h2>
+        <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
+        <a href="#" class="icon-link">
+          Call to action
+          <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <div class="b-example-divider"></div>
+
+  <div class="container px-4 py-5" id="hanging-icons">
+    <h2 class="pb-2 border-bottom">Hanging icons</h2>
+    <div class="row g-4 py-5 row-cols-1 row-cols-lg-3">
+      <div class="col d-flex align-items-start">
+        <div class="icon-square bg-light text-dark flex-shrink-0 me-3">
+          <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
+        </div>
+        <div>
+          <h2>Featured title</h2>
+          <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
+          <a href="#" class="btn btn-primary">
+            Primary button
+          </a>
+        </div>
+      </div>
+      <div class="col d-flex align-items-start">
+        <div class="icon-square bg-light text-dark flex-shrink-0 me-3">
+          <svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg>
+        </div>
+        <div>
+          <h2>Featured title</h2>
+          <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
+          <a href="#" class="btn btn-primary">
+            Primary button
+          </a>
+        </div>
+      </div>
+      <div class="col d-flex align-items-start">
+        <div class="icon-square bg-light text-dark flex-shrink-0 me-3">
+          <svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg>
+        </div>
+        <div>
+          <h2>Featured title</h2>
+          <p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
+          <a href="#" class="btn btn-primary">
+            Primary button
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="b-example-divider"></div>
+
+  <div class="container px-4 py-5" id="custom-cards">
+    <h2 class="pb-2 border-bottom">Custom cards</h2>
+
+    <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-5">
+      <div class="col">
+        <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');">
+          <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
+            <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h2>
+            <ul class="d-flex list-unstyled mt-auto">
+              <li class="me-auto">
+                <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
+              </li>
+              <li class="d-flex align-items-center me-3">
+                <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
+                <small>Earth</small>
+              </li>
+              <li class="d-flex align-items-center">
+                <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
+                <small>3d</small>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div class="col">
+        <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');">
+          <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
+            <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h2>
+            <ul class="d-flex list-unstyled mt-auto">
+              <li class="me-auto">
+                <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
+              </li>
+              <li class="d-flex align-items-center me-3">
+                <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
+                <small>Pakistan</small>
+              </li>
+              <li class="d-flex align-items-center">
+                <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
+                <small>4d</small>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div class="col">
+        <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow-lg" style="background-image: url('unsplash-photo-3.jpg');">
+          <div class="d-flex flex-column h-100 p-5 pb-3 text-shadow-1">
+            <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Another longer title belongs here</h2>
+            <ul class="d-flex list-unstyled mt-auto">
+              <li class="me-auto">
+                <img src="https://github.com/twbs.png" alt="Bootstrap" width="32" height="32" class="rounded-circle border border-white">
+              </li>
+              <li class="d-flex align-items-center me-3">
+                <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#geo-fill"/></svg>
+                <small>California</small>
+              </li>
+              <li class="d-flex align-items-center">
+                <svg class="bi me-2" width="1em" height="1em"><use xlink:href="#calendar3"/></svg>
+                <small>5d</small>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="b-example-divider"></div>
+
+  <div class="container px-4 py-5" id="icon-grid">
+    <h2 class="pb-2 border-bottom">Icon grid</h2>
+
+    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
+      <div class="col d-flex align-items-start">
+        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
+        <div>
+          <h4 class="fw-bold mb-0">Featured title</h4>
+          <p>Paragraph of text beneath the heading to explain the heading.</p>
+        </div>
+      </div>
+      <div class="col d-flex align-items-start">
+        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg>
+        <div>
+          <h4 class="fw-bold mb-0">Featured title</h4>
+          <p>Paragraph of text beneath the heading to explain the heading.</p>
+        </div>
+      </div>
+      <div class="col d-flex align-items-start">
+        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg>
+        <div>
+          <h4 class="fw-bold mb-0">Featured title</h4>
+          <p>Paragraph of text beneath the heading to explain the heading.</p>
+        </div>
+      </div>
+      <div class="col d-flex align-items-start">
+        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg>
+        <div>
+          <h4 class="fw-bold mb-0">Featured title</h4>
+          <p>Paragraph of text beneath the heading to explain the heading.</p>
+        </div>
+      </div>
+      <div class="col d-flex align-items-start">
+        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg>
+        <div>
+          <h4 class="fw-bold mb-0">Featured title</h4>
+          <p>Paragraph of text beneath the heading to explain the heading.</p>
+        </div>
+      </div>
+      <div class="col d-flex align-items-start">
+        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg>
+        <div>
+          <h4 class="fw-bold mb-0">Featured title</h4>
+          <p>Paragraph of text beneath the heading to explain the heading.</p>
+        </div>
+      </div>
+      <div class="col d-flex align-items-start">
+        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg>
+        <div>
+          <h4 class="fw-bold mb-0">Featured title</h4>
+          <p>Paragraph of text beneath the heading to explain the heading.</p>
+        </div>
+      </div>
+      <div class="col d-flex align-items-start">
+        <svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg>
+        <div>
+          <h4 class="fw-bold mb-0">Featured title</h4>
+          <p>Paragraph of text beneath the heading to explain the heading.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>
diff --git a/site/content/docs/5.1/examples/features/unsplash-photo-1.jpg b/site/content/docs/5.1/examples/features/unsplash-photo-1.jpg
new file mode 100644
index 000000000..ed2e36a78
--- /dev/null
+++ b/site/content/docs/5.1/examples/features/unsplash-photo-1.jpg
diff --git a/site/content/docs/5.1/examples/features/unsplash-photo-2.jpg b/site/content/docs/5.1/examples/features/unsplash-photo-2.jpg
new file mode 100644
index 000000000..b66864a00
--- /dev/null
+++ b/site/content/docs/5.1/examples/features/unsplash-photo-2.jpg
diff --git a/site/content/docs/5.1/examples/features/unsplash-photo-3.jpg b/site/content/docs/5.1/examples/features/unsplash-photo-3.jpg
new file mode 100644
index 000000000..c411b17ec
--- /dev/null
+++ b/site/content/docs/5.1/examples/features/unsplash-photo-3.jpg
diff --git a/site/content/docs/5.1/examples/footers/footers.css b/site/content/docs/5.1/examples/footers/footers.css
new file mode 100644
index 000000000..4e826827e
--- /dev/null
+++ b/site/content/docs/5.1/examples/footers/footers.css
@@ -0,0 +1,12 @@
+.b-example-divider {
+  height: 3rem;
+  background-color: rgba(0, 0, 0, .1);
+  border: solid rgba(0, 0, 0, .15);
+  border-width: 1px 0;
+  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+}
+
+.bi {
+  vertical-align: -.125em;
+  fill: currentColor;
+}
diff --git a/site/content/docs/5.1/examples/footers/index.html b/site/content/docs/5.1/examples/footers/index.html
new file mode 100644
index 000000000..b26909574
--- /dev/null
+++ b/site/content/docs/5.1/examples/footers/index.html
@@ -0,0 +1,188 @@
+---
+layout: examples
+title: Footers
+extra_css:
+  - "footers.css"
+body_class: ""
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <symbol id="bootstrap" viewBox="0 0 118 94">
+    <title>Bootstrap</title>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
+  </symbol>
+  <symbol id="facebook" viewBox="0 0 16 16">
+    <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
+  </symbol>
+  <symbol id="instagram" viewBox="0 0 16 16">
+      <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
+  </symbol>
+  <symbol id="twitter" viewBox="0 0 16 16">
+    <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
+  </symbol>
+</svg>
+
+<div class="container">
+  <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
+    <p class="col-md-4 mb-0 text-muted">&copy; {{< year >}} Company, Inc</p>
+
+    <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
+      <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+    </a>
+
+    <ul class="nav col-md-4 justify-content-end">
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li>
+    </ul>
+  </footer>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="container">
+  <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
+    <div class="col-md-4 d-flex align-items-center">
+      <a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
+        <svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
+      </a>
+      <span class="text-muted">&copy; {{< year >}} Company, Inc</span>
+    </div>
+
+    <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
+      <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
+      <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
+      <li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
+    </ul>
+  </footer>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="container">
+  <footer class="py-3 my-4">
+    <ul class="nav justify-content-center border-bottom pb-3 mb-3">
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li>
+      <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li>
+    </ul>
+    <p class="text-center text-muted">&copy; {{< year >}} Company, Inc</p>
+  </footer>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="container">
+  <footer class="row row-cols-5 py-5 my-5 border-top">
+    <div class="col">
+      <a href="/" class="d-flex align-items-center mb-3 link-dark text-decoration-none">
+        <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+      </a>
+      <p class="text-muted">&copy; {{< year >}}</p>
+    </div>
+
+    <div class="col">
+
+    </div>
+
+    <div class="col">
+      <h5>Section</h5>
+      <ul class="nav flex-column">
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
+      </ul>
+    </div>
+
+    <div class="col">
+      <h5>Section</h5>
+      <ul class="nav flex-column">
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
+      </ul>
+    </div>
+
+    <div class="col">
+      <h5>Section</h5>
+      <ul class="nav flex-column">
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
+        <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
+      </ul>
+    </div>
+  </footer>
+</div>
+
+<div class="b-example-divider"></div>
+
+
+<div class="container">
+  <footer class="py-5">
+    <div class="row">
+      <div class="col-2">
+        <h5>Section</h5>
+        <ul class="nav flex-column">
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
+        </ul>
+      </div>
+
+      <div class="col-2">
+        <h5>Section</h5>
+        <ul class="nav flex-column">
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
+        </ul>
+      </div>
+
+      <div class="col-2">
+        <h5>Section</h5>
+        <ul class="nav flex-column">
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li>
+          <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li>
+        </ul>
+      </div>
+
+      <div class="col-4 offset-1">
+        <form>
+          <h5>Subscribe to our newsletter</h5>
+          <p>Monthly digest of whats new and exciting from us.</p>
+          <div class="d-flex w-100 gap-2">
+            <label for="newsletter1" class="visually-hidden">Email address</label>
+            <input id="newsletter1" type="text" class="form-control" placeholder="Email address">
+            <button class="btn btn-primary" type="button">Subscribe</button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <div class="d-flex justify-content-between py-4 my-4 border-top">
+      <p>&copy; {{< year >}} Company, Inc. All rights reserved.</p>
+      <ul class="list-unstyled d-flex">
+        <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
+        <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
+        <li class="ms-3"><a class="link-dark" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
+      </ul>
+    </div>
+  </footer>
+</div>
diff --git a/site/content/docs/5.0/examples/grid/grid.css b/site/content/docs/5.1/examples/grid/grid.css
index 18e3568b1..18e3568b1 100644
--- a/site/content/docs/5.0/examples/grid/grid.css
+++ b/site/content/docs/5.1/examples/grid/grid.css
diff --git a/site/content/docs/5.0/examples/grid/index.html b/site/content/docs/5.1/examples/grid/index.html
index f26829b4f..f26829b4f 100644
--- a/site/content/docs/5.0/examples/grid/index.html
+++ b/site/content/docs/5.1/examples/grid/index.html
diff --git a/site/content/docs/5.1/examples/headers/headers.css b/site/content/docs/5.1/examples/headers/headers.css
new file mode 100644
index 000000000..661a74d55
--- /dev/null
+++ b/site/content/docs/5.1/examples/headers/headers.css
@@ -0,0 +1,32 @@
+.b-example-divider {
+  height: 3rem;
+  background-color: rgba(0, 0, 0, .1);
+  border: solid rgba(0, 0, 0, .15);
+  border-width: 1px 0;
+  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+}
+
+.form-control-dark {
+  color: #fff;
+  background-color: var(--bs-dark);
+  border-color: var(--bs-gray);
+}
+.form-control-dark:focus {
+  color: #fff;
+  background-color: var(--bs-dark);
+  border-color: #fff;
+  box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
+}
+
+.bi {
+  vertical-align: -.125em;
+  fill: currentColor;
+}
+
+.text-small {
+  font-size: 85%;
+}
+
+.dropdown-toggle {
+  outline: 0;
+}
diff --git a/site/content/docs/5.1/examples/headers/index.html b/site/content/docs/5.1/examples/headers/index.html
new file mode 100644
index 000000000..e15b47e5f
--- /dev/null
+++ b/site/content/docs/5.1/examples/headers/index.html
@@ -0,0 +1,295 @@
+---
+layout: examples
+title: Headers
+extra_css:
+  - "headers.css"
+body_class: ""
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <symbol id="bootstrap" viewBox="0 0 118 94">
+    <title>Bootstrap</title>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
+  </symbol>
+  <symbol id="home" viewBox="0 0 16 16">
+    <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/>
+  </symbol>
+  <symbol id="speedometer2" viewBox="0 0 16 16">
+    <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
+    <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/>
+  </symbol>
+  <symbol id="table" viewBox="0 0 16 16">
+    <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/>
+  </symbol>
+  <symbol id="people-circle" viewBox="0 0 16 16">
+    <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
+    <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
+  </symbol>
+  <symbol id="grid" viewBox="0 0 16 16">
+    <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
+  </symbol>
+</svg>
+
+<main>
+  <h1 class="visually-hidden">Headers examples</h1>
+
+  <div class="container">
+    <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
+      <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
+        <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+        <span class="fs-4">Simple header</span>
+      </a>
+
+      <ul class="nav nav-pills">
+        <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
+        <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
+        <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
+        <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
+        <li class="nav-item"><a href="#" class="nav-link">About</a></li>
+      </ul>
+    </header>
+  </div>
+
+  <div class="b-example-divider"></div>
+
+  <div class="container">
+    <header class="d-flex justify-content-center py-3">
+      <ul class="nav nav-pills">
+        <li class="nav-item"><a href="#" class="nav-link active" aria-current="page">Home</a></li>
+        <li class="nav-item"><a href="#" class="nav-link">Features</a></li>
+        <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li>
+        <li class="nav-item"><a href="#" class="nav-link">FAQs</a></li>
+        <li class="nav-item"><a href="#" class="nav-link">About</a></li>
+      </ul>
+    </header>
+  </div>
+
+  <div class="b-example-divider"></div>
+
+  <div class="container">
+    <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom">
+      <a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
+        <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
+      </a>
+
+      <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
+        <li><a href="#" class="nav-link px-2 link-secondary">Home</a></li>
+        <li><a href="#" class="nav-link px-2 link-dark">Features</a></li>
+        <li><a href="#" class="nav-link px-2 link-dark">Pricing</a></li>
+        <li><a href="#" class="nav-link px-2 link-dark">FAQs</a></li>
+        <li><a href="#" class="nav-link px-2 link-dark">About</a></li>
+      </ul>
+
+      <div class="col-md-3 text-end">
+        <button type="button" class="btn btn-outline-primary me-2">Login</button>
+        <button type="button" class="btn btn-primary">Sign-up</button>
+      </div>
+    </header>
+  </div>
+
+  <div class="b-example-divider"></div>
+
+  <header class="p-3 bg-dark text-white">
+    <div class="container">
+      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
+        <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
+          <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
+        </a>
+
+        <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
+          <li><a href="#" class="nav-link px-2 text-secondary">Home</a></li>
+          <li><a href="#" class="nav-link px-2 text-white">Features</a></li>
+          <li><a href="#" class="nav-link px-2 text-white">Pricing</a></li>
+          <li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>
+          <li><a href="#" class="nav-link px-2 text-white">About</a></li>
+        </ul>
+
+        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
+          <input type="search" class="form-control form-control-dark" placeholder="Search..." aria-label="Search">
+        </form>
+
+        <div class="text-end">
+          <button type="button" class="btn btn-outline-light me-2">Login</button>
+          <button type="button" class="btn btn-warning">Sign-up</button>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <div class="b-example-divider"></div>
+
+  <header class="p-3 mb-3 border-bottom">
+    <div class="container">
+      <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
+        <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none">
+          <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
+        </a>
+
+        <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
+          <li><a href="#" class="nav-link px-2 link-secondary">Overview</a></li>
+          <li><a href="#" class="nav-link px-2 link-dark">Inventory</a></li>
+          <li><a href="#" class="nav-link px-2 link-dark">Customers</a></li>
+          <li><a href="#" class="nav-link px-2 link-dark">Products</a></li>
+        </ul>
+
+        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
+          <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
+        </form>
+
+        <div class="dropdown text-end">
+          <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
+            <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
+          </a>
+          <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1">
+            <li><a class="dropdown-item" href="#">New project...</a></li>
+            <li><a class="dropdown-item" href="#">Settings</a></li>
+            <li><a class="dropdown-item" href="#">Profile</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" href="#">Sign out</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <div class="b-example-divider"></div>
+
+  <header class="py-3 mb-3 border-bottom">
+    <div class="container-fluid d-grid gap-3 align-items-center" style="grid-template-columns: 1fr 2fr;">
+      <div class="dropdown">
+        <a href="#" class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-dark text-decoration-none dropdown-toggle" id="dropdownNavLink" data-bs-toggle="dropdown" aria-expanded="false">
+          <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+        </a>
+        <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownNavLink">
+          <li><a class="dropdown-item active" href="#" aria-current="page">Overview</a></li>
+          <li><a class="dropdown-item" href="#">Inventory</a></li>
+          <li><a class="dropdown-item" href="#">Customers</a></li>
+          <li><a class="dropdown-item" href="#">Products</a></li>
+          <li><hr class="dropdown-divider"></li>
+          <li><a class="dropdown-item" href="#">Reports</a></li>
+          <li><a class="dropdown-item" href="#">Analytics</a></li>
+        </ul>
+      </div>
+
+      <div class="d-flex align-items-center">
+        <form class="w-100 me-3">
+          <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
+        </form>
+
+        <div class="flex-shrink-0 dropdown">
+          <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
+            <img src="https://github.com/mdo.png" alt="mdo" width="32" height="32" class="rounded-circle">
+          </a>
+          <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
+            <li><a class="dropdown-item" href="#">New project...</a></li>
+            <li><a class="dropdown-item" href="#">Settings</a></li>
+            <li><a class="dropdown-item" href="#">Profile</a></li>
+            <li><hr class="dropdown-divider"></li>
+            <li><a class="dropdown-item" href="#">Sign out</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <div class="container-fluid pb-3">
+    <div class="d-grid gap-3" style="grid-template-columns: 1fr 2fr;">
+      <div class="bg-light border rounded-3">
+        <br><br><br><br><br><br><br><br><br><br>
+      </div>
+      <div class="bg-light border rounded-3">
+        <br><br><br><br><br><br><br><br><br><br>
+      </div>
+    </div>
+  </div>
+
+  <div class="b-example-divider"></div>
+
+  <nav class="py-2 bg-light border-bottom">
+    <div class="container d-flex flex-wrap">
+      <ul class="nav me-auto">
+        <li class="nav-item"><a href="#" class="nav-link link-dark px-2 active" aria-current="page">Home</a></li>
+        <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Features</a></li>
+        <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Pricing</a></li>
+        <li class="nav-item"><a href="#" class="nav-link link-dark px-2">FAQs</a></li>
+        <li class="nav-item"><a href="#" class="nav-link link-dark px-2">About</a></li>
+      </ul>
+      <ul class="nav">
+        <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Login</a></li>
+        <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Sign up</a></li>
+      </ul>
+    </div>
+  </nav>
+  <header class="py-3 mb-4 border-bottom">
+    <div class="container d-flex flex-wrap justify-content-center">
+      <a href="/" class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-dark text-decoration-none">
+        <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+        <span class="fs-4">Double header</span>
+      </a>
+      <form class="col-12 col-lg-auto mb-3 mb-lg-0">
+        <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
+      </form>
+    </div>
+  </header>
+
+  <div class="b-example-divider"></div>
+
+  <header>
+    <div class="px-3 py-2 bg-dark text-white">
+      <div class="container">
+        <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
+          <a href="/" class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
+            <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"/></svg>
+          </a>
+
+          <ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
+            <li>
+              <a href="#" class="nav-link text-secondary">
+                <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#home"/></svg>
+                Home
+              </a>
+            </li>
+            <li>
+              <a href="#" class="nav-link text-white">
+                <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#speedometer2"/></svg>
+                Dashboard
+              </a>
+            </li>
+            <li>
+              <a href="#" class="nav-link text-white">
+                <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#table"/></svg>
+                Orders
+              </a>
+            </li>
+            <li>
+              <a href="#" class="nav-link text-white">
+                <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#grid"/></svg>
+                Products
+              </a>
+            </li>
+            <li>
+              <a href="#" class="nav-link text-white">
+                <svg class="bi d-block mx-auto mb-1" width="24" height="24"><use xlink:href="#people-circle"/></svg>
+                Customers
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="px-3 py-2 border-bottom mb-3">
+      <div class="container d-flex flex-wrap justify-content-center">
+        <form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto">
+          <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
+        </form>
+
+        <div class="text-end">
+          <button type="button" class="btn btn-light text-dark me-2">Login</button>
+          <button type="button" class="btn btn-primary">Sign-up</button>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <div class="b-example-divider"></div>
+</main>
diff --git a/site/content/docs/5.1/examples/heroes/bootstrap-docs.png b/site/content/docs/5.1/examples/heroes/bootstrap-docs.png
new file mode 100644
index 000000000..471a9eddf
--- /dev/null
+++ b/site/content/docs/5.1/examples/heroes/bootstrap-docs.png
diff --git a/site/content/docs/5.1/examples/heroes/bootstrap-themes.png b/site/content/docs/5.1/examples/heroes/bootstrap-themes.png
new file mode 100644
index 000000000..13c32337d
--- /dev/null
+++ b/site/content/docs/5.1/examples/heroes/bootstrap-themes.png
diff --git a/site/content/docs/5.1/examples/heroes/heroes.css b/site/content/docs/5.1/examples/heroes/heroes.css
new file mode 100644
index 000000000..380b70a4a
--- /dev/null
+++ b/site/content/docs/5.1/examples/heroes/heroes.css
@@ -0,0 +1,11 @@
+.b-example-divider {
+  height: 3rem;
+  background-color: rgba(0, 0, 0, .1);
+  border: solid rgba(0, 0, 0, .15);
+  border-width: 1px 0;
+  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+}
+
+@media (min-width: 992px) {
+  .rounded-lg-3 { border-radius: .3rem; }
+}
diff --git a/site/content/docs/5.1/examples/heroes/index.html b/site/content/docs/5.1/examples/heroes/index.html
new file mode 100644
index 000000000..ef621fd50
--- /dev/null
+++ b/site/content/docs/5.1/examples/heroes/index.html
@@ -0,0 +1,125 @@
+---
+layout: examples
+title: Heroes
+extra_css:
+  - "heroes.css"
+body_class: ""
+---
+
+<main>
+  <h1 class="visually-hidden">Heroes examples</h1>
+
+  <div class="px-4 py-5 my-5 text-center">
+    <img class="d-block mx-auto mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
+    <h1 class="display-5 fw-bold">Centered hero</h1>
+    <div class="col-lg-6 mx-auto">
+      <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
+      <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
+        <button type="button" class="btn btn-primary btn-lg px-4 gap-3">Primary button</button>
+        <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="b-example-divider"></div>
+
+  <div class="px-4 pt-5 my-5 text-center border-bottom">
+    <h1 class="display-4 fw-bold">Centered screenshot</h1>
+    <div class="col-lg-6 mx-auto">
+      <p class="lead mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
+      <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
+        <button type="button" class="btn btn-primary btn-lg px-4 me-sm-3">Primary button</button>
+        <button type="button" class="btn btn-outline-secondary btn-lg px-4">Secondary</button>
+      </div>
+    </div>
+    <div class="overflow-hidden" style="max-height: 30vh;">
+      <div class="container px-5">
+        <img src="bootstrap-docs.png" class="img-fluid border rounded-3 shadow-lg mb-4" alt="Example image" width="700" height="500" loading="lazy">
+      </div>
+    </div>
+  </div>
+
+  <div class="b-example-divider"></div>
+
+  <div class="container col-xxl-8 px-4 py-5">
+    <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
+      <div class="col-10 col-sm-8 col-lg-6">
+        <img src="bootstrap-themes.png" class="d-block mx-lg-auto img-fluid" alt="Bootstrap Themes" width="700" height="500" loading="lazy">
+      </div>
+      <div class="col-lg-6">
+        <h1 class="display-5 fw-bold lh-1 mb-3">Responsive left-aligned hero with image</h1>
+        <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
+        <div class="d-grid gap-2 d-md-flex justify-content-md-start">
+          <button type="button" class="btn btn-primary btn-lg px-4 me-md-2">Primary</button>
+          <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="b-example-divider"></div>
+
+  <div class="container col-xl-10 col-xxl-8 px-4 py-5">
+    <div class="row align-items-center g-lg-5 py-5">
+      <div class="col-lg-7 text-center text-lg-start">
+        <h1 class="display-4 fw-bold lh-1 mb-3">Vertically centered hero sign-up form</h1>
+        <p class="col-lg-10 fs-4">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
+      </div>
+      <div class="col-md-10 mx-auto col-lg-5">
+        <form class="p-4 p-md-5 border rounded-3 bg-light">
+          <div class="form-floating mb-3">
+            <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
+            <label for="floatingInput">Email address</label>
+          </div>
+          <div class="form-floating mb-3">
+            <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
+            <label for="floatingPassword">Password</label>
+          </div>
+          <div class="checkbox mb-3">
+            <label>
+              <input type="checkbox" value="remember-me"> Remember me
+            </label>
+          </div>
+          <button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button>
+          <hr class="my-4">
+          <small class="text-muted">By clicking Sign up, you agree to the terms of use.</small>
+        </form>
+      </div>
+    </div>
+  </div>
+
+  <div class="b-example-divider"></div>
+
+  <div class="container my-5">
+    <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
+      <div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
+        <h1 class="display-4 fw-bold lh-1">Border hero with cropped image and shadows</h1>
+        <p class="lead">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
+        <div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
+          <button type="button" class="btn btn-primary btn-lg px-4 me-md-2 fw-bold">Primary</button>
+          <button type="button" class="btn btn-outline-secondary btn-lg px-4">Default</button>
+        </div>
+      </div>
+      <div class="col-lg-4 offset-lg-1 p-0 overflow-hidden shadow-lg">
+          <img class="rounded-lg-3" src="bootstrap-docs.png" alt="" width="720">
+      </div>
+    </div>
+  </div>
+
+  <div class="b-example-divider"></div>
+
+  <div class="bg-dark text-secondary px-4 py-5 text-center">
+    <div class="py-5">
+      <h1 class="display-5 fw-bold text-white">Dark mode hero</h1>
+      <div class="col-lg-6 mx-auto">
+        <p class="fs-5 mb-4">Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</p>
+        <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
+          <button type="button" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold">Custom button</button>
+          <button type="button" class="btn btn-outline-light btn-lg px-4">Secondary</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="b-example-divider mb-0"></div>
+</main>
diff --git a/site/content/docs/5.1/examples/jumbotron/index.html b/site/content/docs/5.1/examples/jumbotron/index.html
new file mode 100644
index 000000000..99cc61dee
--- /dev/null
+++ b/site/content/docs/5.1/examples/jumbotron/index.html
@@ -0,0 +1,45 @@
+---
+layout: examples
+title: Jumbotron example
+include_js: false
+---
+
+<main>
+  <div class="container py-4">
+    <header class="pb-3 mb-4 border-bottom">
+      <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
+        <span class="fs-4">Jumbotron example</span>
+      </a>
+    </header>
+
+    <div class="p-5 mb-4 bg-light rounded-3">
+      <div class="container-fluid py-5">
+        <h1 class="display-5 fw-bold">Custom jumbotron</h1>
+        <p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
+        <button class="btn btn-primary btn-lg" type="button">Example button</button>
+      </div>
+    </div>
+
+    <div class="row align-items-md-stretch">
+      <div class="col-md-6">
+        <div class="h-100 p-5 text-white bg-dark rounded-3">
+          <h2>Change the background</h2>
+          <p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.</p>
+          <button class="btn btn-outline-light" type="button">Example button</button>
+        </div>
+      </div>
+      <div class="col-md-6">
+        <div class="h-100 p-5 bg-light border rounded-3">
+          <h2>Add borders</h2>
+          <p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p>
+          <button class="btn btn-outline-secondary" type="button">Example button</button>
+        </div>
+      </div>
+    </div>
+
+    <footer class="pt-3 mt-4 text-muted border-top">
+      &copy; {{< year >}}
+    </footer>
+  </div>
+</main>
diff --git a/site/content/docs/5.1/examples/list-groups/index.html b/site/content/docs/5.1/examples/list-groups/index.html
new file mode 100644
index 000000000..c16bad944
--- /dev/null
+++ b/site/content/docs/5.1/examples/list-groups/index.html
@@ -0,0 +1,186 @@
+---
+layout: examples
+title: List groups
+extra_css:
+  - "list-groups.css"
+body_class: ""
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <symbol id="bootstrap" viewBox="0 0 118 94">
+    <title>Bootstrap</title>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
+  </symbol>
+
+  <symbol id="calendar-event" viewBox="0 0 16 16">
+    <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
+    <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
+  </symbol>
+
+  <symbol id="alarm" viewBox="0 0 16 16">
+    <path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"/>
+    <path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"/>
+  </symbol>
+
+  <symbol id="list-check" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
+  </symbol>
+</svg>
+
+<div class="list-group">
+  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
+    <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
+    <div class="d-flex gap-2 w-100 justify-content-between">
+      <div>
+        <h6 class="mb-0">List group item heading</h6>
+        <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
+      </div>
+      <small class="opacity-50 text-nowrap">now</small>
+    </div>
+  </a>
+  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
+    <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
+    <div class="d-flex gap-2 w-100 justify-content-between">
+      <div>
+        <h6 class="mb-0">Another title here</h6>
+        <p class="mb-0 opacity-75">Some placeholder content in a paragraph that goes a little longer so it wraps to a new line.</p>
+      </div>
+      <small class="opacity-50 text-nowrap">3d</small>
+    </div>
+  </a>
+  <a href="#" class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">
+    <img src="https://github.com/twbs.png" alt="twbs" width="32" height="32" class="rounded-circle flex-shrink-0">
+    <div class="d-flex gap-2 w-100 justify-content-between">
+      <div>
+        <h6 class="mb-0">Third heading</h6>
+        <p class="mb-0 opacity-75">Some placeholder content in a paragraph.</p>
+      </div>
+      <small class="opacity-50 text-nowrap">1w</small>
+    </div>
+  </a>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="d-flex gap-5 justify-content-center">
+  <div class="list-group mx-0">
+    <label class="list-group-item d-flex gap-2">
+      <input class="form-check-input flex-shrink-0" type="checkbox" value="" checked>
+      <span>
+        First checkbox
+        <small class="d-block text-muted">With support text underneath to add more detail</small>
+      </span>
+    </label>
+    <label class="list-group-item d-flex gap-2">
+      <input class="form-check-input flex-shrink-0" type="checkbox" value="">
+      <span>
+        Second checkbox
+        <small class="d-block text-muted">Some other text goes here</small>
+      </span>
+    </label>
+    <label class="list-group-item d-flex gap-2">
+      <input class="form-check-input flex-shrink-0" type="checkbox" value="">
+      <span>
+        Third checkbox
+        <small class="d-block text-muted">And we end with another snippet of text</small>
+      </span>
+    </label>
+  </div>
+
+  <div class="list-group mx-0">
+    <label class="list-group-item d-flex gap-2">
+      <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios1" value="" checked>
+      <span>
+        First radio
+        <small class="d-block text-muted">With support text underneath to add more detail</small>
+      </span>
+    </label>
+    <label class="list-group-item d-flex gap-2">
+      <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios2" value="">
+      <span>
+        Second radio
+        <small class="d-block text-muted">Some other text goes here</small>
+      </span>
+    </label>
+    <label class="list-group-item d-flex gap-2">
+      <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios3" value="">
+      <span>
+        Third radio
+        <small class="d-block text-muted">And we end with another snippet of text</small>
+      </span>
+    </label>
+  </div>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="list-group">
+  <label class="list-group-item d-flex gap-3">
+    <input class="form-check-input flex-shrink-0" type="checkbox" value="" checked style="font-size: 1.375em;">
+    <span class="pt-1 form-checked-content">
+      <strong>Finish sales report</strong>
+      <small class="d-block text-muted">
+        <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
+        1:00–2:00pm
+      </small>
+    </span>
+  </label>
+  <label class="list-group-item d-flex gap-3">
+    <input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
+    <span class="pt-1 form-checked-content">
+      <strong>Weekly All Hands</strong>
+      <small class="d-block text-muted">
+        <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
+        2:00–2:30pm
+      </small>
+    </span>
+  </label>
+  <label class="list-group-item d-flex gap-3">
+    <input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
+    <span class="pt-1 form-checked-content">
+      <strong>Out of office</strong>
+      <small class="d-block text-muted">
+        <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#alarm"/></svg>
+        Tomorrow
+      </small>
+    </span>
+  </label>
+  <label class="list-group-item d-flex gap-3 bg-light">
+    <input class="form-check-input form-check-input-placeholder bg-light flex-shrink-0" disabled type="checkbox" value="" style="font-size: 1.375em;">
+    <span class="pt-1 form-checked-content">
+      <span contenteditable="true" class="w-100">Add new task...</span>
+      <small class="d-block text-muted">
+        <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#list-check"/></svg>
+        Choose list...
+      </small>
+    </span>
+  </label>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="list-group list-group-checkable">
+  <input class="list-group-item-check" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios1" value="" checked>
+  <label class="list-group-item py-3" for="listGroupCheckableRadios1">
+    First radio
+    <span class="d-block small opacity-50">With support text underneath to add more detail</span>
+  </label>
+
+  <input class="list-group-item-check" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios2" value="">
+  <label class="list-group-item py-3" for="listGroupCheckableRadios2">
+    Second radio
+    <span class="d-block small opacity-50">Some other text goes here</span>
+  </label>
+
+  <input class="list-group-item-check" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios3" value="">
+  <label class="list-group-item py-3" for="listGroupCheckableRadios3">
+    Third radio
+    <span class="d-block small opacity-50">And we end with another snippet of text</span>
+  </label>
+
+  <input class="list-group-item-check" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios4" value="" disabled>
+  <label class="list-group-item py-3" for="listGroupCheckableRadios4">
+    Fourth disabled radio
+    <span class="d-block small opacity-50">This option is disabled</span>
+  </label>
+</div>
\ No newline at end of file
diff --git a/site/content/docs/5.1/examples/list-groups/list-groups.css b/site/content/docs/5.1/examples/list-groups/list-groups.css
new file mode 100644
index 000000000..11351f87e
--- /dev/null
+++ b/site/content/docs/5.1/examples/list-groups/list-groups.css
@@ -0,0 +1,61 @@
+.b-example-divider {
+  height: 3rem;
+  background-color: rgba(0, 0, 0, .1);
+  border: solid rgba(0, 0, 0, .15);
+  border-width: 1px 0;
+  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+}
+
+.bi {
+  vertical-align: -.125em;
+  fill: currentColor;
+}
+
+.opacity-50 { opacity: .5; }
+.opacity-75 { opacity: .75; }
+
+.list-group {
+  width: auto;
+  max-width: 460px;
+  margin: 4rem auto;
+}
+
+.form-check-input:checked + .form-checked-content {
+  opacity: .5;
+}
+
+.form-check-input-placeholder {
+  pointer-events: none;
+  border-style: dashed;
+}
+[contenteditable]:focus {
+  outline: 0;
+}
+
+.list-group-checkable {
+  display: grid;
+  gap: .5rem;
+  border: 0;
+}
+.list-group-checkable .list-group-item {
+  cursor: pointer;
+  border-radius: .5rem;
+}
+.list-group-item-check {
+  position: absolute;
+  clip: rect(0, 0, 0, 0);
+  pointer-events: none;
+}
+.list-group-item-check:hover + .list-group-item {
+  background-color: var(--bs-light);
+}
+.list-group-item-check:checked + .list-group-item {
+  color: #fff;
+  background-color: var(--bs-blue);
+}
+.list-group-item-check[disabled] + .list-group-item,
+.list-group-item-check:disabled + .list-group-item {
+  pointer-events: none;
+  filter: none;
+  opacity: .5;
+}
diff --git a/site/content/docs/5.0/examples/masonry/index.html b/site/content/docs/5.1/examples/masonry/index.html
index 9061d7cce..9061d7cce 100644
--- a/site/content/docs/5.0/examples/masonry/index.html
+++ b/site/content/docs/5.1/examples/masonry/index.html
diff --git a/site/content/docs/5.1/examples/modals/index.html b/site/content/docs/5.1/examples/modals/index.html
new file mode 100644
index 000000000..cc0feff87
--- /dev/null
+++ b/site/content/docs/5.1/examples/modals/index.html
@@ -0,0 +1,173 @@
+---
+layout: examples
+title: Modals
+extra_css:
+  - "modals.css"
+body_class: ""
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <symbol id="bootstrap" viewBox="0 0 118 94">
+    <title>Bootstrap</title>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
+  </symbol>
+
+  <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
+    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+  </symbol>
+
+  <symbol id="check2" viewBox="0 0 16 16">
+    <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
+  </symbol>
+
+  <symbol id="check2-circle" viewBox="0 0 16 16">
+    <path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"/>
+    <path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z"/>
+  </symbol>
+
+  <symbol id="bookmark-star" viewBox="0 0 16 16">
+    <path d="M7.84 4.1a.178.178 0 0 1 .32 0l.634 1.285a.178.178 0 0 0 .134.098l1.42.206c.145.021.204.2.098.303L9.42 6.993a.178.178 0 0 0-.051.158l.242 1.414a.178.178 0 0 1-.258.187l-1.27-.668a.178.178 0 0 0-.165 0l-1.27.668a.178.178 0 0 1-.257-.187l.242-1.414a.178.178 0 0 0-.05-.158l-1.03-1.001a.178.178 0 0 1 .098-.303l1.42-.206a.178.178 0 0 0 .134-.098L7.84 4.1z"/>
+    <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5V2zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1H4z"/>
+  </symbol>
+
+  <symbol id="grid-fill" viewBox="0 0 16 16">
+    <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
+  </symbol>
+
+  <symbol id="stars" viewBox="0 0 16 16">
+    <path d="M7.657 6.247c.11-.33.576-.33.686 0l.645 1.937a2.89 2.89 0 0 0 1.829 1.828l1.936.645c.33.11.33.576 0 .686l-1.937.645a2.89 2.89 0 0 0-1.828 1.829l-.645 1.936a.361.361 0 0 1-.686 0l-.645-1.937a2.89 2.89 0 0 0-1.828-1.828l-1.937-.645a.361.361 0 0 1 0-.686l1.937-.645a2.89 2.89 0 0 0 1.828-1.828l.645-1.937zM3.794 1.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387A1.734 1.734 0 0 0 4.593 5.69l-.387 1.162a.217.217 0 0 1-.412 0L3.407 5.69A1.734 1.734 0 0 0 2.31 4.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387A1.734 1.734 0 0 0 3.407 2.31l.387-1.162zM10.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732L9.1 2.137a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L10.863.1z"/>
+  </symbol>
+
+  <symbol id="film" viewBox="0 0 16 16">
+    <path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/>
+  </symbol>
+
+  <symbol id="github" viewBox="0 0 16 16">
+    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
+  </symbol>
+
+  <symbol id="twitter" viewBox="0 0 16 16">
+    <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
+  </symbol>
+
+  <symbol id="facebook" viewBox="0 0 16 16">
+    <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
+  </symbol>
+</svg>
+
+<div class="modal modal-sheet position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSheet">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content rounded-6 shadow">
+      <div class="modal-header border-bottom-0">
+        <h5 class="modal-title">Modal title</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body py-0">
+        <p>This is a modal sheet, a variation of the modal that docs itself to the bottom of the viewport like the newer share sheets in iOS.</p>
+      </div>
+      <div class="modal-footer flex-column border-top-0">
+        <button type="button" class="btn btn-lg btn-primary w-100 mx-0 mb-2">Save changes</button>
+        <button type="button" class="btn btn-lg btn-light w-100 mx-0" data-bs-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="modal modal-alert position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalChoice">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content rounded-4 shadow">
+      <div class="modal-body p-4 text-center">
+        <h5 class="mb-0">Enable this setting?</h5>
+        <p class="mb-0">You can always change your mind in your account settings.</p>
+      </div>
+      <div class="modal-footer flex-nowrap p-0">
+        <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0 border-right"><strong>Yes, enable</strong></button>
+        <button type="button" class="btn btn-lg btn-link fs-6 text-decoration-none col-6 m-0 rounded-0" data-bs-dismiss="modal">No thanks</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="modal modal-tour position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalTour">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content rounded-6 shadow">
+      <div class="modal-body p-5">
+        <h2 class="fw-bold mb-0">What's new</h2>
+
+        <ul class="d-grid gap-4 my-5 list-unstyled">
+          <li class="d-flex gap-4">
+            <svg class="bi text-muted flex-shrink-0" width="48" height="48"><use xlink:href="#grid-fill"/></svg>
+            <div>
+              <h5 class="mb-0">Grid view</h5>
+              Not into lists? Try the new grid view.
+            </div>
+          </li>
+          <li class="d-flex gap-4">
+            <svg class="bi text-warning flex-shrink-0" width="48" height="48"><use xlink:href="#bookmark-star"/></svg>
+            <div>
+              <h5 class="mb-0">Bookmarks</h5>
+              Save items you love for easy access later.
+            </div>
+          </li>
+          <li class="d-flex gap-4">
+            <svg class="bi text-primary flex-shrink-0" width="48" height="48"><use xlink:href="#film"/></svg>
+            <div>
+              <h5 class="mb-0">Video embeds</h5>
+              Share videos wherever you go.
+            </div>
+          </li>
+        </ul>
+        <button type="button" class="btn btn-lg btn-primary mt-5 w-100" data-bs-dismiss="modal">Great, thanks!</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="b-example-divider"></div>
+
+<div class="modal modal-signin position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSignin">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content rounded-5 shadow">
+      <div class="modal-header p-5 pb-4 border-bottom-0">
+        <!-- <h5 class="modal-title">Modal title</h5> -->
+        <h2 class="fw-bold mb-0">Sign up for free</h2>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+
+      <div class="modal-body p-5 pt-0">
+        <form class="">
+          <div class="form-floating mb-3">
+            <input type="email" class="form-control rounded-4" id="floatingInput" placeholder="[email protected]">
+            <label for="floatingInput">Email address</label>
+          </div>
+          <div class="form-floating mb-3">
+            <input type="password" class="form-control rounded-4" id="floatingPassword" placeholder="Password">
+            <label for="floatingPassword">Password</label>
+          </div>
+          <button class="w-100 mb-2 btn btn-lg rounded-4 btn-primary" type="submit">Sign up</button>
+          <small class="text-muted">By clicking Sign up, you agree to the terms of use.</small>
+          <hr class="my-4">
+          <h2 class="fs-5 fw-bold mb-3">Or use a third-party</h2>
+          <button class="w-100 py-2 mb-2 btn btn-outline-dark rounded-4" type="submit">
+            <svg class="bi me-1" width="16" height="16"><use xlink:href="#twitter"/></svg>
+            Sign up with Twitter
+          </button>
+          <button class="w-100 py-2 mb-2 btn btn-outline-primary rounded-4" type="submit">
+            <svg class="bi me-1" width="16" height="16"><use xlink:href="#facebook"/></svg>
+            Sign up with Facebook
+          </button>
+          <button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-4" type="submit">
+            <svg class="bi me-1" width="16" height="16"><use xlink:href="#github"/></svg>
+            Sign up with GitHub
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="b-example-divider"></div>
diff --git a/site/content/docs/5.1/examples/modals/modals.css b/site/content/docs/5.1/examples/modals/modals.css
new file mode 100644
index 000000000..8fda8212a
--- /dev/null
+++ b/site/content/docs/5.1/examples/modals/modals.css
@@ -0,0 +1,34 @@
+.b-example-divider {
+  height: 3rem;
+  background-color: rgba(0, 0, 0, .1);
+  border: solid rgba(0, 0, 0, .15);
+  border-width: 1px 0;
+  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+}
+
+.bi {
+  vertical-align: -.125em;
+  fill: currentColor;
+}
+
+.rounded-4 { border-radius: .5rem; }
+.rounded-5 { border-radius: .75rem; }
+.rounded-6 { border-radius: 1rem; }
+
+.modal-sheet .modal-dialog {
+  width: 380px;
+  transition: bottom .75s ease-in-out;
+}
+.modal-sheet .modal-footer {
+  padding-bottom: 2rem;
+}
+
+.modal-alert .modal-dialog {
+  width: 380px;
+}
+
+.border-right { border-right: 1px solid #eee; }
+
+.modal-tour .modal-dialog {
+  width: 380px;
+}
diff --git a/site/content/docs/5.0/examples/navbar-bottom/index.html b/site/content/docs/5.1/examples/navbar-bottom/index.html
index aee772e20..aee772e20 100644
--- a/site/content/docs/5.0/examples/navbar-bottom/index.html
+++ b/site/content/docs/5.1/examples/navbar-bottom/index.html
diff --git a/site/content/docs/5.0/examples/navbar-fixed/index.html b/site/content/docs/5.1/examples/navbar-fixed/index.html
index 848137eff..848137eff 100644
--- a/site/content/docs/5.0/examples/navbar-fixed/index.html
+++ b/site/content/docs/5.1/examples/navbar-fixed/index.html
diff --git a/site/content/docs/5.0/examples/navbar-fixed/navbar-top-fixed.css b/site/content/docs/5.1/examples/navbar-fixed/navbar-top-fixed.css
index c77c0c147..c77c0c147 100644
--- a/site/content/docs/5.0/examples/navbar-fixed/navbar-top-fixed.css
+++ b/site/content/docs/5.1/examples/navbar-fixed/navbar-top-fixed.css
diff --git a/site/content/docs/5.0/examples/navbar-static/index.html b/site/content/docs/5.1/examples/navbar-static/index.html
index fe95dab47..fe95dab47 100644
--- a/site/content/docs/5.0/examples/navbar-static/index.html
+++ b/site/content/docs/5.1/examples/navbar-static/index.html
diff --git a/site/content/docs/5.0/examples/navbar-static/navbar-top.css b/site/content/docs/5.1/examples/navbar-static/navbar-top.css
index 25bbdde09..25bbdde09 100644
--- a/site/content/docs/5.0/examples/navbar-static/navbar-top.css
+++ b/site/content/docs/5.1/examples/navbar-static/navbar-top.css
diff --git a/site/content/docs/5.0/examples/navbars/index.html b/site/content/docs/5.1/examples/navbars/index.html
index 38281f3dd..38281f3dd 100644
--- a/site/content/docs/5.0/examples/navbars/index.html
+++ b/site/content/docs/5.1/examples/navbars/index.html
diff --git a/site/content/docs/5.0/examples/navbars/navbar.css b/site/content/docs/5.1/examples/navbars/navbar.css
index 70d209409..70d209409 100644
--- a/site/content/docs/5.0/examples/navbars/navbar.css
+++ b/site/content/docs/5.1/examples/navbars/navbar.css
diff --git a/site/content/docs/5.0/examples/offcanvas/index.html b/site/content/docs/5.1/examples/offcanvas-navbar/index.html
index 9aed0aed7..5af7e2ea2 100644
--- a/site/content/docs/5.0/examples/offcanvas/index.html
+++ b/site/content/docs/5.1/examples/offcanvas-navbar/index.html
@@ -1,17 +1,18 @@
 ---
 layout: examples
-title: Offcanvas template
+title: Offcanvas navbar template
 extra_css:
   - "offcanvas.css"
 extra_js:
   - src: "offcanvas.js"
 body_class: "bg-light"
+aliases: "/docs/5.1/examples/offcanvas/"
 ---
 
 <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Offcanvas navbar</a>
-    <button class="navbar-toggler p-0 border-0" type="button" data-bs-toggle="offcanvas" aria-label="Toggle navigation">
+    <button class="navbar-toggler p-0 border-0" type="button" id="navbarSideCollapse" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
 
diff --git a/site/content/docs/5.0/examples/offcanvas/offcanvas.css b/site/content/docs/5.1/examples/offcanvas-navbar/offcanvas.css
index 29e26b11b..97fe8399c 100644
--- a/site/content/docs/5.0/examples/offcanvas/offcanvas.css
+++ b/site/content/docs/5.1/examples/offcanvas-navbar/offcanvas.css
@@ -62,6 +62,6 @@ body {
   color: #343a40;
 }
 
-.text-white-50 { color: rgba(255, 255, 255, .5); }
-
-.bg-purple { background-color: #6f42c1; }
+.bg-purple {
+  background-color: #6f42c1;
+}
diff --git a/site/content/docs/5.0/examples/offcanvas/offcanvas.js b/site/content/docs/5.1/examples/offcanvas-navbar/offcanvas.js
index 793ea86cd..91103b1c4 100644
--- a/site/content/docs/5.0/examples/offcanvas/offcanvas.js
+++ b/site/content/docs/5.1/examples/offcanvas-navbar/offcanvas.js
@@ -1,7 +1,7 @@
 (function () {
   'use strict'
 
-  document.querySelector('[data-bs-toggle="offcanvas"]').addEventListener('click', function () {
+  document.querySelector('#navbarSideCollapse').addEventListener('click', function () {
     document.querySelector('.offcanvas-collapse').classList.toggle('open')
   })
 })()
diff --git a/site/content/docs/5.1/examples/pricing/index.html b/site/content/docs/5.1/examples/pricing/index.html
new file mode 100644
index 000000000..c62c68c70
--- /dev/null
+++ b/site/content/docs/5.1/examples/pricing/index.html
@@ -0,0 +1,187 @@
+---
+layout: examples
+title: Pricing example
+extra_css:
+  - "pricing.css"
+include_js: false
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <symbol id="check" viewBox="0 0 16 16">
+    <title>Check</title>
+    <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
+  </symbol>
+</svg>
+
+<div class="container py-3">
+  <header>
+    <div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
+      <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
+        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
+        <span class="fs-4">Pricing example</span>
+      </a>
+
+      <nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
+        <a class="me-3 py-2 text-dark text-decoration-none" href="#">Features</a>
+        <a class="me-3 py-2 text-dark text-decoration-none" href="#">Enterprise</a>
+        <a class="me-3 py-2 text-dark text-decoration-none" href="#">Support</a>
+        <a class="py-2 text-dark text-decoration-none" href="#">Pricing</a>
+      </nav>
+    </div>
+
+    <div class="pricing-header p-3 pb-md-4 mx-auto text-center">
+      <h1 class="display-4 fw-normal">Pricing</h1>
+      <p class="fs-5 text-muted">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
+    </div>
+  </header>
+
+  <main>
+    <div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
+      <div class="col">
+        <div class="card mb-4 rounded-3 shadow-sm">
+          <div class="card-header py-3">
+            <h4 class="my-0 fw-normal">Free</h4>
+          </div>
+          <div class="card-body">
+            <h1 class="card-title pricing-card-title">$0<small class="text-muted fw-light">/mo</small></h1>
+            <ul class="list-unstyled mt-3 mb-4">
+              <li>10 users included</li>
+              <li>2 GB of storage</li>
+              <li>Email support</li>
+              <li>Help center access</li>
+            </ul>
+            <button type="button" class="w-100 btn btn-lg btn-outline-primary">Sign up for free</button>
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <div class="card mb-4 rounded-3 shadow-sm">
+          <div class="card-header py-3">
+            <h4 class="my-0 fw-normal">Pro</h4>
+          </div>
+          <div class="card-body">
+            <h1 class="card-title pricing-card-title">$15<small class="text-muted fw-light">/mo</small></h1>
+            <ul class="list-unstyled mt-3 mb-4">
+              <li>20 users included</li>
+              <li>10 GB of storage</li>
+              <li>Priority email support</li>
+              <li>Help center access</li>
+            </ul>
+            <button type="button" class="w-100 btn btn-lg btn-primary">Get started</button>
+          </div>
+        </div>
+      </div>
+      <div class="col">
+        <div class="card mb-4 rounded-3 shadow-sm border-primary">
+          <div class="card-header py-3 text-white bg-primary border-primary">
+            <h4 class="my-0 fw-normal">Enterprise</h4>
+          </div>
+          <div class="card-body">
+            <h1 class="card-title pricing-card-title">$29<small class="text-muted fw-light">/mo</small></h1>
+            <ul class="list-unstyled mt-3 mb-4">
+              <li>30 users included</li>
+              <li>15 GB of storage</li>
+              <li>Phone and email support</li>
+              <li>Help center access</li>
+            </ul>
+            <button type="button" class="w-100 btn btn-lg btn-primary">Contact us</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <h2 class="display-6 text-center mb-4">Compare plans</h2>
+
+    <div class="table-responsive">
+      <table class="table text-center">
+        <thead>
+          <tr>
+            <th style="width: 34%;"></th>
+            <th style="width: 22%;">Free</th>
+            <th style="width: 22%;">Pro</th>
+            <th style="width: 22%;">Enterprise</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row" class="text-start">Public</th>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+          </tr>
+          <tr>
+            <th scope="row" class="text-start">Private</th>
+            <td></td>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+          </tr>
+        </tbody>
+
+        <tbody>
+          <tr>
+            <th scope="row" class="text-start">Permissions</th>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+          </tr>
+          <tr>
+            <th scope="row" class="text-start">Sharing</th>
+            <td></td>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+          </tr>
+          <tr>
+            <th scope="row" class="text-start">Unlimited members</th>
+            <td></td>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+          </tr>
+          <tr>
+            <th scope="row" class="text-start">Extra security</th>
+            <td></td>
+            <td></td>
+            <td><svg class="bi" width="24" height="24"><use xlink:href="#check"/></svg></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </main>
+
+  <footer class="pt-4 my-md-5 pt-md-5 border-top">
+    <div class="row">
+      <div class="col-12 col-md">
+        <img class="mb-2" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="24" height="19">
+        <small class="d-block mb-3 text-muted">&copy; 2017–{{< year >}}</small>
+      </div>
+      <div class="col-6 col-md">
+        <h5>Features</h5>
+        <ul class="list-unstyled text-small">
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Cool stuff</a></li>
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Random feature</a></li>
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team feature</a></li>
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Stuff for developers</a></li>
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another one</a></li>
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Last time</a></li>
+        </ul>
+      </div>
+      <div class="col-6 col-md">
+        <h5>Resources</h5>
+        <ul class="list-unstyled text-small">
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource</a></li>
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Resource name</a></li>
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Another resource</a></li>
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Final resource</a></li>
+        </ul>
+      </div>
+      <div class="col-6 col-md">
+        <h5>About</h5>
+        <ul class="list-unstyled text-small">
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Team</a></li>
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Locations</a></li>
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Privacy</a></li>
+          <li class="mb-1"><a class="link-secondary text-decoration-none" href="#">Terms</a></li>
+        </ul>
+      </div>
+    </div>
+  </footer>
+</div>
diff --git a/site/content/docs/5.1/examples/pricing/pricing.css b/site/content/docs/5.1/examples/pricing/pricing.css
new file mode 100644
index 000000000..c7304d10b
--- /dev/null
+++ b/site/content/docs/5.1/examples/pricing/pricing.css
@@ -0,0 +1,11 @@
+body {
+  background-image: linear-gradient(180deg, #eee, #fff 100px, #fff);
+}
+
+.container {
+  max-width: 960px;
+}
+
+.pricing-header {
+  max-width: 700px;
+}
diff --git a/site/content/docs/5.0/examples/product/index.html b/site/content/docs/5.1/examples/product/index.html
index 291901efa..291901efa 100644
--- a/site/content/docs/5.0/examples/product/index.html
+++ b/site/content/docs/5.1/examples/product/index.html
diff --git a/site/content/docs/5.0/examples/product/product.css b/site/content/docs/5.1/examples/product/product.css
index 5fcb582b4..5fcb582b4 100644
--- a/site/content/docs/5.0/examples/product/product.css
+++ b/site/content/docs/5.1/examples/product/product.css
diff --git a/site/content/docs/5.1/examples/sidebars/index.html b/site/content/docs/5.1/examples/sidebars/index.html
new file mode 100644
index 000000000..4d628f1c0
--- /dev/null
+++ b/site/content/docs/5.1/examples/sidebars/index.html
@@ -0,0 +1,391 @@
+---
+layout: examples
+title: Sidebars
+extra_css:
+  - "sidebars.css"
+extra_js:
+  - src: "sidebars.js"
+body_class: ""
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+  <symbol id="bootstrap" viewBox="0 0 118 94">
+    <title>Bootstrap</title>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z"></path>
+  </symbol>
+  <symbol id="home" viewBox="0 0 16 16">
+    <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"/>
+  </symbol>
+  <symbol id="speedometer2" viewBox="0 0 16 16">
+    <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
+    <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/>
+  </symbol>
+  <symbol id="table" viewBox="0 0 16 16">
+    <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/>
+  </symbol>
+  <symbol id="people-circle" viewBox="0 0 16 16">
+    <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
+    <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
+  </symbol>
+  <symbol id="grid" viewBox="0 0 16 16">
+    <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
+  </symbol>
+  <symbol id="collection" viewBox="0 0 16 16">
+    <path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/>
+  </symbol>
+  <symbol id="calendar3" viewBox="0 0 16 16">
+    <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"/>
+    <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
+  </symbol>
+  <symbol id="chat-quote-fill" viewBox="0 0 16 16">
+    <path d="M16 8c0 3.866-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.584.296-1.925.864-4.181 1.234-.2.032-.352-.176-.273-.362.354-.836.674-1.95.77-2.966C.744 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7zM7.194 6.766a1.688 1.688 0 0 0-.227-.272 1.467 1.467 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 5.734 6C4.776 6 4 6.746 4 7.667c0 .92.776 1.666 1.734 1.666.343 0 .662-.095.931-.26-.137.389-.39.804-.81 1.22a.405.405 0 0 0 .011.59c.173.16.447.155.614-.01 1.334-1.329 1.37-2.758.941-3.706a2.461 2.461 0 0 0-.227-.4zM11 9.073c-.136.389-.39.804-.81 1.22a.405.405 0 0 0 .012.59c.172.16.446.155.613-.01 1.334-1.329 1.37-2.758.942-3.706a2.466 2.466 0 0 0-.228-.4 1.686 1.686 0 0 0-.227-.273 1.466 1.466 0 0 0-.469-.324l-.008-.004A1.785 1.785 0 0 0 10.07 6c-.957 0-1.734.746-1.734 1.667 0 .92.777 1.666 1.734 1.666.343 0 .662-.095.931-.26z"/>
+  </symbol>
+  <symbol id="cpu-fill" viewBox="0 0 16 16">
+    <path d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
+    <path d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5z"/>
+  </symbol>
+  <symbol id="gear-fill" viewBox="0 0 16 16">
+    <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
+  </symbol>
+  <symbol id="speedometer" viewBox="0 0 16 16">
+    <path d="M8 2a.5.5 0 0 1 .5.5V4a.5.5 0 0 1-1 0V2.5A.5.5 0 0 1 8 2zM3.732 3.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 8a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 8zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 7.31A.91.91 0 1 0 8.85 8.569l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
+    <path fill-rule="evenodd" d="M6.664 15.889A8 8 0 1 1 9.336.11a8 8 0 0 1-2.672 15.78zm-4.665-4.283A11.945 11.945 0 0 1 8 10c2.186 0 4.236.585 6.001 1.606a7 7 0 1 0-12.002 0z"/>
+  </symbol>
+  <symbol id="toggles2" viewBox="0 0 16 16">
+    <path d="M9.465 10H12a2 2 0 1 1 0 4H9.465c.34-.588.535-1.271.535-2 0-.729-.195-1.412-.535-2z"/>
+    <path d="M6 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm.535-10a3.975 3.975 0 0 1-.409-1H4a1 1 0 0 1 0-2h2.126c.091-.355.23-.69.41-1H4a2 2 0 1 0 0 4h2.535z"/>
+    <path d="M14 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/>
+  </symbol>
+  <symbol id="tools" viewBox="0 0 16 16">
+    <path d="M1 0L0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.356 3.356a1 1 0 0 0 1.414 0l1.586-1.586a1 1 0 0 0 0-1.414l-3.356-3.356a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3c0-.269-.035-.53-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814L1 0zm9.646 10.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708zM3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026L3 11z"/>
+  </symbol>
+  <symbol id="chevron-right" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+  </symbol>
+  <symbol id="geo-fill" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M4 4a4 4 0 1 1 4.5 3.969V13.5a.5.5 0 0 1-1 0V7.97A4 4 0 0 1 4 3.999zm2.493 8.574a.5.5 0 0 1-.411.575c-.712.118-1.28.295-1.655.493a1.319 1.319 0 0 0-.37.265.301.301 0 0 0-.057.09V14l.002.008a.147.147 0 0 0 .016.033.617.617 0 0 0 .145.15c.165.13.435.27.813.395.751.25 1.82.414 3.024.414s2.273-.163 3.024-.414c.378-.126.648-.265.813-.395a.619.619 0 0 0 .146-.15.148.148 0 0 0 .015-.033L12 14v-.004a.301.301 0 0 0-.057-.09 1.318 1.318 0 0 0-.37-.264c-.376-.198-.943-.375-1.655-.493a.5.5 0 1 1 .164-.986c.77.127 1.452.328 1.957.594C12.5 13 13 13.4 13 14c0 .426-.26.752-.544.977-.29.228-.68.413-1.116.558-.878.293-2.059.465-3.34.465-1.281 0-2.462-.172-3.34-.465-.436-.145-.826-.33-1.116-.558C3.26 14.752 3 14.426 3 14c0-.599.5-1 .961-1.243.505-.266 1.187-.467 1.957-.594a.5.5 0 0 1 .575.411z"/>
+  </symbol>
+</svg>
+
+<main>
+  <h1 class="visually-hidden">Sidebars examples</h1>
+
+  <div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 280px;">
+    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
+      <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+      <span class="fs-4">Sidebar</span>
+    </a>
+    <hr>
+    <ul class="nav nav-pills flex-column mb-auto">
+      <li class="nav-item">
+        <a href="#" class="nav-link active" aria-current="page">
+          <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg>
+          Home
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link text-white">
+          <svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
+          Dashboard
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link text-white">
+          <svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg>
+          Orders
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link text-white">
+          <svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
+          Products
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link text-white">
+          <svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
+          Customers
+        </a>
+      </li>
+    </ul>
+    <hr>
+    <div class="dropdown">
+      <a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
+        <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
+        <strong>mdo</strong>
+      </a>
+      <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
+        <li><a class="dropdown-item" href="#">New project...</a></li>
+        <li><a class="dropdown-item" href="#">Settings</a></li>
+        <li><a class="dropdown-item" href="#">Profile</a></li>
+        <li><hr class="dropdown-divider"></li>
+        <li><a class="dropdown-item" href="#">Sign out</a></li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="b-example-divider"></div>
+
+  <div class="d-flex flex-column flex-shrink-0 p-3 bg-light" style="width: 280px;">
+    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
+      <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+      <span class="fs-4">Sidebar</span>
+    </a>
+    <hr>
+    <ul class="nav nav-pills flex-column mb-auto">
+      <li class="nav-item">
+        <a href="#" class="nav-link active" aria-current="page">
+          <svg class="bi me-2" width="16" height="16"><use xlink:href="#home"/></svg>
+          Home
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link link-dark">
+          <svg class="bi me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
+          Dashboard
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link link-dark">
+          <svg class="bi me-2" width="16" height="16"><use xlink:href="#table"/></svg>
+          Orders
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link link-dark">
+          <svg class="bi me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
+          Products
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link link-dark">
+          <svg class="bi me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
+          Customers
+        </a>
+      </li>
+    </ul>
+    <hr>
+    <div class="dropdown">
+      <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
+        <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
+        <strong>mdo</strong>
+      </a>
+      <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
+        <li><a class="dropdown-item" href="#">New project...</a></li>
+        <li><a class="dropdown-item" href="#">Settings</a></li>
+        <li><a class="dropdown-item" href="#">Profile</a></li>
+        <li><hr class="dropdown-divider"></li>
+        <li><a class="dropdown-item" href="#">Sign out</a></li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="b-example-divider"></div>
+
+  <div class="d-flex flex-column flex-shrink-0 bg-light" style="width: 4.5rem;">
+    <a href="/" class="d-block p-3 link-dark text-decoration-none" title="Icon-only" data-bs-toggle="tooltip" data-bs-placement="right">
+      <svg class="bi" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
+      <span class="visually-hidden">Icon-only</span>
+    </a>
+    <ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
+      <li class="nav-item">
+        <a href="#" class="nav-link active py-3 border-bottom" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
+          <svg class="bi" width="24" height="24" role="img" aria-label="Home"><use xlink:href="#home"/></svg>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link py-3 border-bottom" title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right">
+          <svg class="bi" width="24" height="24" role="img" aria-label="Dashboard"><use xlink:href="#speedometer2"/></svg>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link py-3 border-bottom" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right">
+          <svg class="bi" width="24" height="24" role="img" aria-label="Orders"><use xlink:href="#table"/></svg>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link py-3 border-bottom" title="Products" data-bs-toggle="tooltip" data-bs-placement="right">
+          <svg class="bi" width="24" height="24" role="img" aria-label="Products"><use xlink:href="#grid"/></svg>
+        </a>
+      </li>
+      <li>
+        <a href="#" class="nav-link py-3 border-bottom" title="Customers" data-bs-toggle="tooltip" data-bs-placement="right">
+          <svg class="bi" width="24" height="24" role="img" aria-label="Customers"><use xlink:href="#people-circle"/></svg>
+        </a>
+      </li>
+    </ul>
+    <div class="dropdown border-top">
+      <a href="#" class="d-flex align-items-center justify-content-center p-3 link-dark text-decoration-none dropdown-toggle" id="dropdownUser3" data-bs-toggle="dropdown" aria-expanded="false">
+        <img src="https://github.com/mdo.png" alt="mdo" width="24" height="24" class="rounded-circle">
+      </a>
+      <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser3">
+        <li><a class="dropdown-item" href="#">New project...</a></li>
+        <li><a class="dropdown-item" href="#">Settings</a></li>
+        <li><a class="dropdown-item" href="#">Profile</a></li>
+        <li><hr class="dropdown-divider"></li>
+        <li><a class="dropdown-item" href="#">Sign out</a></li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="b-example-divider"></div>
+
+  <div class="flex-shrink-0 p-3 bg-white" style="width: 280px;">
+    <a href="/" class="d-flex align-items-center pb-3 mb-3 link-dark text-decoration-none border-bottom">
+      <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
+      <span class="fs-5 fw-semibold">Collapsible</span>
+    </a>
+    <ul class="list-unstyled ps-0">
+      <li class="mb-1">
+        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true">
+          Home
+        </button>
+        <div class="collapse show" id="home-collapse">
+          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+            <li><a href="#" class="link-dark rounded">Overview</a></li>
+            <li><a href="#" class="link-dark rounded">Updates</a></li>
+            <li><a href="#" class="link-dark rounded">Reports</a></li>
+          </ul>
+        </div>
+      </li>
+      <li class="mb-1">
+        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#dashboard-collapse" aria-expanded="false">
+          Dashboard
+        </button>
+        <div class="collapse" id="dashboard-collapse">
+          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+            <li><a href="#" class="link-dark rounded">Overview</a></li>
+            <li><a href="#" class="link-dark rounded">Weekly</a></li>
+            <li><a href="#" class="link-dark rounded">Monthly</a></li>
+            <li><a href="#" class="link-dark rounded">Annually</a></li>
+          </ul>
+        </div>
+      </li>
+      <li class="mb-1">
+        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#orders-collapse" aria-expanded="false">
+          Orders
+        </button>
+        <div class="collapse" id="orders-collapse">
+          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+            <li><a href="#" class="link-dark rounded">New</a></li>
+            <li><a href="#" class="link-dark rounded">Processed</a></li>
+            <li><a href="#" class="link-dark rounded">Shipped</a></li>
+            <li><a href="#" class="link-dark rounded">Returned</a></li>
+          </ul>
+        </div>
+      </li>
+      <li class="border-top my-3"></li>
+      <li class="mb-1">
+        <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#account-collapse" aria-expanded="false">
+          Account
+        </button>
+        <div class="collapse" id="account-collapse">
+          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
+            <li><a href="#" class="link-dark rounded">New...</a></li>
+            <li><a href="#" class="link-dark rounded">Profile</a></li>
+            <li><a href="#" class="link-dark rounded">Settings</a></li>
+            <li><a href="#" class="link-dark rounded">Sign out</a></li>
+          </ul>
+        </div>
+      </li>
+    </ul>
+  </div>
+
+  <div class="b-example-divider"></div>
+
+  <div class="d-flex flex-column align-items-stretch flex-shrink-0 bg-white" style="width: 380px;">
+    <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-dark text-decoration-none border-bottom">
+      <svg class="bi me-2" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
+      <span class="fs-5 fw-semibold">List group</span>
+    </a>
+    <div class="list-group list-group-flush border-bottom scrollarea">
+      <a href="#" class="list-group-item list-group-item-action active py-3 lh-tight" aria-current="true">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small>Wed</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small class="text-muted">Tues</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small class="text-muted">Mon</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small class="text-muted">Wed</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small class="text-muted">Tues</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small class="text-muted">Mon</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small class="text-muted">Wed</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small class="text-muted">Tues</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small class="text-muted">Mon</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight" aria-current="true">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small class="text-muted">Wed</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small class="text-muted">Tues</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
+        <div class="d-flex w-100 align-items-center justify-content-between">
+          <strong class="mb-1">List group item heading</strong>
+          <small class="text-muted">Mon</small>
+        </div>
+        <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
+      </a>
+    </div>
+  </div>
+
+  <div class="b-example-divider"></div>
+</main>
diff --git a/site/content/docs/5.1/examples/sidebars/sidebars.css b/site/content/docs/5.1/examples/sidebars/sidebars.css
new file mode 100644
index 000000000..6949a379e
--- /dev/null
+++ b/site/content/docs/5.1/examples/sidebars/sidebars.css
@@ -0,0 +1,89 @@
+body {
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
+}
+
+html {
+  height: -webkit-fill-available;
+}
+
+main {
+  display: flex;
+  flex-wrap: nowrap;
+  height: 100vh;
+  height: -webkit-fill-available;
+  max-height: 100vh;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.b-example-divider {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, .1);
+  border: solid rgba(0, 0, 0, .15);
+  border-width: 1px 0;
+  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+}
+
+.bi {
+  vertical-align: -.125em;
+  pointer-events: none;
+  fill: currentColor;
+}
+
+.dropdown-toggle { outline: 0; }
+
+.nav-flush .nav-link {
+  border-radius: 0;
+}
+
+.btn-toggle {
+  display: inline-flex;
+  align-items: center;
+  padding: .25rem .5rem;
+  font-weight: 600;
+  color: rgba(0, 0, 0, .65);
+  background-color: transparent;
+  border: 0;
+}
+.btn-toggle:hover,
+.btn-toggle:focus {
+  color: rgba(0, 0, 0, .85);
+  background-color: #d2f4ea;
+}
+
+.btn-toggle::before {
+  width: 1.25em;
+  line-height: 0;
+  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
+  transition: transform .35s ease;
+  transform-origin: .5em 50%;
+}
+
+.btn-toggle[aria-expanded="true"] {
+  color: rgba(0, 0, 0, .85);
+}
+.btn-toggle[aria-expanded="true"]::before {
+  transform: rotate(90deg);
+}
+
+.btn-toggle-nav a {
+  display: inline-flex;
+  padding: .1875rem .5rem;
+  margin-top: .125rem;
+  margin-left: 1.25rem;
+  text-decoration: none;
+}
+.btn-toggle-nav a:hover,
+.btn-toggle-nav a:focus {
+  background-color: #d2f4ea;
+}
+
+.scrollarea {
+  overflow-y: auto;
+}
+
+.fw-semibold { font-weight: 600; }
+.lh-tight { line-height: 1.25; }
diff --git a/site/content/docs/5.1/examples/sidebars/sidebars.js b/site/content/docs/5.1/examples/sidebars/sidebars.js
new file mode 100644
index 000000000..68384c163
--- /dev/null
+++ b/site/content/docs/5.1/examples/sidebars/sidebars.js
@@ -0,0 +1,8 @@
+/* global bootstrap: false */
+(function () {
+  'use strict'
+  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+  tooltipTriggerList.forEach(function (tooltipTriggerEl) {
+    new bootstrap.Tooltip(tooltipTriggerEl)
+  })
+})()
diff --git a/site/content/docs/5.0/examples/sign-in/index.html b/site/content/docs/5.1/examples/sign-in/index.html
index 6fefc45e6..fb885ba41 100644
--- a/site/content/docs/5.0/examples/sign-in/index.html
+++ b/site/content/docs/5.1/examples/sign-in/index.html
@@ -11,10 +11,16 @@ include_js: false
   <form>
     <img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
     <h1 class="h3 mb-3 fw-normal">Please sign in</h1>
-    <label for="inputEmail" class="visually-hidden">Email address</label>
-    <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
-    <label for="inputPassword" class="visually-hidden">Password</label>
-    <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
+
+    <div class="form-floating">
+      <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
+      <label for="floatingInput">Email address</label>
+    </div>
+    <div class="form-floating">
+      <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
+      <label for="floatingPassword">Password</label>
+    </div>
+
     <div class="checkbox mb-3">
       <label>
         <input type="checkbox" value="remember-me"> Remember me
diff --git a/site/content/docs/5.0/examples/sign-in/signin.css b/site/content/docs/5.1/examples/sign-in/signin.css
index eaa08ba61..4732d1fb9 100644
--- a/site/content/docs/5.0/examples/sign-in/signin.css
+++ b/site/content/docs/5.1/examples/sign-in/signin.css
@@ -17,24 +17,21 @@ body {
   padding: 15px;
   margin: auto;
 }
+
 .form-signin .checkbox {
   font-weight: 400;
 }
-.form-signin .form-control {
-  position: relative;
-  box-sizing: border-box;
-  height: auto;
-  padding: 10px;
-  font-size: 16px;
-}
-.form-signin .form-control:focus {
+
+.form-signin .form-floating:focus-within {
   z-index: 2;
 }
+
 .form-signin input[type="email"] {
   margin-bottom: -1px;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
+
 .form-signin input[type="password"] {
   margin-bottom: 10px;
   border-top-left-radius: 0;
diff --git a/site/content/docs/5.1/examples/starter-template/index.html b/site/content/docs/5.1/examples/starter-template/index.html
new file mode 100644
index 000000000..3623ff180
--- /dev/null
+++ b/site/content/docs/5.1/examples/starter-template/index.html
@@ -0,0 +1,51 @@
+---
+layout: examples
+title: Starter Template
+extra_css:
+  - "starter-template.css"
+---
+
+<div class="col-lg-8 mx-auto p-3 py-md-5">
+  <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
+    <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
+      <svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="me-2" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg>
+      <span class="fs-4">Starter template</span>
+    </a>
+  </header>
+
+  <main>
+    <h1>Get started with Bootstrap</h1>
+    <p class="fs-5 col-md-8">Quickly and easily get started with Bootstrap's compiled, production-ready files with this barebones example featuring some basic HTML and helpful links. Download all our examples to get started.</p>
+
+    <div class="mb-5">
+      <a href="{{< docsref "/examples" >}}" class="btn btn-primary btn-lg px-4">Download examples</a>
+    </div>
+
+    <hr class="col-3 col-md-2 mb-5">
+
+    <div class="row g-5">
+      <div class="col-md-6">
+        <h2>Starter projects</h2>
+        <p>Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.</p>
+        <ul class="icon-list">
+          <li><a href="https://github.com/twbs/bootstrap-npm-starter" rel="noopener" target="_blank">Bootstrap npm starter</a></li>
+          <li class="text-muted">Bootstrap Parcel starter (coming soon!)</li>
+        </ul>
+      </div>
+
+      <div class="col-md-6">
+        <h2>Guides</h2>
+        <p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p>
+        <ul class="icon-list">
+          <li><a href="{{< docsref "/getting-started/introduction" >}}">Bootstrap quick start guide</a></li>
+          <li><a href="{{< docsref "/getting-started/webpack" >}}">Bootstrap Webpack guide</a></li>
+          <li><a href="{{< docsref "/getting-started/parcel" >}}">Bootstrap Parcel guide</a></li>
+          <li><a href="{{< docsref "/getting-started/contribute" >}}">Contributing to Bootstrap</a></li>
+        </ul>
+      </div>
+    </div>
+  </main>
+  <footer class="pt-5 my-5 text-muted border-top">
+    Created by the Bootstrap team &middot; &copy; {{< year >}}
+  </footer>
+</div>
diff --git a/site/content/docs/5.1/examples/starter-template/starter-template.css b/site/content/docs/5.1/examples/starter-template/starter-template.css
new file mode 100644
index 000000000..d03436db0
--- /dev/null
+++ b/site/content/docs/5.1/examples/starter-template/starter-template.css
@@ -0,0 +1,18 @@
+.icon-list {
+  padding-left: 0;
+  list-style: none;
+}
+.icon-list li {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: .25rem;
+}
+.icon-list li::before {
+  display: block;
+  flex-shrink: 0;
+  width: 1.5em;
+  height: 1.5em;
+  margin-right: .5rem;
+  content: "";
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") no-repeat center center / 100% auto;
+}
diff --git a/site/content/docs/5.0/examples/sticky-footer-navbar/index.html b/site/content/docs/5.1/examples/sticky-footer-navbar/index.html
index ce036dc09..ce036dc09 100644
--- a/site/content/docs/5.0/examples/sticky-footer-navbar/index.html
+++ b/site/content/docs/5.1/examples/sticky-footer-navbar/index.html
diff --git a/site/content/docs/5.0/examples/sticky-footer-navbar/sticky-footer-navbar.css b/site/content/docs/5.1/examples/sticky-footer-navbar/sticky-footer-navbar.css
index 3087ead7d..3087ead7d 100644
--- a/site/content/docs/5.0/examples/sticky-footer-navbar/sticky-footer-navbar.css
+++ b/site/content/docs/5.1/examples/sticky-footer-navbar/sticky-footer-navbar.css
diff --git a/site/content/docs/5.0/examples/sticky-footer/index.html b/site/content/docs/5.1/examples/sticky-footer/index.html
index 7a6e127cd..7a6e127cd 100644
--- a/site/content/docs/5.0/examples/sticky-footer/index.html
+++ b/site/content/docs/5.1/examples/sticky-footer/index.html
diff --git a/site/content/docs/5.0/examples/sticky-footer/sticky-footer.css b/site/content/docs/5.1/examples/sticky-footer/sticky-footer.css
index f8be43729..f8be43729 100644
--- a/site/content/docs/5.0/examples/sticky-footer/sticky-footer.css
+++ b/site/content/docs/5.1/examples/sticky-footer/sticky-footer.css
diff --git a/site/content/docs/5.0/extend/approach.md b/site/content/docs/5.1/extend/approach.md
index 32efbf541..4b9dd4994 100644
--- a/site/content/docs/5.0/extend/approach.md
+++ b/site/content/docs/5.1/extend/approach.md
@@ -4,7 +4,7 @@ title: Approach
 description: Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself.
 group: extend
 aliases:
-  - "/docs/5.0/extend/"
+  - "/docs/5.1/extend/"
 ---
 
 While the getting started pages provide an introductory tour of the project and what it offers, this document focuses on _why_ we do the things we do in Bootstrap. It explains our philosophy to building on the web so that others can learn from us, contribute with us, and help us improve.
diff --git a/site/content/docs/5.0/extend/icons.md b/site/content/docs/5.1/extend/icons.md
index 1e26503bd..1e26503bd 100644
--- a/site/content/docs/5.0/extend/icons.md
+++ b/site/content/docs/5.1/extend/icons.md
diff --git a/site/content/docs/5.0/forms/checks-radios.md b/site/content/docs/5.1/forms/checks-radios.md
index 7fefb6aa6..0f5507f54 100644
--- a/site/content/docs/5.0/forms/checks-radios.md
+++ b/site/content/docs/5.1/forms/checks-radios.md
@@ -3,7 +3,7 @@ layout: docs
 title: Checks and radios
 description: Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.
 group: forms
-aliases: "/docs/5.0/forms/checks/"
+aliases: "/docs/5.1/forms/checks/"
 toc: true
 ---
 
diff --git a/site/content/docs/5.0/forms/floating-labels.md b/site/content/docs/5.1/forms/floating-labels.md
index 941055089..941055089 100644
--- a/site/content/docs/5.0/forms/floating-labels.md
+++ b/site/content/docs/5.1/forms/floating-labels.md
diff --git a/site/content/docs/5.0/forms/form-control.md b/site/content/docs/5.1/forms/form-control.md
index 41fd759d7..9c1c495b1 100644
--- a/site/content/docs/5.0/forms/form-control.md
+++ b/site/content/docs/5.1/forms/form-control.md
@@ -35,15 +35,15 @@ Add the `disabled` boolean attribute on an input to give it a grayed out appeara
 
 {{< example >}}
 <input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
-<input class="form-control" type="text" placeholder="Disabled readonly input" aria-label="Disabled input example" disabled readonly>
+<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>
 {{< /example >}}
 
 ## Readonly
 
-Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
+Add the `readonly` boolean attribute on an input to prevent modification of the input's value.
 
 {{< example >}}
-<input class="form-control" type="text" placeholder="Readonly input here..." aria-label="readonly input example" readonly>
+<input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly>
 {{< /example >}}
 
 ## Readonly plain text
@@ -144,3 +144,7 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist).
 {{< scss-docs name="form-label-variables" file="scss/_variables.scss" >}}
 
 {{< scss-docs name="form-text-variables" file="scss/_variables.scss" >}}
+
+`$form-file-*` are for file input.
+
+{{< scss-docs name="form-file-variables" file="scss/_variables.scss" >}}
diff --git a/site/content/docs/5.0/forms/input-group.md b/site/content/docs/5.1/forms/input-group.md
index 00e9eeec9..00e9eeec9 100644
--- a/site/content/docs/5.0/forms/input-group.md
+++ b/site/content/docs/5.1/forms/input-group.md
diff --git a/site/content/docs/5.0/forms/layout.md b/site/content/docs/5.1/forms/layout.md
index f0fc0b582..47e2f8ab7 100644
--- a/site/content/docs/5.0/forms/layout.md
+++ b/site/content/docs/5.1/forms/layout.md
@@ -292,7 +292,7 @@ You can then remix that once again with size-specific column classes.
 
 ## Inline forms
 
-Use the `.col-auto` class to create horizontal layouts. By adding [gutter modifier classes]({{< docsref "/layout/gutters" >}}), we'll have gutters in horizontal and vertical directions. The `.align-items-center` aligns the form elements to the middle, making the `.form-checkbox` align properly.
+Use the `.row-cols-*` classes to create responsive horizontal layouts. By adding [gutter modifier classes]({{< docsref "/layout/gutters" >}}), we'll have gutters in horizontal and vertical directions. On narrow mobile viewports, the `.col-12` helps stack the form controls and more. The `.align-items-center` aligns the form elements to the middle, making the `.form-checkbox` align properly.
 
 {{< example >}}
 <form class="row row-cols-lg-auto g-3 align-items-center">
diff --git a/site/content/docs/5.0/forms/overview.md b/site/content/docs/5.1/forms/overview.md
index 40e9b6b4f..c60cf1ccc 100644
--- a/site/content/docs/5.0/forms/overview.md
+++ b/site/content/docs/5.1/forms/overview.md
@@ -4,7 +4,7 @@ title: Forms
 description: Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
 group: forms
 toc: true
-aliases: "/docs/5.0/forms/"
+aliases: "/docs/5.1/forms/"
 sections:
   - title: Form control
     description: Style textual inputs and textareas with support for multiple states.
diff --git a/site/content/docs/5.0/forms/range.md b/site/content/docs/5.1/forms/range.md
index 302d6ce68..d7ac6965c 100644
--- a/site/content/docs/5.0/forms/range.md
+++ b/site/content/docs/5.1/forms/range.md
@@ -8,7 +8,7 @@ toc: true
 
 ## Overview
 
-Create custom `<input type="range">` controls with `.form-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Edge Legacy and Firefox supports "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
+Create custom `<input type="range">` controls with `.form-range`. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only Firefox supports "filling" their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
 
 {{< example >}}
 <label for="customRange1" class="form-label">Example range</label>
diff --git a/site/content/docs/5.0/forms/select.md b/site/content/docs/5.1/forms/select.md
index 7f0c255ef..7f0c255ef 100644
--- a/site/content/docs/5.0/forms/select.md
+++ b/site/content/docs/5.1/forms/select.md
diff --git a/site/content/docs/5.0/forms/validation.md b/site/content/docs/5.1/forms/validation.md
index 128f6b408..81f8b73d2 100644
--- a/site/content/docs/5.0/forms/validation.md
+++ b/site/content/docs/5.1/forms/validation.md
@@ -5,7 +5,7 @@ description: Provide valuable, actionable feedback to your users with HTML5 form
 group: forms
 toc: true
 extra_js:
-  - src: "/docs/5.0/assets/js/validate-forms.js"
+  - src: "/docs/5.1/assets/js/validate-forms.js"
     async: true
 ---
 
diff --git a/site/content/docs/5.0/getting-started/accessibility.md b/site/content/docs/5.1/getting-started/accessibility.md
index c55df5026..e9f1cb316 100644
--- a/site/content/docs/5.0/getting-started/accessibility.md
+++ b/site/content/docs/5.1/getting-started/accessibility.md
@@ -10,7 +10,7 @@ Bootstrap provides an easy-to-use framework of ready-made styles, layout tools,
 
 ## Overview and limitations
 
-The overall accessibility of any project built with Bootstrap depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill [<abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1](https://www.w3.org/TR/WCAG21/) (A/AA/AAA), [Section 508](https://www.section508.gov/), and similar accessibility standards and requirements.
+The overall accessibility of any project built with Bootstrap depends in large part on the author's markup, additional styling, and scripting they've included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill [<abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1](https://www.w3.org/TR/WCAG/) (A/AA/AAA), [Section 508](https://www.section508.gov/), and similar accessibility standards and requirements.
 
 ### Structural markup
 
@@ -24,7 +24,7 @@ Because Bootstrap's components are purposely designed to be fairly generic, auth
 
 ### Color contrast
 
-Some combinations of colors that currently make up Bootstrap's default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to *insufficient* color contrast (below the recommended [WCAG 2.1 text color contrast ratio of 4.5:1](https://www.w3.org/TR/WCAG21/#contrast-minimum) and the [WCAG 2.1 non-text color contrast ratio of 3:1](https://www.w3.org/TR/WCAG21/#non-text-contrast)), particularly when used against a light background. Authors are encouraged to test their specific uses of color and, where necessary, manually modify/extend these default colors to ensure adequate color contrast ratios.
+Some combinations of colors that currently make up Bootstrap's default palette—used throughout the framework for things such as button variations, alert variations, form validation indicators—may lead to *insufficient* color contrast (below the recommended [WCAG 2.1 text color contrast ratio of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and the [WCAG 2.1 non-text color contrast ratio of 3:1](https://www.w3.org/TR/WCAG/#non-text-contrast)), particularly when used against a light background. Authors are encouraged to test their specific uses of color and, where necessary, manually modify/extend these default colors to ensure adequate color contrast ratios.
 
 ### Visually hidden content
 
@@ -45,17 +45,18 @@ For visually hidden interactive controls, such as traditional "skip" links, use
 
 ### Reduced motion
 
-Bootstrap includes support for the [`prefers-reduced-motion` media feature](https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion). In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Bootstrap (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled, and meaningful animations (such as spinners) will be slowed down.
+Bootstrap includes support for the [`prefers-reduced-motion` media feature](https://www.w3.org/TR/mediaqueries-5/#prefers-reduced-motion). In browsers/environments that allow the user to specify their preference for reduced motion, most CSS transition effects in Bootstrap (for instance, when a modal dialog is opened or closed, or the sliding animation in carousels) will be disabled, and meaningful animations (such as spinners) will be slowed down.
 
 On browsers that support `prefers-reduced-motion`, and where the user has *not* explicitly signaled that they'd prefer reduced motion (i.e. where `prefers-reduced-motion: no-preference`), Bootstrap enables smooth scrolling using the `scroll-behavior` property.
 
 ## Additional resources
 
-- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/)
+- [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG/)
 - [The A11Y Project](https://www.a11yproject.com/)
 - [MDN accessibility documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
 - [Tenon.io Accessibility Checker](https://tenon.io/)
-- [Color Contrast Analyser (CCA)](https://developer.paciellogroup.com/resources/contrastanalyser/)
+- [Color Contrast Analyser (CCA)](https://www.tpgi.com/color-contrast-checker/)
 - ["HTML Codesniffer" bookmarklet for identifying accessibility issues](https://github.com/squizlabs/HTML_CodeSniffer)
 - [Microsoft Accessibility Insights](https://accessibilityinsights.io/)
 - [Deque Axe testing tools](https://www.deque.com/axe/)
+- [Introduction to Web Accessibility](https://www.w3.org/WAI/fundamentals/accessibility-intro/)
diff --git a/site/content/docs/5.0/getting-started/best-practices.md b/site/content/docs/5.1/getting-started/best-practices.md
index e17fc1290..e17fc1290 100644
--- a/site/content/docs/5.0/getting-started/best-practices.md
+++ b/site/content/docs/5.1/getting-started/best-practices.md
diff --git a/site/content/docs/5.0/getting-started/browsers-devices.md b/site/content/docs/5.1/getting-started/browsers-devices.md
index bdda154a3..bdda154a3 100644
--- a/site/content/docs/5.0/getting-started/browsers-devices.md
+++ b/site/content/docs/5.1/getting-started/browsers-devices.md
diff --git a/site/content/docs/5.0/getting-started/contents.md b/site/content/docs/5.1/getting-started/contents.md
index 35dec93b3..04e44ea30 100644
--- a/site/content/docs/5.0/getting-started/contents.md
+++ b/site/content/docs/5.1/getting-started/contents.md
@@ -171,7 +171,7 @@ bootstrap/
 ├── site/
 │   └──content/
 │      └── docs/
-│          └── 5.0/
+│          └── 5.1/
 │              └── examples/
 ├── js/
 └── scss/
diff --git a/site/content/docs/5.0/getting-started/build-tools.md b/site/content/docs/5.1/getting-started/contribute.md
index d0286375e..337bb2a43 100644
--- a/site/content/docs/5.0/getting-started/build-tools.md
+++ b/site/content/docs/5.1/getting-started/contribute.md
@@ -1,14 +1,15 @@
 ---
 layout: docs
-title: Build tools
-description: Learn how to use Bootstrap's included npm scripts to build our documentation, compile source code, run tests, and more.
+title: Contribute
+description: Help develop Bootstrap with our documentation build scripts and tests.
 group: getting-started
 toc: true
+aliases: "/docs/5.1/getting-started/build-tools/"
 ---
 
 ## Tooling setup
 
-Bootstrap uses [npm scripts](https://docs.npmjs.com/misc/scripts/) for its build system. Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json) includes convenient methods for working with the framework, including compiling code, running tests, and more.
+Bootstrap uses [npm scripts](https://docs.npmjs.com/misc/scripts/) to build the documentation and compile source files. Our [package.json]({{< param repo >}}/blob/v{{< param current_version >}}/package.json) houses these scripts for compiling code, running tests, and more. These aren't intended for use outside our repository and documentation.
 
 To use our build system and run our documentation locally, you'll need a copy of Bootstrap's source files and Node. Follow these steps and you should be ready to rock:
 
diff --git a/site/content/docs/5.0/getting-started/download.md b/site/content/docs/5.1/getting-started/download.md
index 48578572b..67bc295a9 100644
--- a/site/content/docs/5.0/getting-started/download.md
+++ b/site/content/docs/5.1/getting-started/download.md
@@ -21,10 +21,10 @@ This doesn't include documentation, source files, or any optional JavaScript dep
 
 Compile Bootstrap with your own asset pipeline by downloading our source Sass, JavaScript, and documentation files. This option requires some additional tooling:
 
-- [Sass compiler]({{< docsref "/getting-started/build-tools#sass" >}}) for compiling Sass source files into CSS files
+- [Sass compiler]({{< docsref "/getting-started/contribute#sass" >}}) for compiling Sass source files into CSS files
 - [Autoprefixer](https://github.com/postcss/autoprefixer) for CSS vendor prefixing
 
-Should you require our full set of [build tools]({{< docsref "/getting-started/build-tools#tooling-setup" >}}), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes.
+Should you require our full set of [build tools]({{< docsref "/getting-started/contribute#tooling-setup" >}}), they are included for developing Bootstrap and its docs, but they're likely unsuitable for your own purposes.
 
 <a href="{{< param "download.source" >}}" class="btn btn-bd-primary" onclick="ga('send', 'event', 'Getting started', 'Download', 'Download source');">Download source</a>
 
@@ -52,14 +52,14 @@ If you're using our compiled JavaScript and prefer to include Popper separately,
 
 ## Package managers
 
-Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a [Sass compiler]({{< docsref "/getting-started/build-tools#sass" >}}) and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions.
+Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a [Sass compiler]({{< docsref "/getting-started/contribute#sass" >}}) and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions.
 
 ### npm
 
 Install Bootstrap in your Node.js powered apps with [the npm package](https://www.npmjs.com/package/bootstrap):
 
 ```sh
-npm install bootstrap@next
+npm install bootstrap
 ```
 
 `const bootstrap = require('bootstrap')` or `import bootstrap from 'bootstrap'` will load all of Bootstrap's plugins onto a `bootstrap` object.
@@ -79,7 +79,7 @@ Bootstrap's `package.json` contains some additional metadata under the following
 Install Bootstrap in your Node.js powered apps with [the yarn package](https://yarnpkg.com/en/package/bootstrap):
 
 ```sh
-yarn add bootstrap@next
+yarn add bootstrap
 ```
 
 ### RubyGems
diff --git a/site/content/docs/5.0/getting-started/introduction.md b/site/content/docs/5.1/getting-started/introduction.md
index 8f29f218f..c4f6dd2c7 100644
--- a/site/content/docs/5.0/getting-started/introduction.md
+++ b/site/content/docs/5.1/getting-started/introduction.md
@@ -4,7 +4,7 @@ title: Introduction
 description: Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.
 group: getting-started
 aliases:
-  - "/docs/5.0/getting-started/"
+  - "/docs/5.1/getting-started/"
   - "/docs/getting-started/"
   - "/getting-started/"
 toc: true
@@ -24,7 +24,7 @@ Copy-paste the stylesheet `<link>` into your `<head>` before all other styleshee
 
 ### JS
 
-Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and [Popper](https://popper.js.org/). Place **one of following `<script>`s** near the end of your pages, right before the closing `</body>` tag, to enable them.
+Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and [Popper](https://popper.js.org/). Place **one of the following `<script>`s** near the end of your pages, right before the closing `</body>` tag, to enable them.
 
 #### Bundle
 
@@ -101,7 +101,7 @@ Be sure to have your pages set up with the latest design and development standar
 </html>
 ```
 
-That's all you need for overall page requirements. Visit the [Layout docs]({{< docsref "/layout/grid" >}}) or [our official examples]({{< docsref "/examples" >}}) to start laying out your site's content and components.
+For next steps, visit the [Layout docs]({{< docsref "/layout/grid" >}}) or [our official examples]({{< docsref "/examples" >}}) to start laying out your site's content and components.
 
 ## Important globals
 
@@ -130,7 +130,7 @@ You can see an example of this in action in the [starter template](#starter-temp
 
 ### Box-sizing
 
-For more straightforward sizing in CSS, we switch the global `box-sizing` value from `content-box` to `border-box`. This ensures `padding` does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.
+For more straightforward sizing in CSS, we switch the global `box-sizing` value from `content-box` to `border-box`. This ensures `padding` does not affect the final computed width of an element, but it can cause problems with some third-party software like Google Maps and Google Custom Search Engine.
 
 On the rare occasion you need to override it, use something like the following:
 
@@ -154,8 +154,8 @@ Stay up to date on the development of Bootstrap and reach out to the community w
 
 - Read and subscribe to [The Official Bootstrap Blog]({{< param blog >}}).
 - Join [the official Slack room]({{< param slack >}}).
-- Chat with fellow Bootstrappers in IRC. On the `irc.freenode.net` server, in the `##bootstrap` channel.
+- Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel.
 - Implementation help may be found at Stack Overflow (tagged [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5)).
-- Developers should use the keyword `bootstrap` on packages which modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/search?q=keywords:bootstrap) or similar delivery mechanisms for maximum discoverability.
+- Developers should use the keyword `bootstrap` on packages that modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/search?q=keywords:bootstrap) or similar delivery mechanisms for maximum discoverability.
 
 You can also follow [@getbootstrap on Twitter](https://twitter.com/{{< param twitter >}}) for the latest gossip and awesome music videos.
diff --git a/site/content/docs/5.0/getting-started/javascript.md b/site/content/docs/5.1/getting-started/javascript.md
index 53845fdfc..8ee428921 100644
--- a/site/content/docs/5.0/getting-started/javascript.md
+++ b/site/content/docs/5.1/getting-started/javascript.md
@@ -93,6 +93,15 @@ var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized w
 
 If you'd like to get a particular plugin instance, each plugin exposes a `getInstance` method. In order to retrieve it directly from an element, do this: `bootstrap.Popover.getInstance(myPopoverEl)`.
 
+### CSS selectors in constructors
+
+You can also use a CSS selector as the first argument instead of a DOM element to initialize the plugin. Currently the element for the plugin is found by the `querySelector` method since our plugins support a single element only.
+
+```js
+var modal = new bootstrap.Modal('#myModal')
+var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
+```
+
 ### Asynchronous functions and transitions
 
 All programmatic API methods are **asynchronous** and return to the caller once the transition is started but **before it ends**.
@@ -100,7 +109,7 @@ All programmatic API methods are **asynchronous** and return to the caller once
 In order to execute an action once the transition is complete, you can listen to the corresponding event.
 
 ```js
-var myCollapseEl = document.getElementById('#myCollapse')
+var myCollapseEl = document.getElementById('myCollapse')
 
 myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
   // Action to execute once the collapsible area is expanded
diff --git a/site/content/docs/5.0/getting-started/parcel.md b/site/content/docs/5.1/getting-started/parcel.md
index 000c0d677..23aab0054 100644
--- a/site/content/docs/5.0/getting-started/parcel.md
+++ b/site/content/docs/5.1/getting-started/parcel.md
@@ -14,7 +14,7 @@ Install [Parcel Bundler](https://en.parceljs.org/getting_started.html).
 
 [Install bootstrap]({{< docsref "/getting-started/download#npm" >}}) as a Node.js module using npm.
 
-Bootstrap depends on [Popper](https://popper.js.org/), which is specified in the `peerDependencies` property. This means that you will have to make sure to add both of them to your `package.json` using `npm install popper.js`.
+Bootstrap depends on [Popper](https://popper.js.org/), which is specified in the `peerDependencies` property. This means that you will have to make sure to add both of them to your `package.json` using `npm install @popperjs/core`.
 
 When all will be completed, your project will be structured like this:
 
diff --git a/site/content/docs/5.0/getting-started/rfs.md b/site/content/docs/5.1/getting-started/rfs.md
index f440924d1..f440924d1 100644
--- a/site/content/docs/5.0/getting-started/rfs.md
+++ b/site/content/docs/5.1/getting-started/rfs.md
diff --git a/site/content/docs/5.0/getting-started/rtl.md b/site/content/docs/5.1/getting-started/rtl.md
index 4ade8359c..549104c6f 100644
--- a/site/content/docs/5.0/getting-started/rtl.md
+++ b/site/content/docs/5.1/getting-started/rtl.md
@@ -93,7 +93,7 @@ Using [RTLCSS value directives](https://rtlcss.com/learn/usage-guide/value-direc
 $font-weight-bold: 700 #{/* rtl:600 */} !default;
 ```
 
-Which would ouput to the following for our default CSS and RTL CSS:
+Which would output to the following for our default CSS and RTL CSS:
 
 ```css
 /* bootstrap.css */
@@ -143,7 +143,7 @@ Need both LTR and RTL on the same page? Thanks to [RTLCSS String Maps](https://r
 ```scss
 /* rtl:begin:options: {
   "autoRename": true,
-  "stringMap":[
+  "stringMap":[ {
     "name": "ltr-rtl",
     "priority": 100,
     "search": ["ltr"],
@@ -152,7 +152,7 @@ Need both LTR and RTL on the same page? Thanks to [RTLCSS String Maps](https://r
       "scope": "*",
       "ignoreCase": false
     }
-  ]
+  } ]
 } */
 .ltr {
   @import "../node_modules/bootstrap/scss/bootstrap";
diff --git a/site/content/docs/5.0/getting-started/webpack.md b/site/content/docs/5.1/getting-started/webpack.md
index 6998e1e99..6998e1e99 100644
--- a/site/content/docs/5.0/getting-started/webpack.md
+++ b/site/content/docs/5.1/getting-started/webpack.md
diff --git a/site/content/docs/5.0/helpers/clearfix.md b/site/content/docs/5.1/helpers/clearfix.md
index 9e31474a4..f1329d5b4 100644
--- a/site/content/docs/5.0/helpers/clearfix.md
+++ b/site/content/docs/5.1/helpers/clearfix.md
@@ -3,7 +3,7 @@ layout: docs
 title: Clearfix
 description: Quickly and easily clear floated content within a container by adding a clearfix utility.
 group: helpers
-aliases: "/docs/5.0/helpers/"
+aliases: "/docs/5.1/helpers/"
 ---
 
 Easily clear `float`s by adding `.clearfix` **to the parent element**. Can also be used as a mixin.
diff --git a/site/content/docs/5.0/helpers/colored-links.md b/site/content/docs/5.1/helpers/colored-links.md
index e940196ff..e940196ff 100644
--- a/site/content/docs/5.0/helpers/colored-links.md
+++ b/site/content/docs/5.1/helpers/colored-links.md
diff --git a/site/content/docs/5.0/helpers/position.md b/site/content/docs/5.1/helpers/position.md
index d54c1c795..d54c1c795 100644
--- a/site/content/docs/5.0/helpers/position.md
+++ b/site/content/docs/5.1/helpers/position.md
diff --git a/site/content/docs/5.0/helpers/ratio.md b/site/content/docs/5.1/helpers/ratio.md
index 771bc07cb..771bc07cb 100644
--- a/site/content/docs/5.0/helpers/ratio.md
+++ b/site/content/docs/5.1/helpers/ratio.md
diff --git a/site/content/docs/5.1/helpers/stacks.md b/site/content/docs/5.1/helpers/stacks.md
new file mode 100644
index 000000000..a93a80046
--- /dev/null
+++ b/site/content/docs/5.1/helpers/stacks.md
@@ -0,0 +1,80 @@
+---
+layout: docs
+title: Stacks
+description: Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.
+group: helpers
+toc: true
+---
+
+Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source [Pylon project](https://almonk.github.io/pylon/).
+
+## Vertical
+
+Use `.vstack` to create vertical layouts. Stacked items are full-width by default. Use `.gap-*` utilities to add space between items.
+
+{{< example >}}
+<div class="vstack gap-3">
+  <div class="bg-light border">First item</div>
+  <div class="bg-light border">Second item</div>
+  <div class="bg-light border">Third item</div>
+</div>
+{{< /example >}}
+
+## Horizontal
+
+Use `.hstack` for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Use `.gap-*` utilities to add space between items.
+
+{{< example >}}
+<div class="hstack gap-3">
+  <div class="bg-light border">First item</div>
+  <div class="bg-light border">Second item</div>
+  <div class="bg-light border">Third item</div>
+</div>
+{{< /example >}}
+
+Using horizontal margin utilities like `.ms-auto` as spacers:
+
+{{< example >}}
+<div class="hstack gap-3">
+  <div class="bg-light border">First item</div>
+  <div class="bg-light border ms-auto">Second item</div>
+  <div class="bg-light border">Third item</div>
+</div>
+{{< /example >}}
+
+And with [vertical rules]({{< docsref "/helpers/vertical-rule" >}}):
+
+{{< example >}}
+<div class="hstack gap-3">
+  <div class="bg-light border">First item</div>
+  <div class="bg-light border ms-auto">Second item</div>
+  <div class="vr"></div>
+  <div class="bg-light border">Third item</div>
+</div>
+{{< /example >}}
+
+## Examples
+
+Use `.vstack` to stack buttons and other elements:
+
+{{< example >}}
+<div class="vstack gap-2 col-md-5 mx-auto">
+  <button type="button" class="btn btn-secondary">Save changes</button>
+  <button type="button" class="btn btn-outline-secondary">Cancel</button>
+</div>
+{{< /example >}}
+
+Create an inline form with `.hstack`:
+
+{{< example >}}
+<div class="hstack gap-3">
+  <input class="form-control me-auto" type="text" placeholder="Add your item here...">
+  <button type="button" class="btn btn-secondary">Submit</button>
+  <div class="vr"></div>
+  <button type="button" class="btn btn-outline-danger">Reset</button>
+</div>
+{{< /example >}}
+
+## Sass
+
+{{< scss-docs name="stacks" file="scss/helpers/_stacks.scss" >}}
diff --git a/site/content/docs/5.0/helpers/stretched-link.md b/site/content/docs/5.1/helpers/stretched-link.md
index 93bffeb31..93bffeb31 100644
--- a/site/content/docs/5.0/helpers/stretched-link.md
+++ b/site/content/docs/5.1/helpers/stretched-link.md
diff --git a/site/content/docs/5.0/helpers/text-truncation.md b/site/content/docs/5.1/helpers/text-truncation.md
index a92a171fd..a92a171fd 100644
--- a/site/content/docs/5.0/helpers/text-truncation.md
+++ b/site/content/docs/5.1/helpers/text-truncation.md
diff --git a/site/content/docs/5.1/helpers/vertical-rule.md b/site/content/docs/5.1/helpers/vertical-rule.md
new file mode 100644
index 000000000..8d0d6141f
--- /dev/null
+++ b/site/content/docs/5.1/helpers/vertical-rule.md
@@ -0,0 +1,44 @@
+---
+layout: docs
+title: Vertical rule
+description: Use the custom vertical rule helper to create vertical dividers like the `<hr>` element.
+group: helpers
+toc: true
+---
+
+## How it works
+
+Vertical rules are inspired by the `<hr>` element, allowing you to create vertical dividers in common layouts. They're styled just like `<hr>` elements:
+
+- They're `1px` wide
+- They have `min-height` of `1em`
+- Their color is set via `currentColor` and `opacity`
+
+Customize them with additional styles as needed.
+
+## Example
+
+{{< example >}}
+<div class="vr"></div>
+{{< /example >}}
+
+Vertical rules scale their height in flex layouts:
+
+{{< example >}}
+<div class="d-flex" style="height: 200px;">
+  <div class="vr"></div>
+</div>
+{{< /example >}}
+
+## With stacks
+
+They can also be used in [stacks]({{< docsref "/helpers/stacks" >}}):
+
+{{< example >}}
+<div class="hstack gap-3">
+  <div class="bg-light border">First item</div>
+  <div class="bg-light border ms-auto">Second item</div>
+  <div class="vr"></div>
+  <div class="bg-light border">Third item</div>
+</div>
+{{< /example >}}
diff --git a/site/content/docs/5.0/helpers/visually-hidden.md b/site/content/docs/5.1/helpers/visually-hidden.md
index d8148b3f3..245546994 100644
--- a/site/content/docs/5.0/helpers/visually-hidden.md
+++ b/site/content/docs/5.1/helpers/visually-hidden.md
@@ -3,7 +3,7 @@ layout: docs
 title: Visually hidden
 description: Use these helpers to visually hide elements but keep them accessible to assistive technologies.
 group: helpers
-aliases: "/docs/5.0/helpers/screen-readers/"
+aliases: "/docs/5.1/helpers/screen-readers/"
 ---
 
 Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). `.visually-hidden-focusable` can also be applied to a container–thanks to `:focus-within`, the container will be displayed when any child element of the container receives focus.
diff --git a/site/content/docs/5.0/layout/breakpoints.md b/site/content/docs/5.1/layout/breakpoints.md
index ce1df6bb7..a11dfb050 100644
--- a/site/content/docs/5.0/layout/breakpoints.md
+++ b/site/content/docs/5.1/layout/breakpoints.md
@@ -3,7 +3,7 @@ layout: docs
 title: Breakpoints
 description: Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.
 group: layout
-aliases: "/docs/5.0/layout/"
+aliases: "/docs/5.1/layout/"
 toc: true
 ---
 
@@ -145,23 +145,23 @@ We occasionally use media queries that go in the other direction (the given scre
 These mixins take those declared breakpoints, subtract `.02px` from them, and use them as our `max-width` values. For example:
 
 ```scss
-// X-Small devices (portrait phones, less than 576px)
+// `xs` returns only a ruleset and no media query
+// ... { ... }
+
+// `sm` applies to x-small devices (portrait phones, less than 576px)
 @media (max-width: 575.98px) { ... }
 
-// Small devices (landscape phones, less than 768px)
+// `md` applies to small devices (landscape phones, less than 768px)
 @media (max-width: 767.98px) { ... }
 
-// Medium devices (tablets, less than 992px)
+// `lg` applies to medium devices (tablets, less than 992px)
 @media (max-width: 991.98px) { ... }
 
-// Large devices (desktops, less than 1200px)
+// `xl` applies to large devices (desktops, less than 1200px)
 @media (max-width: 1199.98px) { ... }
 
-// X-Large devices (large desktops, less than 1400px)
+// `xxl` applies to x-large devices (large desktops, less than 1400px)
 @media (max-width: 1399.98px) { ... }
-
-// XX-Large devices (larger desktops)
-// No media query since the xxl breakpoint has no upper bound on its width
 ```
 
 {{< callout warning >}}
diff --git a/site/content/docs/5.0/layout/columns.md b/site/content/docs/5.1/layout/columns.md
index 5c859065a..5c859065a 100644
--- a/site/content/docs/5.0/layout/columns.md
+++ b/site/content/docs/5.1/layout/columns.md
diff --git a/site/content/docs/5.0/layout/containers.md b/site/content/docs/5.1/layout/containers.md
index 456225b94..456225b94 100644
--- a/site/content/docs/5.0/layout/containers.md
+++ b/site/content/docs/5.1/layout/containers.md
diff --git a/site/content/docs/5.1/layout/css-grid.md b/site/content/docs/5.1/layout/css-grid.md
new file mode 100644
index 000000000..424167839
--- /dev/null
+++ b/site/content/docs/5.1/layout/css-grid.md
@@ -0,0 +1,266 @@
+---
+layout: docs
+title: CSS Grid
+description: Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets.
+group: layout
+toc: true
+---
+
+Bootstrap's default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we're seeing in browsers like the new CSS Grid.
+
+{{< callout warning >}}
+**Heads up—our CSS Grid system is experimental and opt-in for v5.1.0!** We included it in our documentation's CSS to demonstrate it for you, but it's disabled by default. Keep reading to learn how to enable it in your projects.
+{{< /callout >}}
+
+## How it works
+
+With Bootstrap 5, we've added the option to enable a separate grid system that's built on CSS Grid, but with a Bootstrap twist. You still get classes you can apply on a whim to build responsive layouts, but with a different approach under the hood.
+
+- **CSS Grid is opt-in.** Disable the default grid system by setting `$enable-grid-classes: false` and enable the CSS Grid by setting `$enable-cssgrid: true`. Then, recompile your Sass.
+
+- **Replace instances of `.row` with `.grid`.** The `.grid` class sets `display: grid` and creates a `grid-template` that you build on with your HTML.
+
+- **Replace `.col-*` classes with `.g-col-*` classes.** This is because our CSS Grid columns use the `grid-column` property instead of `width`.
+
+- **Columns and gutter sizes are set via CSS variables.** Set these on the parent `.grid` and customize however you want, inline or in a stylesheet, with `--bs-columns` and `--bs-gap`.
+
+In the future, Bootstrap will likely shift to a hybrid solution as the `gap` property has achieved nearly full browser support for flexbox.
+
+## Key differences
+
+Compared to the default grid system:
+
+- Flex utilities don't affect the CSS Grid columns in the same way.
+
+- Gaps replaces gutters. The `gap` property replaces the horizontal `padding` from our default grid system and functions more like `margin`.
+
+- As such, unlike `.row`s, `.grid`s have no negative margins and margin utilities cannot be used to change the grid gutters. Grid gaps are applied horizontally and vertically by default. See the [customizing section](#customizing) for more details.
+
+- Inline and custom styles should be viewed as replacements for modifier classes (e.g., `style="--bs-columns: 3;"` vs `class="row-cols-3"`).
+
+- Nesting works similarly, but may require you to reset your column counts on each instance of a nested `.grid`. See the [nesting section](#nesting) for details.
+
+## Examples
+
+### Three columns
+
+Three equal-width columns across all viewports and devices can be created by using the `.g-col-4` classes. Add [responsive classes](#responsive) to change the layout by viewport size.
+
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid">
+  <div class="g-col-4">.g-col-4</div>
+  <div class="g-col-4">.g-col-4</div>
+  <div class="g-col-4">.g-col-4</div>
+</div>
+{{< /example >}}
+
+### Responsive
+
+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.
+
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid">
+  <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>
+  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
+</div>
+{{< /example >}}
+
+Compare that to this two column layout at all viewports.
+
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid">
+  <div class="g-col-6">.g-col-6</div>
+  <div class="g-col-6">.g-col-6</div>
+</div>
+{{< /example >}}
+
+## Wrapping
+
+Grid items automatically wrap to the next line when there's no more room horizontally. Note that the `gap` applies to horizontal and vertical gaps between grid items.
+
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid">
+  <div class="g-col-6">.g-col-6</div>
+  <div class="g-col-6">.g-col-6</div>
+
+  <div class="g-col-6">.g-col-6</div>
+  <div class="g-col-6">.g-col-6</div>
+</div>
+{{< /example >}}
+
+## Starts
+
+Start classes aim to replace our default grid's offset classes, but they're not entirely the same. CSS Grid creates a grid template through styles that tell browsers to "start at this column" and "end at this column." Those properties are `grid-column-start` and `grid-column-end`. 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 `1` as `0` is an invalid value for these properties.
+
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid">
+  <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>
+</div>
+{{< /example >}}
+
+## Auto columns
+
+When there are no classes on the grid items (the immediate children of a `.grid`), each grid item will automatically be sized to one column.
+
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid">
+  <div>1</div>
+  <div>1</div>
+  <div>1</div>
+  <div>1</div>
+  <div>1</div>
+  <div>1</div>
+  <div>1</div>
+  <div>1</div>
+  <div>1</div>
+  <div>1</div>
+  <div>1</div>
+  <div>1</div>
+</div>
+{{< /example >}}
+
+This behavior can be mixed with grid column classes.
+
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid">
+  <div class="g-col-6">.g-col-6</div>
+  <div>1</div>
+  <div>1</div>
+  <div>1</div>
+  <div>1</div>
+  <div>1</div>
+  <div>1</div>
+</div>
+{{< /example >}}
+
+## Nesting
+
+Similar to our default grid system, our CSS Grid allows for easy nesting of `.grid`s. However, unlike the default, this grid inherits changes in the rows, columns, and gaps. Consider the example below:
+
+- We override the default number of columns with a local CSS variable: `--bs-columns: 3`.
+- In the first auto-column, the column count is inherited and each column is one-third of the available width.
+- In the second auto-column, we've reset the column count on the nested `.grid` to 12 (our default).
+- The third auto-column has no nested content.
+
+In practice this allows for more complex and custom layouts when compared to our default grid system.
+
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid" style="--bs-columns: 3;">
+  <div>
+    First auto-column
+    <div class="grid">
+      <div>Auto-column</div>
+      <div>Auto-column</div>
+    </div>
+  </div>
+  <div>
+    Second auto-column
+    <div class="grid" style="--bs-columns: 12;">
+      <div class="g-col-6">6 of 12</div>
+      <div class="g-col-4">4 of 12</div>
+      <div class="g-col-2">2 of 12</div>
+    </div>
+  </div>
+  <div>Third auto-column</div>
+</div>
+{{< /example >}}
+
+## Customizing
+
+Customize the number of columns, the number of rows, and the width of the gaps with local CSS variables.
+
+{{< bs-table "table" >}}
+| Variable | Fallback value | Description |
+| --- | --- | --- |
+| `--bs-rows` | `1` | The number of rows in your grid template |
+| `--bs-columns` | `12` | The number of columns in your grid template |
+| `--bs-gap` | `1.5rem` | The size of the gap between columns (vertical and horizontal) |
+{{< /bs-table >}}
+
+These CSS variables have no default value; instead, they apply fallback values that are used _until_ a local instance is provided. For example, we use `var(--bs-rows, 1)` for our CSS Grid rows, which ignores `--bs-rows` because that hasn't been set anywhere yet. Once it is, the `.grid` instance will use that value instead of the fallback value of `1`.
+
+### No grid classes
+
+Immediate children elements of `.grid` are grid items, so they'll be sized without explicitly adding a `.g-col` class.
+
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid" style="--bs-columns: 3;">
+  <div>Auto-column</div>
+  <div>Auto-column</div>
+  <div>Auto-column</div>
+</div>
+{{< /example >}}
+
+### Columns and gaps
+
+Adjust the number of columns and the gap.
+
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid" 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>
+</div>
+{{< /example >}}
+
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid" 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>
+</div>
+{{< /example >}}
+
+### Adding rows
+
+Adding more rows and changing the placement of columns:
+
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid" style="--bs-rows: 3; --bs-columns: 3;">
+  <div>Auto-column</div>
+  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
+  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
+</div>
+{{< /example >}}
+
+### Gaps
+
+Change the vertical gaps only by modifying the `row-gap`. Note that we use `gap` on `.grid`s, but `row-gap` and `column-gap` can be modified as needed.
+
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid" style="row-gap: 0;">
+  <div class="g-col-6">.g-col-6</div>
+  <div class="g-col-6">.g-col-6</div>
+
+  <div class="g-col-6">.g-col-6</div>
+  <div class="g-col-6">.g-col-6</div>
+</div>
+{{< /example >}}
+
+Because of that, you can have different vertical and horizontal `gap`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 `gap`, or with our `--bs-gap` CSS variable.
+
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid" style="--bs-gap: .25rem 1rem;">
+  <div class="g-col-6">.g-col-6</div>
+  <div class="g-col-6">.g-col-6</div>
+
+  <div class="g-col-6">.g-col-6</div>
+  <div class="g-col-6">.g-col-6</div>
+</div>
+{{< /example >}}
+
+## Sass
+
+One limitation of the CSS Grid is that our default classes are still generated by two Sass variables, `$grid-columns` and `$grid-gutter-width`. This effectively predetermines the number of classes generated in our compiled CSS. You have two options here:
+
+- Modify those default Sass variables and recompile your CSS.
+- Use inline or custom styles to augment the provided classes.
+
+For example, you can increase the column count and change the gap size, and then size your "columns" with a mix of inline styles and predefined CSS Grid column classes (e.g., `.g-col-4`).
+
+{{< example class="bd-example-cssgrid" >}}
+<div class="grid" 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>
+</div>
+{{< /example >}}
diff --git a/site/content/docs/5.0/layout/grid.md b/site/content/docs/5.1/layout/grid.md
index 76b65c1bc..05fc1bd65 100644
--- a/site/content/docs/5.0/layout/grid.md
+++ b/site/content/docs/5.1/layout/grid.md
@@ -17,14 +17,14 @@ Bootstrap's grid system uses a series of containers, rows, and columns to layout
 {{< example class="bd-example-row" >}}
 <div class="container">
   <div class="row">
-    <div class="col-sm">
-      One of three columns
+    <div class="col">
+      Column
     </div>
-    <div class="col-sm">
-      One of three columns
+    <div class="col">
+      Column
     </div>
-    <div class="col-sm">
-      One of three columns
+    <div class="col">
+      Column
     </div>
   </div>
 </div>
@@ -434,9 +434,12 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS
 
 // Make the element grid-ready (applying everything but the width)
 @include make-col-ready();
+
+// Without optional size values, the mixin will create equal columns (similar to using .col)
+@include make-col();
 @include make-col($size, $columns: $grid-columns);
 
-// Get fancy by offsetting, or changing the sort order
+// Offset with margins
 @include make-col-offset($size, $columns: $grid-columns);
 ```
 
diff --git a/site/content/docs/5.0/layout/gutters.md b/site/content/docs/5.1/layout/gutters.md
index 87d2731a4..87d2731a4 100644
--- a/site/content/docs/5.0/layout/gutters.md
+++ b/site/content/docs/5.1/layout/gutters.md
diff --git a/site/content/docs/5.0/layout/utilities.md b/site/content/docs/5.1/layout/utilities.md
index 009d2416d..009d2416d 100644
--- a/site/content/docs/5.0/layout/utilities.md
+++ b/site/content/docs/5.1/layout/utilities.md
diff --git a/site/content/docs/5.0/layout/z-index.md b/site/content/docs/5.1/layout/z-index.md
index 1870d05d2..1870d05d2 100644
--- a/site/content/docs/5.0/layout/z-index.md
+++ b/site/content/docs/5.1/layout/z-index.md
diff --git a/site/content/docs/5.1/migration.md b/site/content/docs/5.1/migration.md
new file mode 100644
index 000000000..8ebb13b81
--- /dev/null
+++ b/site/content/docs/5.1/migration.md
@@ -0,0 +1,385 @@
+---
+layout: docs
+title: Migrating to v5
+description: Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5.
+group: migration
+aliases: "/migration/"
+toc: true
+---
+
+## Dependencies
+
+- Dropped jQuery.
+- Upgraded from Popper v1.x to Popper v2.x.
+- Replaced Libsass with Dart Sass as our Sass compiler given Libsass was deprecated.
+- Migrated from Jekyll to Hugo for building our documentation
+
+## Browser support
+
+- Dropped Internet Explorer 10 and 11
+- Dropped Microsoft Edge < 16 (Legacy Edge)
+- Dropped Firefox < 60
+- Dropped Safari < 12
+- Dropped iOS Safari < 12
+- Dropped Chrome < 60
+
+<hr class="my-5">
+
+## Documentation changes
+
+- Redesigned homepage, docs layout, and footer.
+- Added [new Parcel guide](https://getbootstrap.com/docs/5.1/getting-started/parcel/).
+- Added [new Customize section](https://getbootstrap.com/docs/5.1/customize/overview/), replacing [v4's Theming page](https://getbootstrap.com/docs/4.6/getting-started/theming/), with new details on Sass, global configuration options, color schemes, CSS variables, and more.
+- Reorganized all form documentation into [new Forms section](https://getbootstrap.com/docs/5.1/forms/overview/), breaking apart the content into more focused pages.
+- Similarly, updated [the Layout section](https://getbootstrap.com/docs/5.1/layout/breakpoints/), to flesh out grid content more clearly.
+- Renamed "Navs" component page to "Navs & Tabs".
+- Renamed "Checks" page to "Checks & radios".
+- Redesigned the navbar and added a new subnav to make it easier to get around our sites and docs versions.
+- Added new keyboard shortcut for the search field: <kbd>Ctrl + /</kbd>.
+
+## Sass
+
+- We've ditched the default Sass map merges to make it easier to remove redundant values. Keep in mind you now have to define all values in the Sass maps like `$theme-colors`. Check out how to deal with [Sass maps]({{< docsref "/customize/sass#maps-and-loops" >}}).
+
+- <span class="badge bg-danger">Breaking</span> Renamed `color-yiq()` function and related variables to `color-contrast()` as it's no longer related to YIQ colorspace. [See #30168.](https://github.com/twbs/bootstrap/pull/30168/)
+  - `$yiq-contrasted-threshold` is renamed to `$min-contrast-ratio`.
+  - `$yiq-text-dark` and `$yiq-text-light` are respectively renamed to `$color-contrast-dark` and `$color-contrast-light`.
+
+- <span class="badge bg-danger">Breaking</span> Media query mixins parameters have changed for a more logical approach.
+  - `media-breakpoint-down()` uses the breakpoint itself instead of the next breakpoint (e.g., `media-breakpoint-down(lg)` instead of `media-breakpoint-down(md)` targets viewports smaller than `lg`).
+  - Similarly, the second parameter in `media-breakpoint-between()` also uses the breakpoint itself instead of the next breakpoint (e.g., `media-between(sm, lg)` instead of `media-breakpoint-between(sm, md)` targets viewports between `sm` and `lg`).
+
+- <span class="badge bg-danger">Breaking</span> Removed print styles and `$enable-print-styles` variable. Print display classes are still around. [See #28339](https://github.com/twbs/bootstrap/pull/28339).
+
+- <span class="badge bg-danger">Breaking</span> Dropped `color()`, `theme-color()`, and `gray()` functions in favor of variables. [See #29083](https://github.com/twbs/bootstrap/pull/29083).
+
+- <span class="badge bg-danger">Breaking</span> Renamed `theme-color-level()` function to `color-level()` and now accepts any color you want instead of only `$theme-color` colors. [See #29083](https://github.com/twbs/bootstrap/pull/29083) **Watch out:** `color-level()` was later on dropped in `v5.0.0-alpha3`.
+
+- <span class="badge bg-danger">Breaking</span> Renamed `$enable-prefers-reduced-motion-media-query` and `$enable-pointer-cursor-for-buttons` to `$enable-reduced-motion` and `$enable-button-pointers` for brevity.
+
+- <span class="badge bg-danger">Breaking</span> Removed the `bg-gradient-variant()` mixin. Use the `.bg-gradient` class to add gradients to elements instead of the generated `.bg-gradient-*` classes.
+
+- <span class="badge bg-danger">Breaking</span> **Removed previously deprecated mixins:**
+  - `hover`, `hover-focus`, `plain-hover-focus`, and `hover-focus-active`
+  - `float()`
+  - `form-control-mixin()`
+  - `nav-divider()`
+  - `retina-img()`
+  - `text-hide()` (also dropped the associated utility class, `.text-hide`)
+  - `visibility()`
+  - `form-control-focus()`
+
+- <span class="badge bg-danger">Breaking</span> Renamed `scale-color()` function to `shift-color()` to avoid collision with Sass's own color scaling function.
+
+- `box-shadow` mixins now allow `null` values and drop `none` from multiple arguments. [See #30394](https://github.com/twbs/bootstrap/pull/30394).
+
+- The `border-radius()` mixin now has a default value.
+
+## Color system
+
+- The color system which worked with `color-level()` and `$theme-color-interval` was removed in favor of a new color system. All `lighten()` and `darken()` functions in our codebase are replaced by `tint-color()` and `shade-color()`. These functions will mix the color with either white or black instead of changing its lightness by a fixed amount. The `shift-color()` will either tint or shade a color depending on whether its weight parameter is positive or negative. [See #30622](https://github.com/twbs/bootstrap/pull/30622) for more details.
+
+- Added new tints and shades for every color, providing nine separate colors for each base color, as new Sass variables.
+
+- Improved color contrast. Bumped color contrast ratio from 3:1 to 4.5:1 and updated blue, green, cyan, and pink colors to ensure WCAG 2.1 AA contrast. Also changed our color contrast color from `$gray-900` to `$black`.
+
+- To support our color system, we've added new custom `tint-color()` and `shade-color()` functions to mix our colors appropriately.
+
+## Grid updates
+
+- **New breakpoint!** Added new `xxl` breakpoint for `1400px` and up. No changes to all other breakpoints.
+
+- **Improved gutters.** Gutters are now set in rems, and are narrower than v4 (`1.5rem`, or about `24px`, down from `30px`). This aligns our grid system's gutters with our spacing utilities.
+  - Added new [gutter class](https://getbootstrap.com/docs/5.1/layout/gutters/) (`.g-*`, `.gx-*`, and `.gy-*`) to control horizontal/vertical gutters, horizontal gutters, and vertical gutters.
+  - <span class="badge bg-danger">Breaking</span> Renamed `.no-gutters` to `.g-0` to match new gutter utilities.
+
+- Columns no longer have `position: relative` applied, so you may have to add `.position-relative` to some elements to restore that behavior.
+
+- <span class="badge bg-danger">Breaking</span> Dropped several `.order-*` classes that often went unused. We now only provide `.order-1` to `.order-5` out of the box.
+
+- <span class="badge bg-danger">Breaking</span> Dropped the `.media` component as it can be easily replicated with utilities. [See #28265](https://github.com/twbs/bootstrap/pull/28265) and the [flex utilities page for an example]({{< docsref "/utilities/flex#media-object" >}}).
+
+- <span class="badge bg-danger">Breaking</span> `bootstrap-grid.css` now only applies `box-sizing: border-box` to the column instead of resetting the global box-sizing. This way, our grid styles can be used in more places without interference.
+
+- `$enable-grid-classes` no longer disables the generation of container classes anymore. [See #29146.](https://github.com/twbs/bootstrap/pull/29146)
+
+- Updated the `make-col` mixin to default to equal columns without a specified size.
+
+## Content, Reboot, etc
+
+- **[RFS]({{< docsref "/getting-started/rfs" >}}) is now enabled by default.** Headings using the `font-size()` mixin will automatically adjust their `font-size` to scale with the viewport. _This feature was previously opt-in with v4._
+
+- <span class="badge bg-danger">Breaking</span> Overhauled our display typography to replace our `$display-*` variables and with a `$display-font-sizes` Sass map. Also removed the individual `$display-*-weight` variables for a single `$display-font-weight` and adjusted `font-size`s.
+
+- Added two new `.display-*` heading sizes, `.display-5` and `.display-6`.
+
+- **Links are underlined by default** (not just on hover), unless they're part of specific components.
+
+- **Redesigned tables** to refresh their styles and rebuild them with CSS variables for more control over styling.
+
+- <span class="badge bg-danger">Breaking</span> Nested tables do not inherit styles anymore.
+
+- <span class="badge bg-danger">Breaking</span> `.thead-light` and `.thead-dark` are dropped in favor of the `.table-*` variant classes which can be used for all table elements (`thead`, `tbody`, `tfoot`, `tr`, `th` and `td`).
+
+- <span class="badge bg-danger">Breaking</span> The `table-row-variant()` mixin is renamed to `table-variant()` and accepts only 2 parameters: `$color` (color name) and `$value` (color code). The border color and accent colors are automatically calculated based on the table factor variables.
+
+- Split table cell padding variables into `-y` and `-x`.
+
+- <span class="badge bg-danger">Breaking</span> Dropped `.pre-scrollable` class. [See #29135](https://github.com/twbs/bootstrap/pull/29135)
+
+- <span class="badge bg-danger">Breaking</span> `.text-*` utilities do not add hover and focus states to links anymore. `.link-*` helper classes can be used instead. [See #29267](https://github.com/twbs/bootstrap/pull/29267)
+
+- <span class="badge bg-danger">Breaking</span> Dropped `.text-justify` class. [See #29793](https://github.com/twbs/bootstrap/pull/29793)
+
+- <span class="badge bg-danger">Breaking</span> `<hr>` elements now use `height` instead of `border` to better support the `size` attribute. This also enables use of padding utilities to create thicker dividers (e.g., `<hr class="py-1">`).
+
+- Reset default horizontal `padding-left` on `<ul>` and `<ol>` elements from browser default `40px` to `2rem`.
+
+- Added `$enable-smooth-scroll`, which applies `scroll-behavior: smooth` globally—except for users asking for reduced motion through `prefers-reduced-motion` media query. [See #31877](https://github.com/twbs/bootstrap/pull/31877)
+
+## RTL
+
+- Horizontal direction specific variables, utilities, and mixins have all been renamed to use logical properties like those found in flexbox layouts—e.g., `start` and `end` in lieu of `left` and `right`.
+
+## Forms
+
+- **Added new floating forms!** We've promoted the Floating labels example to fully supported form components. [See the new Floating labels page.]({{< docsref "/forms/floating-labels" >}})
+
+- <span class="badge bg-danger">Breaking</span> **Consolidated native and custom form elements.** Checkboxes, radios, selects, and other inputs that had native and custom classes in v4 have been consolidated. Now nearly all our form elements are entirely custom, most without the need for custom HTML.
+  - `.custom-check` is now `.form-check`.
+  - `.custom-check.custom-switch` is now `.form-check.form-switch`.
+  - `.custom-select` is now `.form-select`.
+  - `.custom-file` and `.form-file` have been replaced by custom styles on top of `.form-control`.
+  - `.custom-range` is now `.form-range`.
+  - Dropped native `.form-control-file` and `.form-control-range`.
+
+- <span class="badge bg-danger">Breaking</span> Dropped `.input-group-append` and `.input-group-prepend`. You can now just add buttons and `.input-group-text` as direct children of the input groups.
+
+- The longstanding [Missing border radius on input group with validation feedback bug](https://github.com/twbs/bootstrap/issues/25110) is finally fixed by adding an additional `.has-validation` class to input groups with validation.
+
+- <span class="badge bg-danger">Breaking</span> **Dropped form-specific layout classes for our grid system.** Use our grid and utilities instead of `.form-group`, `.form-row`, or `.form-inline`.
+
+- <span class="badge bg-danger">Breaking</span> Form labels now require `.form-label`.
+
+- <span class="badge bg-danger">Breaking</span> `.form-text` no longer sets `display`, allowing you to create inline or block help text as you wish just by changing the HTML element.
+
+- Validation icons are no longer applied to `<select>`s with `multiple`.
+
+- Rearranged source Sass files under `scss/forms/`, including input group styles.
+
+<hr class="my-5">
+
+## Components
+
+- Unified `padding` values for alerts, breadcrumbs, cards, dropdowns, list groups, modals, popovers, and tooltips to be based on our `$spacer` variable. [See #30564](https://github.com/twbs/bootstrap/pull/30564).
+
+### Accordion
+
+- Added [new accordion component]({{< docsref "/components/accordion" >}}).
+
+### Alerts
+
+- Alerts now have [examples with icons]({{< docsref "/components/alerts#icons" >}}).
+
+- Removed custom styles for `<hr>`s in each alert since they already use `currentColor`.
+
+### Badges
+
+- <span class="badge bg-danger">Breaking</span> Dropped all `.badge-*` color classes for background utilities (e.g., use `.bg-primary` instead of `.badge-primary`).
+
+- <span class="badge bg-danger">Breaking</span> Dropped `.badge-pill`—use the `.rounded-pill` utility instead.
+
+- <span class="badge bg-danger">Breaking</span> Removed hover and focus styles for `<a>` and `<button>` elements.
+
+- Increased default padding for badges from `.25em`/`.5em` to `.35em`/`.65em`.
+
+### Breadcrumbs
+
+- Simplified the default appearance of breadcrumbs by removing `padding`, `background-color`, and `border-radius`.
+
+- Added new CSS custom property `--bs-breadcrumb-divider` for easy customization without needing to recompile CSS.
+
+### Buttons
+
+- <span class="badge bg-danger">Breaking</span> **[Toggle buttons](https://getbootstrap.com/docs/5.1/forms/checks-radios/#toggle-buttons), with checkboxes or radios, no longer require JavaScript and have new markup.** We no longer require a wrapping element, add `.btn-check` to the `<input>`, and pair it with any `.btn` classes on the `<label>`. [See #30650](https://github.com/twbs/bootstrap/pull/30650). _The docs for this has moved from our Buttons page to the new Forms section._
+
+- <span class="badge bg-danger">Breaking</span> **Dropped `.btn-block` for utilities.** Instead of using `.btn-block` on the `.btn`, wrap your buttons with `.d-grid` and a `.gap-*` utility to space them as needed. Switch to responsive classes for even more control over them. [Read the docs for some examples.](https://getbootstrap.com/docs/5.1/components/buttons/#block-buttons)
+
+- Updated our `button-variant()` and `button-outline-variant()` mixins to support additional parameters.
+
+- Updated buttons to ensure increased contrast on hover and active states.
+
+- Disabled buttons now have `pointer-events: none;`.
+
+### Card
+
+- <span class="badge bg-danger">Breaking</span> Dropped `.card-deck` in favor of our grid. Wrap your cards in column classes and add a parent `.row-cols-*` container to recreate card decks (but with more control over responsive alignment).
+
+- <span class="badge bg-danger">Breaking</span> Dropped `.card-columns` in favor of Masonry. [See #28922](https://github.com/twbs/bootstrap/pull/28922).
+
+- <span class="badge bg-danger">Breaking</span> Replaced the `.card` based accordion with a [new Accordion component]({{< docsref "/components/accordion" >}}).
+
+### Carousel
+
+- Added new [`.carousel-dark` variant]({{< docsref "/components/carousel#dark-variant" >}}) for dark text, controls, and indicators (great for lighter backgrounds).
+
+- Replaced chevron icons for carousel controls with new SVGs from [Bootstrap Icons]({{< param "icons" >}}).
+
+### Close button
+
+- <span class="badge bg-danger">Breaking</span> Renamed `.close` to `.btn-close` for a less generic name.
+
+- Close buttons now use a `background-image` (embedded SVG) instead of a `&times;` in the HTML, allowing for easier customization without the need to touch your markup.
+
+- Added new `.btn-close-white` variant that uses `filter: invert(1)` to enable higher contrast dismiss icons against darker backgrounds.
+
+### Collapse
+
+- Removed scroll anchoring for accordions.
+
+### Dropdowns
+
+- Added new `.dropdown-menu-dark` variant and associated variables for on-demand dark dropdowns.
+
+- Added new variable for `$dropdown-padding-x`.
+
+- Darkened the dropdown divider for improved contrast.
+
+- <span class="badge bg-danger">Breaking</span> All the events for the dropdown are now triggered on the dropdown toggle button and then bubbled up to the parent element.
+
+- Dropdown menus now have a `data-bs-popper="static"` attribute set when the positioning of the dropdown is static and `data-bs-popper="none"` when dropdown is in the navbar. This is added by our JavaScript and helps us use custom position styles without interfering with Popper's positioning.
+
+- <span class="badge bg-danger">Breaking</span> Dropped `flip` option for dropdown plugin in favor of native Popper configuration. You can now disable the flipping behavior by passing an empty array for [`fallbackPlacements`](https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) option in [flip](https://popper.js.org/docs/v2/modifiers/flip/) modifier.
+
+- Dropdown menus can now be clickable with a new `autoClose` option to handle the [auto close behavior]({{< docsref "/components/dropdowns#auto-close-behavior" >}}). You can use this option to accept the click inside or outside the dropdown menu to make it interactive.
+
+- Dropdowns now support `.dropdown-item`s wrapped in `<li>`s.
+
+### Jumbotron
+
+- <span class="badge bg-danger">Breaking</span> Dropped the jumbotron component as it can be replicated with utilities. [See our new Jumbotron example for a demo.](https://getbootstrap.com/docs/5.1/examples/jumbotron/)
+
+### List group
+
+- Added new [`.list-group-numbered` modifier]({{< docsref "/components/list-group#numbered" >}}) to list groups.
+
+### Navs and tabs
+
+- Added new `null` variables for `font-size`, `font-weight`, `color`, and `:hover` `color` to the `.nav-link` class.
+
+### Navbars
+
+- <span class="badge bg-danger">Breaking</span> Navbars now require a container within (to drastically simplify spacing requirements and CSS required).
+
+### Offcanvas
+
+- Added the new [offcanvas component]({{< docsref "/components/offcanvas" >}}).
+
+### Pagination
+
+- Pagination links now have customizable `margin-left` that are dynamically rounded on all corners when separated from one another.
+
+- Added `transition`s to pagination links.
+
+### Popovers
+
+- <span class="badge bg-danger">Breaking</span> Renamed `.arrow` to `.popover-arrow` in our default popover template.
+
+- Renamed `whiteList` option to `allowList`.
+
+### Spinners
+
+- Spinners now honor `prefers-reduced-motion: reduce` by slowing down animations. [See #31882](https://github.com/twbs/bootstrap/pull/31882).
+
+- Improved spinner vertical alignment.
+
+### Toasts
+
+- Toasts can now be [positioned]({{< docsref "/components/toasts#placement" >}}) in a `.toast-container` with the help of [positioning utilities]({{< docsref "/utilities/position" >}}).
+
+- Changed default toast duration to 5 seconds.
+
+- Removed `overflow: hidden` from toasts and replaced with proper `border-radius`s with `calc()` functions.
+
+### Tooltips
+
+- <span class="badge bg-danger">Breaking</span> Renamed `.arrow` to `.tooltip-arrow` in our default tooltip template.
+
+- <span class="badge bg-danger">Breaking</span> The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of popper elements.
+
+- <span class="badge bg-danger">Breaking</span> Renamed `whiteList` option to `allowList`.
+
+## Utilities
+
+- <span class="badge bg-danger">Breaking</span> Renamed several utilities to use logical property names instead of directional names with the addition of RTL support:
+  - Renamed `.left-*` and `.right-*` to `.start-*` and `.end-*`.
+  - Renamed `.float-left` and `.float-right` to `.float-start` and `.float-end`.
+  - Renamed `.border-left` and `.border-right` to `.border-start` and `.border-end`.
+  - Renamed `.rounded-left` and `.rounded-right` to `.rounded-start` and `.rounded-end`.
+  - Renamed `.ml-*` and `.mr-*` to `.ms-*` and `.me-*`.
+  - Renamed `.pl-*` and `.pr-*` to `.ps-*` and `.pe-*`.
+  - Renamed `.text-left` and `.text-right` to `.text-start` and `.text-end`.
+
+- <span class="badge bg-danger">Breaking</span> Disabled negative margins by default.
+
+- Added new `.bg-body` class for quickly setting the `<body>`'s background to additional elements.
+
+- Added new [position utilities]({{< docsref "/utilities/position#arrange-elements" >}}) for `top`, `right`, `bottom`, and `left`. Values include `0`, `50%`, and `100%` for each property.
+
+- Added new `.translate-middle-x` & `.translate-middle-y` utilities to horizontally or vertically center absolute/fixed positioned elements.
+
+- Added new [`border-width` utilities]({{< docsref "/utilities/borders#border-width" >}}).
+
+- <span class="badge bg-danger">Breaking</span> Renamed `.text-monospace` to `.font-monospace`.
+
+- <span class="badge bg-danger">Breaking</span> Removed `.text-hide` as it's an antiquated method for hiding text that shouldn't be used anymore.
+
+- Added `.fs-*` utilities for `font-size` utilities (with RFS enabled). These use the same scale as HTML's default headings (1-6, large to small), and can be modified via Sass map.
+
+- <span class="badge bg-danger">Breaking</span> Renamed `.font-weight-*` utilities as `.fw-*` for brevity and consistency.
+
+- <span class="badge bg-danger">Breaking</span> Renamed `.font-style-*` utilities as `.fst-*` for brevity and consistency.
+
+- Added `.d-grid` to display utilities and new `gap` utilities (`.gap`) for CSS Grid and flexbox layouts.
+
+- <span class="badge bg-danger">Breaking</span> Removed `.rounded-sm` and `rounded-lg`, and introduced a new scale of classes, `.rounded-0` to `.rounded-3`. [See #31687](https://github.com/twbs/bootstrap/pull/31687).
+
+- Added new `line-height` utilities: `.lh-1`, `.lh-sm`, `.lh-base` and `.lh-lg`. See [here]({{< docsref "/utilities/text#line-height" >}}).
+
+- Moved the `.d-none` utility in our CSS to give it more weight over other display utilities.
+
+- Extended the `.visually-hidden-focusable` helper to also work on containers, using `:focus-within`.
+
+## Helpers
+
+- <span class="badge bg-danger">Breaking</span> **Responsive embed helpers have been renamed to [ratio helpers]({{< docsref "/helpers/ratio" >}})** with new class names and improved behaviors, as well as a helpful CSS variable.
+  - Classes have been renamed to change `by` to `x` in the aspect ratio. For example, `.ratio-16by9` is now `.ratio-16x9`.
+  - We've dropped the `.embed-responsive-item` and element group selector in favor of a simpler `.ratio > *` selector. No more class is needed, and the ratio helper now works with any HTML element.
+  - The `$embed-responsive-aspect-ratios` Sass map has been renamed to `$aspect-ratios` and its values have been simplified to include the class name and the percentage as the `key: value` pair.
+  - CSS variables are now generated and included for each value in the Sass map. Modify the `--bs-aspect-ratio` variable on the `.ratio` to create any [custom aspect ratio]({{< docsref "/helpers/ratio#custom-ratios" >}}).
+
+- <span class="badge bg-danger">Breaking</span> **"Screen reader" classes are now ["visually hidden" classes]({{< docsref "/helpers/visually-hidden" >}}).**
+  - Changed the Sass file from `scss/helpers/_screenreaders.scss` to `scss/helpers/_visually-hidden.scss`
+  - Renamed `.sr-only` and `.sr-only-focusable` to `.visually-hidden` and `.visually-hidden-focusable`
+  - Renamed `sr-only()` and `sr-only-focusable()` mixins to `visually-hidden()` and `visually-hidden-focusable()`.
+
+- `bootstrap-utilities.css` now also includes our helpers. Helpers don't need to be imported in custom builds anymore.
+
+## JavaScript
+
+- **Dropped jQuery dependency** and rewrote plugins to be in regular JavaScript.
+
+- <span class="badge bg-danger">Breaking</span> Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use `data-bs-toggle` instead of `data-toggle`.
+
+- **All plugins can now accept a CSS selector as the first argument.** You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin:
+
+  ```js
+  var modal = new bootstrap.Modal('#myModal')
+  var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
+  ```
+
+- `popperConfig` can be passed as a function that accepts the Bootstrap's default Popper config as an argument, so that you can merge this default configuration in your way. **Applies to dropdowns, popovers, and tooltips.**
+
+- The default value for the `fallbackPlacements` is changed to `['top', 'right', 'bottom', 'left']` for better placement of Popper elements. **Applies to dropdowns, popovers, and tooltips.**
+
+- Removed underscore from public static methods like `_getInstance()` → `getInstance()`.
diff --git a/site/content/docs/5.1/utilities/api.md b/site/content/docs/5.1/utilities/api.md
new file mode 100644
index 000000000..66b6bc0f8
--- /dev/null
+++ b/site/content/docs/5.1/utilities/api.md
@@ -0,0 +1,519 @@
+---
+layout: docs
+title: Utility API
+description: The utility API is a Sass-based tool to generate utility classes.
+group: utilities
+aliases: "/docs/5.1/utilities/"
+toc: true
+---
+
+Bootstrap utilities are generated with our utility API and can be used to modify or extend our default set of utility classes via Sass. Our utility API is based on a series of Sass maps and functions for generating families of classes with various options. If you're unfamiliar with Sass maps, read up on the [official Sass docs](https://sass-lang.com/documentation/values/maps) to get started.
+
+The `$utilities` map contains all our utilities and is later merged with your custom `$utilities` map, if present. The utility map contains a keyed list of utility groups which accept the following options:
+
+{{< bs-table "table text-start" >}}
+| Option | Type | Default&nbsp;value | Description |
+| --- | --- | --- | --- |
+| [`property`](#property) | **Required** | – | Name of the property, this can be a string or an array of strings (e.g., horizontal paddings or margins). |
+| [`values`](#values) | **Required** | – | List of values, or a map if you don't want the class name to be the same as the value. If `null` is used as map key, it isn't compiled. |
+| [`class`](#class) | Optional | null | Name of the generated class. If not provided and `property` is an array of strings, `class` will default to the first element of the `property` array. |
+| [`css-var`](#css-variable-utilities) | Optional | `false` | Boolean to generate CSS variables instead of CSS rules. |
+| [`local-vars`](#local-css-variables) | Optional | null | Map of local CSS variables to generate in addition to the CSS rules. |
+| [`state`](#states) | Optional | null | List of pseudo-class variants (e.g., `:hover` or `:focus`) to generate. |
+| [`responsive`](#responsive) | Optional | `false` | Boolean indicating if responsive classes should be generated. |
+| `rfs` | Optional | `false` | Boolean to enable [fluid rescaling with RFS]({{< docsref "/getting-started/rfs" >}}). |
+| [`print`](#print) | Optional | `false` | Boolean indicating if print classes need to be generated. |
+| `rtl` | Optional | `true` | Boolean indicating if utility should be kept in RTL. |
+{{< /bs-table >}}
+
+## API explained
+
+All utility variables are added to the `$utilities` variable within our `_utilities.scss` stylesheet. Each group of utilities looks something like this:
+
+```scss
+$utilities: (
+  "opacity": (
+    property: opacity,
+    values: (
+      0: 0,
+      25: .25,
+      50: .5,
+      75: .75,
+      100: 1,
+    )
+  )
+);
+```
+
+Which outputs the following:
+
+```css
+.opacity-0 { opacity: 0; }
+.opacity-25 { opacity: .25; }
+.opacity-50 { opacity: .5; }
+.opacity-75 { opacity: .75; }
+.opacity-100 { opacity: 1; }
+```
+
+### Property
+
+The required `property` key must be set for any utility, and it must contain a valid CSS property. This property is used in the generated utility's ruleset. When the `class` key is omitted, it also serves as the default class name. Consider the `text-decoration` utility:
+
+```scss
+$utilities: (
+  "text-decoration": (
+    property: text-decoration,
+    values: none underline line-through
+  )
+);
+```
+
+Output:
+
+```css
+.text-decoration-none { text-decoration: none !important; }
+.text-decoration-underline { text-decoration: underline !important; }
+.text-decoration-line-through { text-decoration: line-through !important; }
+```
+
+### Values
+
+Use the `values` key to specify which values for the specified `property` should be used in the generated class names and rules. Can be a list or map (set in the utilities or in a Sass variable).
+
+As a list, like with [`text-decoration` utilities]({{< docsref "/utilities/text#text-decoration" >}}):
+
+```scss
+values: none underline line-through
+```
+
+As a map, like with [`opacity` utilities]({{< docsref "/utilities/opacity" >}}):
+
+```scss
+values: (
+  0: 0,
+  25: .25,
+  50: .5,
+  75: .75,
+  100: 1,
+)
+```
+
+As a Sass variable that sets the list or map, as in our [`position` utilities]({{< docsref "/utilities/position" >}}):
+
+```scss
+values: $position-values
+```
+
+### Class
+
+Use the `class` option to change the class prefix used in the compiled CSS. For example, to change from `.opacity-*` to `.o-*`:
+
+```scss
+$utilities: (
+  "opacity": (
+    property: opacity,
+    class: o,
+    values: (
+      0: 0,
+      25: .25,
+      50: .5,
+      75: .75,
+      100: 1,
+    )
+  )
+);
+```
+
+Output:
+
+```css
+.o-0 { opacity: 0 !important; }
+.o-25 { opacity: .25 !important; }
+.o-50 { opacity: .5 !important; }
+.o-75 { opacity: .75 !important; }
+.o-100 { opacity: 1 !important; }
+```
+
+### CSS variable utilities
+
+Set the `css-var` boolean option to `true` and the API will generate local CSS variables for the given selector instead of the usual `property: value` rules. Consider our `.text-opacity-*` utilities:
+
+```scss
+$utilities: (
+  "text-opacity": (
+    css-var: true,
+    class: text-opacity,
+    values: (
+      25: .25,
+      50: .5,
+      75: .75,
+      100: 1
+    )
+  ),
+);
+```
+
+Output:
+
+```css
+.text-opacity-25 { --bs-text-opacity: .25; }
+.text-opacity-50 { --bs-text-opacity: .5; }
+.text-opacity-75 { --bs-text-opacity: .75; }
+.text-opacity-100 { --bs-text-opacity: 1; }
+```
+
+### Local CSS variables
+
+Use the `local-vars` option to specify a Sass map that will generate local CSS variables within the utility class's ruleset. Please note that it may require additional work to consume those local CSS variables in the generated CSS rules. For example, consider our `.bg-*` utilities:
+
+```scss
+$utilities: (
+  "background-color": (
+    property: background-color,
+    class: bg,
+    local-vars: (
+      "bg-opacity": 1
+    ),
+    values: map-merge(
+      $utilities-bg-colors,
+      (
+        "transparent": transparent
+      )
+    )
+  )
+);
+```
+
+Output:
+
+```css
+.bg-primary {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
+}
+```
+
+### States
+
+Use the `state` option to generate pseudo-class variations. Example pseudo-classes are `:hover` and `:focus`. When a list of states are provided, classnames are created for that pseudo-class. For example, to change opacity on hover, add `state: hover` and you'll get `.opacity-hover:hover` in your compiled CSS.
+
+Need multiple pseudo-classes? Use a space-separated list of states: `state: hover focus`.
+
+```scss
+$utilities: (
+  "opacity": (
+    property: opacity,
+    class: opacity,
+    state: hover,
+    values: (
+      0: 0,
+      25: .25,
+      50: .5,
+      75: .75,
+      100: 1,
+    )
+  )
+);
+```
+
+Output:
+
+```css
+.opacity-0-hover:hover { opacity: 0 !important; }
+.opacity-25-hover:hover { opacity: .25 !important; }
+.opacity-50-hover:hover { opacity: .5 !important; }
+.opacity-75-hover:hover { opacity: .75 !important; }
+.opacity-100-hover:hover { opacity: 1 !important; }
+```
+
+### Responsive
+
+Add the `responsive` boolean to generate responsive utilities (e.g., `.opacity-md-25`) across [all breakpoints]({{< docsref "/layout/breakpoints" >}}).
+
+```scss
+$utilities: (
+  "opacity": (
+    property: opacity,
+    responsive: true,
+    values: (
+      0: 0,
+      25: .25,
+      50: .5,
+      75: .75,
+      100: 1,
+    )
+  )
+);
+```
+
+Output:
+
+```css
+.opacity-0 { opacity: 0 !important; }
+.opacity-25 { opacity: .25 !important; }
+.opacity-50 { opacity: .5 !important; }
+.opacity-75 { opacity: .75 !important; }
+.opacity-100 { opacity: 1 !important; }
+
+@media (min-width: 576px) {
+  .opacity-sm-0 { opacity: 0 !important; }
+  .opacity-sm-25 { opacity: .25 !important; }
+  .opacity-sm-50 { opacity: .5 !important; }
+  .opacity-sm-75 { opacity: .75 !important; }
+  .opacity-sm-100 { opacity: 1 !important; }
+}
+
+@media (min-width: 768px) {
+  .opacity-md-0 { opacity: 0 !important; }
+  .opacity-md-25 { opacity: .25 !important; }
+  .opacity-md-50 { opacity: .5 !important; }
+  .opacity-md-75 { opacity: .75 !important; }
+  .opacity-md-100 { opacity: 1 !important; }
+}
+
+@media (min-width: 992px) {
+  .opacity-lg-0 { opacity: 0 !important; }
+  .opacity-lg-25 { opacity: .25 !important; }
+  .opacity-lg-50 { opacity: .5 !important; }
+  .opacity-lg-75 { opacity: .75 !important; }
+  .opacity-lg-100 { opacity: 1 !important; }
+}
+
+@media (min-width: 1200px) {
+  .opacity-xl-0 { opacity: 0 !important; }
+  .opacity-xl-25 { opacity: .25 !important; }
+  .opacity-xl-50 { opacity: .5 !important; }
+  .opacity-xl-75 { opacity: .75 !important; }
+  .opacity-xl-100 { opacity: 1 !important; }
+}
+
+@media (min-width: 1400px) {
+  .opacity-xxl-0 { opacity: 0 !important; }
+  .opacity-xxl-25 { opacity: .25 !important; }
+  .opacity-xxl-50 { opacity: .5 !important; }
+  .opacity-xxl-75 { opacity: .75 !important; }
+  .opacity-xxl-100 { opacity: 1 !important; }
+}
+```
+
+### Print
+
+Enabling the `print` option will **also** generate utility classes for print, which are only applied within the `@media print { ... }` media query.
+
+```scss
+$utilities: (
+  "opacity": (
+    property: opacity,
+    print: true,
+    values: (
+      0: 0,
+      25: .25,
+      50: .5,
+      75: .75,
+      100: 1,
+    )
+  )
+);
+```
+
+Output:
+
+```css
+.opacity-0 { opacity: 0 !important; }
+.opacity-25 { opacity: .25 !important; }
+.opacity-50 { opacity: .5 !important; }
+.opacity-75 { opacity: .75 !important; }
+.opacity-100 { opacity: 1 !important; }
+
+@media print {
+  .opacity-print-0 { opacity: 0 !important; }
+  .opacity-print-25 { opacity: .25 !important; }
+  .opacity-print-50 { opacity: .5 !important; }
+  .opacity-print-75 { opacity: .75 !important; }
+  .opacity-print-100 { opacity: 1 !important; }
+}
+```
+
+## Importance
+
+All utilities generated by the API include `!important` to ensure they override components and modifier classes as intended. You can toggle this setting globally with the `$enable-important-utilities` variable (defaults to `true`).
+
+## Using the API
+
+Now that you're familiar with how the utilities API works, learn how to add your own custom classes and modify our default utilities.
+
+### Override utilities
+
+Override existing utilities by using the same key. For example, if you want additional responsive overflow utility classes, you can do this:
+
+```scss
+$utilities: (
+  "overflow": (
+    responsive: true,
+    property: overflow,
+    values: visible hidden scroll auto,
+  ),
+);
+```
+
+### Add utilities
+
+New utilities can be added to the default `$utilities` map with a `map-merge`. Make sure our required Sass files and `_utilities.scss` are imported first, then use the `map-merge` to add your additional utilities. For example, here's how to add a responsive `cursor` utility with three values.
+
+```scss
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/utilities";
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "cursor": (
+      property: cursor,
+      class: cursor,
+      responsive: true,
+      values: auto pointer grab,
+    )
+  )
+);
+```
+
+### Modify utilities
+
+Modify existing utilities in the default `$utilities` map with `map-get` and `map-merge` functions. In the example below, we're adding an additional value to the `width` utilities. Start with an initial `map-merge` and then specify which utility you want to modify. From there, fetch the nested `"width"` map with `map-get` to access and modify the utility's options and values.
+
+```scss
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/utilities";
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "width": map-merge(
+      map-get($utilities, "width"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "width"), "values"),
+          (10: 10%),
+        ),
+      ),
+    ),
+  )
+);
+```
+
+#### Enable responsive
+
+You can enable responsive classes for an existing set of utilities that are not currently responsive by default. For example, to make the `border` classes responsive:
+
+```scss
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/utilities";
+
+$utilities: map-merge(
+  $utilities, (
+    "border": map-merge(
+      map-get($utilities, "border"),
+      ( responsive: true ),
+    ),
+  )
+);
+```
+
+This will now generate responsive variations of `.border` and `.border-0` for each breakpoint. Your generated CSS will look like this:
+
+```css
+.border { ... }
+.border-0 { ... }
+
+@media (min-width: 576px) {
+  .border-sm { ... }
+  .border-sm-0 { ... }
+}
+
+@media (min-width: 768px) {
+  .border-md { ... }
+  .border-md-0 { ... }
+}
+
+@media (min-width: 992px) {
+  .border-lg { ... }
+  .border-lg-0 { ... }
+}
+
+@media (min-width: 1200px) {
+  .border-xl { ... }
+  .border-xl-0 { ... }
+}
+
+@media (min-width: 1400px) {
+  .border-xxl { ... }
+  .border-xxl-0 { ... }
+}
+```
+
+#### Rename utilities
+
+Missing v4 utilities, or used to another naming convention? The utilities API can be used to override the resulting `class` of a given utility—for example, to rename `.ms-*` utilities to oldish `.ml-*`:
+
+```scss
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/utilities";
+
+$utilities: map-merge(
+  $utilities, (
+    "margin-start": map-merge(
+      map-get($utilities, "margin-start"),
+      ( class: ml ),
+    ),
+  )
+);
+```
+
+### Remove utilities
+
+Remove any of the default utilities by setting the group key to `null`. For example, to remove all our `width` utilities, create a `$utilities` `map-merge` and add `"width": null` within.
+
+```scss
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/utilities";
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "width": null
+  )
+);
+```
+
+#### Remove utility in RTL
+
+Some edge cases make [RTL styling difficult](https://rtlstyling.com/posts/rtl-styling#common-things-that-might-not-work-for-rtl), such as line breaks in Arabic. Thus utilities can be dropped from RTL output by setting the `rtl` option to `false`:
+
+```scss
+$utilities: (
+  "word-wrap": (
+    property: word-wrap word-break,
+    class: text,
+    values: (break: break-word),
+    rtl: false
+  ),
+);
+```
+
+Output:
+
+```css
+/* rtl:begin:remove */
+.text-break {
+  word-wrap: break-word !important;
+  word-break: break-word !important;
+}
+/* rtl:end:remove */
+```
+
+This doesn't output anything in RTL, thanks to [the RTLCSS `remove` control directive](https://rtlcss.com/learn/usage-guide/control-directives/#remove).
diff --git a/site/content/docs/5.0/utilities/background.md b/site/content/docs/5.1/utilities/background.md
index 7b1b48140..61c27365b 100644
--- a/site/content/docs/5.0/utilities/background.md
+++ b/site/content/docs/5.1/utilities/background.md
@@ -35,6 +35,44 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
 {{< /colors.inline >}}
 {{< /markdown >}}
 
+## Opacity
+
+<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.1.0</small>
+
+As of v5.1.0, `background-color` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
+
+### How it works
+
+Consider our default `.bg-success` utility.
+
+```css
+.bg-success {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
+}
+```
+
+We use an RGB version of our `--bs-success` (with the value of `25, 135, 84`) CSS variable and attached a second CSS variable, `--bs-bg-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.bg-success` now, your computed `color` value is `rgba(25, 135, 84, 1)`. The local CSS variable inside each `.bg-*` class avoids inheritance issues so nested instances of the utilities don't automatically have a modified alpha transparency.
+
+### Example
+
+To change that opacity, override `--bs-bg-opacity` via custom styles or inline styles.
+
+{{< example >}}
+<div class="bg-success p-2 text-white">This is default success background</div>
+<div class="bg-success p-2" style="--bs-bg-opacity: .5;">This is 50% opacity success background</div>
+{{< /example >}}
+
+Or, choose from any of the `.bg-opacity` utilities:
+
+{{< example >}}
+<div class="bg-success p-2 text-white">This is default success background</div>
+<div class="bg-success p-2 text-white bg-opacity-75">This is 75% opacity success background</div>
+<div class="bg-success p-2 text-dark bg-opacity-50">This is 50% opacity success background</div>
+<div class="bg-success p-2 text-dark bg-opacity-25">This is 25% opacity success background</div>
+<div class="bg-success p-2 text-dark bg-opacity-10">This is 10% opacity success background</div>
+{{< /example >}}
+
 ## Sass
 
 In addition to the following Sass functionality, consider reading about our included [CSS custom properties]({{< docsref "/customize/css-variables" >}}) (aka CSS variables) for colors and more.
@@ -63,6 +101,14 @@ Grayscale colors are also available as a Sass map. **This map is not used to gen
 
 {{< scss-docs name="gray-colors-map" file="scss/_variables.scss" >}}
 
+RGB colors are generated from a separate Sass map:
+
+{{< scss-docs name="theme-colors-rgb" file="scss/_variables.scss" >}}
+
+And background color opacities build on that with their own map that's consumed by the utilities API:
+
+{{< scss-docs name="utilities-bg-colors" file="scss/_variables.scss" >}}
+
 ### Mixins
 
 **No mixins are used to generate our background utilities**, but we do have some additional mixins for other situations where you'd like to create your own gradients.
diff --git a/site/content/docs/5.0/utilities/borders.md b/site/content/docs/5.1/utilities/borders.md
index 14f700529..6ba1174c9 100644
--- a/site/content/docs/5.0/utilities/borders.md
+++ b/site/content/docs/5.1/utilities/borders.md
@@ -90,7 +90,7 @@ Use the scaling classes for larger or smaller rounded corners. Sizes range from
 
 {{< scss-docs name="border-radius-mixins" file="scss/mixins/_border-radius.scss" >}}
 
-### Utilities
+### Utilities API
 
 Border utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
 
diff --git a/site/content/docs/5.0/utilities/colors.md b/site/content/docs/5.1/utilities/colors.md
index 266f671f6..60462070b 100644
--- a/site/content/docs/5.0/utilities/colors.md
+++ b/site/content/docs/5.1/utilities/colors.md
@@ -23,10 +23,51 @@ Colorize text with color utilities. If you want to colorize links, you can use t
 <p class="text-white-50 bg-dark">.text-white-50</p>
 {{< /example >}}
 
+{{< callout warning >}}
+**Deprecation:** With the addition of `.text-opacity-*` utilities and CSS variables for text utilities, `.text-black-50` and `.text-white-50` are deprecated as of v5.1.0. They'll be removed in v6.0.0.
+{{< /callout >}}
+
 {{< callout info >}}
 {{< partial "callout-warning-color-assistive-technologies.md" >}}
 {{< /callout >}}
 
+## Opacity
+
+<small class="d-inline-flex px-2 py-1 font-monospace text-muted border rounded-3">Added in v5.1.0</small>
+
+As of v5.1.0, text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.
+
+### How it works
+
+Consider our default `.text-primary` utility.
+
+```css
+.text-primary {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
+}
+```
+
+We use an RGB version of our `--bs-primary` (with the value of `13, 110, 253`) CSS variable and attached a second CSS variable, `--bs-text-opacity`, for the alpha transparency (with a default value `1` thanks to a local CSS variable). That means anytime you use `.text-primary` now, your computed `color` value is `rgba(13, 110, 253, 1)`. The local CSS variable inside each `.text-*` class avoids inheritance issues so nested instances of the utilities don't automatically have a modified alpha transparency.
+
+### Example
+
+To change that opacity, override `--bs-text-opacity` via custom styles or inline styles.
+
+{{< example >}}
+<div class="text-primary">This is default primary text</div>
+<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>
+{{< /example >}}
+
+Or, choose from any of the `.text-opacity` utilities:
+
+{{< example >}}
+<div class="text-primary">This is default primary text</div>
+<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
+<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
+<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>
+{{< /example >}}
+
 ## Specificity
 
 Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` or more semantic element with the desired class.
@@ -57,6 +98,14 @@ Grayscale colors are also available as a Sass map. **This map is not used to gen
 
 {{< scss-docs name="gray-colors-map" file="scss/_variables.scss" >}}
 
+RGB colors are generated from a separate Sass map:
+
+{{< scss-docs name="theme-colors-rgb" file="scss/_variables.scss" >}}
+
+And color opacities build on that with their own map that's consumed by the utilities API:
+
+{{< scss-docs name="utilities-text-colors" file="scss/_variables.scss" >}}
+
 ### Utilities API
 
 Color utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
diff --git a/site/content/docs/5.0/utilities/display.md b/site/content/docs/5.1/utilities/display.md
index 9e5a5dfb2..9e5a5dfb2 100644
--- a/site/content/docs/5.0/utilities/display.md
+++ b/site/content/docs/5.1/utilities/display.md
diff --git a/site/content/docs/5.0/utilities/flex.md b/site/content/docs/5.1/utilities/flex.md
index 2e22ed988..bbb1824b4 100644
--- a/site/content/docs/5.0/utilities/flex.md
+++ b/site/content/docs/5.1/utilities/flex.md
@@ -101,7 +101,7 @@ Use `justify-content` utilities on flexbox containers to change the alignment of
     <div class="p-2 bd-highlight">Flex item</div>
     <div class="p-2 bd-highlight">Flex item</div>
   </div>
-  <div class="d-flex justify-content-around bd-highlight">
+  <div class="d-flex justify-content-around bd-highlight mb-3">
     <div class="p-2 bd-highlight">Flex item</div>
     <div class="p-2 bd-highlight">Flex item</div>
     <div class="p-2 bd-highlight">Flex item</div>
@@ -628,6 +628,34 @@ Responsive variations also exist for `align-content`.
 {{< /flex.inline >}}
 {{< /markdown >}}
 
+## Media object
+
+Looking to replicate the [media object component](https://getbootstrap.com/docs/4.6/components/media-object/) from Bootstrap 4? Recreate it in no time with a few flex utilities that allow even more flexibility and customization than before.
+
+{{< example >}}
+<div class="d-flex">
+  <div class="flex-shrink-0">
+    {{< placeholder width="100" height="100" color="#999" background="#e5e5e5" text="Image" >}}
+  </div>
+  <div class="flex-grow-1 ms-3">
+    This is some content from a media component. You can replace this with any content and adjust it as needed.
+  </div>
+</div>
+{{< /example >}}
+
+And say you want to vertically center the content next to the image:
+
+{{< example >}}
+<div class="d-flex align-items-center">
+  <div class="flex-shrink-0">
+    {{< placeholder width="100" height="100" color="#999" background="#e5e5e5" text="Image" >}}
+  </div>
+  <div class="flex-grow-1 ms-3">
+    This is some content from a media component. You can replace this with any content and adjust it as needed.
+  </div>
+</div>
+{{< /example >}}
+
 ## Sass
 
 ### Utilities API
diff --git a/site/content/docs/5.0/utilities/float.md b/site/content/docs/5.1/utilities/float.md
index a18c21471..a18c21471 100644
--- a/site/content/docs/5.0/utilities/float.md
+++ b/site/content/docs/5.1/utilities/float.md
diff --git a/site/content/docs/5.0/utilities/interactions.md b/site/content/docs/5.1/utilities/interactions.md
index b95b98a10..b95b98a10 100644
--- a/site/content/docs/5.0/utilities/interactions.md
+++ b/site/content/docs/5.1/utilities/interactions.md
diff --git a/site/content/docs/5.1/utilities/opacity.md b/site/content/docs/5.1/utilities/opacity.md
new file mode 100644
index 000000000..a2fdc3807
--- /dev/null
+++ b/site/content/docs/5.1/utilities/opacity.md
@@ -0,0 +1,30 @@
+---
+layout: docs
+title: Opacity
+description: Control the opacity of elements.
+group: utilities
+---
+
+The `opacity` property sets the opacity level for an element. The opacity level describes the transparency level, where `1` is not transparent at all, `.5` is 50% visible, and `0` is completely transparent.
+
+Set the `opacity` of an element using `.opacity-{value}` utilities.
+
+<div class="bd-example d-sm-flex">
+  <div class="opacity-100 p-3 m-2 bg-primary text-light fw-bold rounded">100%</div>
+  <div class="opacity-75 p-3 m-2 bg-primary text-light fw-bold rounded">75%</div>
+  <div class="opacity-50 p-3 m-2 bg-primary text-light fw-bold rounded">50%</div>
+  <div class="opacity-25 p-3 m-2 bg-primary text-light fw-bold rounded">25%</div>
+</div>
+
+```html
+<div class="opacity-100">...</div>
+<div class="opacity-75">...</div>
+<div class="opacity-50">...</div>
+<div class="opacity-25">...</div>
+```
+
+### Utilities API
+
+Opacity utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-opacity" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/5.0/utilities/overflow.md b/site/content/docs/5.1/utilities/overflow.md
index a36374cd5..a36374cd5 100644
--- a/site/content/docs/5.0/utilities/overflow.md
+++ b/site/content/docs/5.1/utilities/overflow.md
diff --git a/site/content/docs/5.0/utilities/position.md b/site/content/docs/5.1/utilities/position.md
index bc57eb028..46e62dd36 100644
--- a/site/content/docs/5.0/utilities/position.md
+++ b/site/content/docs/5.1/utilities/position.md
@@ -107,7 +107,7 @@ You can use these classes with existing components to create new ones. Remember
 {{< example class="bd-example-position-examples" >}}
 <div class="position-relative m-4">
   <div class="progress" style="height: 1px;">
-    <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+    <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   <button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
   <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
diff --git a/site/content/docs/5.0/utilities/shadows.md b/site/content/docs/5.1/utilities/shadows.md
index bb5ef44ab..bb5ef44ab 100644
--- a/site/content/docs/5.0/utilities/shadows.md
+++ b/site/content/docs/5.1/utilities/shadows.md
diff --git a/site/content/docs/5.0/utilities/sizing.md b/site/content/docs/5.1/utilities/sizing.md
index 962575ffe..962575ffe 100644
--- a/site/content/docs/5.0/utilities/sizing.md
+++ b/site/content/docs/5.1/utilities/sizing.md
diff --git a/site/content/docs/5.0/utilities/spacing.md b/site/content/docs/5.1/utilities/spacing.md
index a38c2659f..70fbe7694 100644
--- a/site/content/docs/5.0/utilities/spacing.md
+++ b/site/content/docs/5.1/utilities/spacing.md
@@ -27,8 +27,8 @@ Where *sides* is one of:
 
 - `t` - for classes that set `margin-top` or `padding-top`
 - `b` - for classes that set `margin-bottom` or `padding-bottom`
-- `s` - for classes that set `margin-left` or `padding-left` in LTR, `margin-right` or `padding-right` in RTL
-- `e` - for classes that set `margin-right` or `padding-right` in LTR, `margin-left` or `padding-left` in RTL
+- `s` - (start) for classes that set `margin-left` or `padding-left` in LTR, `margin-right` or `padding-right` in RTL
+- `e` - (end) for classes that set `margin-right` or `padding-right` in LTR, `margin-left` or `padding-left` in RTL
 - `x` - for classes that set both `*-left` and `*-right`
 - `y` - for classes that set both `*-top` and `*-bottom`
 - blank - for classes that set a `margin` or `padding` on all 4 sides of the element
diff --git a/site/content/docs/5.0/utilities/text.md b/site/content/docs/5.1/utilities/text.md
index 41c92958c..be8e0e1c0 100644
--- a/site/content/docs/5.0/utilities/text.md
+++ b/site/content/docs/5.1/utilities/text.md
@@ -101,10 +101,10 @@ Quickly change the `font-weight` or `font-style` of text with these utilities. `
 Change the line height with `.lh-*` utilities.
 
 {{< example >}}
-<p class="lh-1">Some placeholder content to show off the line height utilities. Happy birthday. You could've been the greatest. She ride me like a roller coaster. I messed around and got addicted. You just gotta ignite the light and let it shine! I'm intrigued, for a peek, heard it's fascinating. Catch her if you can. I should've told you what you meant to me 'Cause now I pay the price. Do you ever feel, feel so paper thin.</p>
-<p class="lh-sm">But you better choose carefully. Yo, shout out to all you kids, buying bottle service, with your rent money. She's sweet as pie but if you break her heart. Just own the night like the 4th of July! In another life I would be your girl. Playing ping pong all night long, everything's all neon and hazy. Shorty so bad, I’m sprung and I don’t care.</p>
-<p class="lh-base">I can feel a phoenix inside of me. Maybe a reason why all the doors are closed. We go higher and higher. Passport stamps, she's cosmopolitan. Someone said you had your tattoo removed. All my girls vintage Chanel baby. Someone said you had your tattoo removed.</p>
-<p class="lh-lg">But I will get there. This is real so take a chance and don't ever look back, don't ever look back. You could travel the world but nothing comes close to the golden coast. Of anything and everything. Venice beach and Palm Springs, summertime is everything. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. So cover your eyes, I have a surprise. So I don't have to say you were the one that got away.</p>
+<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
+<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
+<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
+<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
 {{< /example >}}
 
 ## Monospace
diff --git a/site/content/docs/5.0/utilities/vertical-align.md b/site/content/docs/5.1/utilities/vertical-align.md
index 9fe0eeb93..9fe0eeb93 100644
--- a/site/content/docs/5.0/utilities/vertical-align.md
+++ b/site/content/docs/5.1/utilities/vertical-align.md
diff --git a/site/content/docs/5.0/utilities/visibility.md b/site/content/docs/5.1/utilities/visibility.md
index 61eb30241..61eb30241 100644
--- a/site/content/docs/5.0/utilities/visibility.md
+++ b/site/content/docs/5.1/utilities/visibility.md
diff --git a/site/content/docs/_index.html b/site/content/docs/_index.html
index 0a758d2bf..198e6af8c 100644
--- a/site/content/docs/_index.html
+++ b/site/content/docs/_index.html
@@ -1,5 +1,5 @@
 ---
 layout: redirect
 sitemap_exclude: true
-redirect: "/docs/5.0/getting-started/introduction/"
+redirect: "/docs/5.1/getting-started/introduction/"
 ---