Docs: replace CSS by utilities in examples (#35699)

* Drop .opacity-50 and .opacity-75 redefinition in examples

* Drop unused .card-img-right from blog example CSS files

* Use line-height utilities when possible

* Use rounded-* utilities in examples

* Replace .nav-underline by .nav-scroller and use it in examples.html default

* Use .mb-1 for .blog-post-title

* Remove unused CSS rule and use .fw-* utilities for carousels examples

* Use utilities for cheatsheet examples

* Extract some CSS to utilities for .nav-masthead .nav-link in cover example

* Dashboard group of minor modifications

* Dropdowns example: refactoring

* Dropdowns example refactoring: fix linting by removing selector by id

* Features example refactoring

* Headers example refactoring

* List groups example refactoring

* Sidebars example refactoring

* Sign-in example refactoring

* Starter template refactoring

* Fix RTL examples

Co-authored-by: Mark Otto <markd.otto@gmail.com>

site/content/docs/5.1/examples/blog-rtl/index.html

@@ -9,7 +9,7 @@ include_js: false
 ---
 
 <div class="container">
-  <header class="blog-header py-3">
+  <header class="blog-header lh-1 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>
@@ -91,7 +91,7 @@ include_js: false
       </h3>
 
       <article class="blog-post">
-        <h2 class="blog-post-title">مثال على تدوينة</h2>
+        <h2 class="blog-post-title mb-1">مثال على تدوينة</h2>
         <p class="blog-post-meta">1 يناير 2021 بواسطة <a href="#"> Mark </a></p>
 
         <p>تعرض مشاركة المدونة هذه بضعة أنواع مختلفة من المحتوى الذي يتم دعمه وتصميمه باستخدام Bootstrap. النصوص الأساسية، الصور، والأكواد مدعومة بشكل كامل.</p>
@@ -126,7 +126,7 @@ include_js: false
       </article>
 
       <article class="blog-post">
-        <h2 class="blog-post-title">تدوينة أخرى</h2>
+        <h2 class="blog-post-title mb-1">تدوينة أخرى</h2>
         <p class="blog-post-meta">23 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p>
 
         <p>في الوقت الحالي، تدرس عدَّة شركات هذه الميكروبات بشكل أعمق، وتستزرعها من أجل الحصول على الغذاء. ففي عام 2019م، أعلن باحثون في شركة (Air Protein) الأمريكية نجاحهم في تحويل ثاني أكسيد الكربون الموجود في الهواء إلى لحوم صناعية مصنوعة من البروتين، التي لا تتطلَّب أي أرض زراعية، بل هي معتمدة بشكل أساسي على الهواء.</p>
@@ -138,7 +138,7 @@ include_js: false
       </article>
 
       <article class="blog-post">
-        <h2 class="blog-post-title">ميزة جديدة</h2>
+        <h2 class="blog-post-title mb-1">ميزة جديدة</h2>
         <p class="blog-post-meta">14 ديسمبر 2020 بواسطة <a href="#">Jacob</a></p>
 
         <p>كما أن الشركة الفنلندية (Solar Foods) طوَّرت تقنية لإنتاج البروتين من الهواء، حيث تبدأ العملية بتقسيم الماء إلى مكوناته الهيدروجين والأكسجين عن طريق الكهرباء. فالهيدروجين يوفِّر الطاقة للبكتريا لتحويل ثاني أكسيد الكربون والنيتروجين الموجودين في الهواء إلى مادة عضوية غنية بالبروتين بشكل أكفأ من نمو النباتات باستخدام البناء الضوئي. وهذا البروتين يشبه دقيق القمح وقد أطلق عليه اسم "سولين" (Solein).</p>
@@ -153,8 +153,8 @@ include_js: false
       </article>
 
       <nav class="blog-pagination" aria-label="Pagination">
-        <a class="btn btn-outline-primary" href="#">تدوينات أقدم</a>
+        <a class="btn btn-outline-primary rounded-pill" href="#">تدوينات أقدم</a>
-        <a class="btn btn-outline-secondary disabled">تدوينات أحدث</a>
+        <a class="btn btn-outline-secondary rounded-pill disabled">تدوينات أحدث</a>
       </nav>
 
     </div>

site/content/docs/5.1/examples/blog/blog.css

@@ -1,7 +1,6 @@
 /* stylelint-disable selector-list-comma-newline-after */
 
 .blog-header {
-  line-height: 1;
   border-bottom: 1px solid #e5e5e5;
 }
 
@@ -27,35 +26,6 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
-.nav-scroller {
-  position: relative;
-  z-index: 2;
-  height: 2.75rem;
-  overflow-y: hidden;
-}
-
-.nav-scroller .nav {
-  display: flex;
-  flex-wrap: nowrap;
-  padding-bottom: 1rem;
-  margin-top: -1px;
-  overflow-x: auto;
-  text-align: center;
-  white-space: nowrap;
-  -webkit-overflow-scrolling: touch;
-}
-
-.nav-scroller .nav-link {
-  padding-top: .75rem;
-  padding-bottom: .75rem;
-  font-size: .875rem;
-}
-
-.card-img-right {
-  height: 100%;
-  border-radius: 0 3px 3px 0;
-}
-
 .flex-auto {
   flex: 0 0 auto;
 }
@@ -69,9 +39,6 @@ h1, h2, h3, h4, h5, h6 {
 .blog-pagination {
   margin-bottom: 4rem;
 }
-.blog-pagination > .btn {
-  border-radius: 2rem;
-}
 
 /*
  * Blog posts
@@ -80,7 +47,6 @@ h1, h2, h3, h4, h5, h6 {
   margin-bottom: 4rem;
 }
 .blog-post-title {
-  margin-bottom: .25rem;
   font-size: 2.5rem;
 }
 .blog-post-meta {

site/content/docs/5.1/examples/blog/blog.rtl.css

@@ -1,7 +1,6 @@
 /* stylelint-disable selector-list-comma-newline-after */
 
 .blog-header {
-  line-height: 1;
   border-bottom: 1px solid #e5e5e5;
 }
 
@@ -27,35 +26,6 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
-.nav-scroller {
-  position: relative;
-  z-index: 2;
-  height: 2.75rem;
-  overflow-y: hidden;
-}
-
-.nav-scroller .nav {
-  display: flex;
-  flex-wrap: nowrap;
-  padding-bottom: 1rem;
-  margin-top: -1px;
-  overflow-x: auto;
-  text-align: center;
-  white-space: nowrap;
-  -webkit-overflow-scrolling: touch;
-}
-
-.nav-scroller .nav-link {
-  padding-top: .75rem;
-  padding-bottom: .75rem;
-  font-size: .875rem;
-}
-
-.card-img-right {
-  height: 100%;
-  border-radius: 3px 0 0 3px;
-}
-
 .flex-auto {
   flex: 0 0 auto;
 }
@@ -69,9 +39,6 @@ h1, h2, h3, h4, h5, h6 {
 .blog-pagination {
   margin-bottom: 4rem;
 }
-.blog-pagination > .btn {
-  border-radius: 2rem;
-}
 
 /*
  * Blog posts
@@ -80,7 +47,6 @@ h1, h2, h3, h4, h5, h6 {
   margin-bottom: 4rem;
 }
 .blog-post-title {
-  margin-bottom: .25rem;
   font-size: 2.5rem;
 }
 .blog-post-meta {

site/content/docs/5.1/examples/blog/index.html

@@ -8,7 +8,7 @@ include_js: false
 ---
 
 <div class="container">
-  <header class="blog-header py-3">
+  <header class="blog-header lh-1 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>
@@ -90,7 +90,7 @@ include_js: false
       </h3>
 
       <article class="blog-post">
-        <h2 class="blog-post-title">Sample blog post</h2>
+        <h2 class="blog-post-title mb-1">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>
@@ -144,7 +144,7 @@ include_js: false
       </article>
 
       <article class="blog-post">
-        <h2 class="blog-post-title">Another blog post</h2>
+        <h2 class="blog-post-title mb-1">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>
@@ -192,7 +192,7 @@ include_js: false
       </article>
 
       <article class="blog-post">
-        <h2 class="blog-post-title">New feature</h2>
+        <h2 class="blog-post-title mb-1">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>
@@ -205,8 +205,8 @@ include_js: false
       </article>
 
       <nav class="blog-pagination" aria-label="Pagination">
-        <a class="btn btn-outline-primary" href="#">Older</a>
+        <a class="btn btn-outline-primary rounded-pill" href="#">Older</a>
-        <a class="btn btn-outline-secondary disabled">Newer</a>
+        <a class="btn btn-outline-secondary rounded-pill disabled">Newer</a>
       </nav>
 
     </div>

site/content/docs/5.1/examples/carousel-rtl/index.html

@@ -95,19 +95,19 @@ extra_css:
     <div class="row">
       <div class="col-lg-4">
         {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
-        <h2>عنوان</h2>
+        <h2 class="fw-normal">عنوان</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>
+        <h2 class="fw-normal">عنوان آخر</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>
+        <h2 class="fw-normal">عنوان ثالث لتأكيد المعلومة</h2>
         <p>بفضل بحوث الذكاء الاصطناعي وتقنياته استطعنا الانتقال من مرحلة التعامل مع الفيزيائي إلى مرحلة التعامل مع المنطقي، وقد انعكس هذا الانتقال بصورة إيجابية على الكيفية التي تتعامل بها الشعوب مع لغاتها الحيَّة، وهذا يعني أنه يجب أن ينعكس بصورة إيجابية على كيفية تعاملنا مع لغتنا العربية.</p>
         <p><a class="btn btn-secondary" href="#">عرض التفاصيل</a></p>
       </div><!-- /.col-lg-4 -->
@@ -120,7 +120,7 @@ extra_css:
 
     <div class="row featurette">
       <div class="col-md-7">
-        <h2 class="featurette-heading">العنوان الأول المميز. <span class="text-muted"> سيذهل عقلك. </span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">العنوان الأول المميز. <span class="text-muted"> سيذهل عقلك. </span></h2>
         <p class="lead">وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.</p>
       </div>
       <div class="col-md-5">
@@ -132,7 +132,7 @@ extra_css:
 
     <div class="row featurette">
       <div class="col-md-7 order-md-2">
-        <h2 class="featurette-heading">أوه نعم، هذا جيد. <span class="text-muted"> شاهد بنفسك. </span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">أوه نعم، هذا جيد. <span class="text-muted"> شاهد بنفسك. </span></h2>
         <p class="lead">عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.</p>
       </div>
       <div class="col-md-5 order-md-1">
@@ -144,7 +144,7 @@ extra_css:
 
     <div class="row featurette">
       <div class="col-md-7">
-        <h2 class="featurette-heading">وأخيرًا، هذا. <span class="text-muted"> كش ملك. </span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">وأخيرًا، هذا. <span class="text-muted"> كش ملك. </span></h2>
         <p class="lead">إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ</p>
       </div>
       <div class="col-md-5">

site/content/docs/5.1/examples/carousel/carousel.css

@@ -26,13 +26,6 @@ body {
 .carousel-item {
   height: 32rem;
 }
-.carousel-item > img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  min-width: 100%;
-  height: 32rem;
-}
 
 
 /* MARKETING CONTENT
@@ -43,9 +36,6 @@ body {
   margin-bottom: 1.5rem;
   text-align: center;
 }
-.marketing h2 {
-  font-weight: 400;
-}
 /* rtl:begin:ignore */
 .marketing .col-lg-4 p {
   margin-right: .75rem;
@@ -63,8 +53,6 @@ body {
 
 /* Thin out the marketing headings */
 .featurette-heading {
-  font-weight: 300;
-  line-height: 1;
   /* rtl:remove */
   letter-spacing: -.05rem;
 }

site/content/docs/5.1/examples/carousel/carousel.rtl.css

@@ -26,13 +26,6 @@ body {
 .carousel-item {
   height: 32rem;
 }
-.carousel-item > img {
-  position: absolute;
-  top: 0;
-  right: 0;
-  min-width: 100%;
-  height: 32rem;
-}
 
 
 /* MARKETING CONTENT
@@ -43,9 +36,6 @@ body {
   margin-bottom: 1.5rem;
   text-align: center;
 }
-.marketing h2 {
-  font-weight: 400;
-}
 .marketing .col-lg-4 p {
   margin-right: .75rem;
   margin-left: .75rem;
@@ -59,12 +49,6 @@ body {
   margin: 5rem 0; /* Space out the Bootstrap <hr> more */
 }
 
-/* Thin out the marketing headings */
-.featurette-heading {
-  font-weight: 300;
-  line-height: 1;
-}
-
 
 /* RESPONSIVE CSS
 -------------------------------------------------- */

site/content/docs/5.1/examples/carousel/index.html

@@ -94,19 +94,19 @@ extra_css:
     <div class="row">
       <div class="col-lg-4">
         {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
-        <h2>Heading</h2>
+        <h2 class="fw-normal">Heading</h2>
         <p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
         <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
       </div><!-- /.col-lg-4 -->
       <div class="col-lg-4">
         {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
-        <h2>Heading</h2>
+        <h2 class="fw-normal">Heading</h2>
         <p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
         <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
       </div><!-- /.col-lg-4 -->
       <div class="col-lg-4">
         {{< placeholder width="140" height="140" background="#777" color="#777" class="rounded-circle" >}}
-        <h2>Heading</h2>
+        <h2 class="fw-normal">Heading</h2>
         <p>And lastly this, the third column of representative placeholder content.</p>
         <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
       </div><!-- /.col-lg-4 -->
@@ -119,7 +119,7 @@ extra_css:
 
     <div class="row featurette">
       <div class="col-md-7">
-        <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It’ll blow your mind.</span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">First featurette heading. <span class="text-muted">It’ll blow your mind.</span></h2>
         <p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
       </div>
       <div class="col-md-5">
@@ -131,7 +131,7 @@ extra_css:
 
     <div class="row featurette">
       <div class="col-md-7 order-md-2">
-        <h2 class="featurette-heading">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2>
         <p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
       </div>
       <div class="col-md-5 order-md-1">
@@ -143,7 +143,7 @@ extra_css:
 
     <div class="row featurette">
       <div class="col-md-7">
-        <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
+        <h2 class="featurette-heading fw-normal lh-1">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
         <p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
       </div>
       <div class="col-md-5">

site/content/docs/5.1/examples/cheatsheet-rtl/index.html

@@ -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 border-0" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" 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 border-0" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" href="#floating-labels">الحقول ذوي العناوين العائمة</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#validation">التحقق</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" 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>
+        <button class="btn d-inline-flex align-items-center collapsed border-0" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" 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 text-decoration-none" href="#tooltips">التلميحات</a></li>
         </ul>
       </li>
     </ul>
@@ -1441,7 +1441,7 @@ direction: rtl
               </li>
             </ul>
           </nav>
-          <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example">
+          <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example position-relative mt-2 overflow-auto">
             <h4 id="fat"><bdi lang="en" dir="ltr">@fat</bdi></h4>
             <p>محتوى لتوضيح كيف تعمل المخطوطة. ببساطة، المخطوطة عبارة عن منشور طويل يحتوي على عدة أقسام، ولديه شريط تنقل يسهل الوصول إلى هذه الأقسام الفرعية.</p>
             <h4 id="mdo"><bdi lang="en" dir="ltr">@mdo</bdi></h4>

site/content/docs/5.1/examples/cheatsheet/cheatsheet.css

@@ -27,7 +27,6 @@ body {
   margin-top: .125rem;
   margin-left: .3125rem;
   color: rgba(0, 0, 0, .65);
-  text-decoration: none;
 }
 
 .bd-aside a:hover,
@@ -45,7 +44,6 @@ body {
   padding: .25rem .5rem;
   font-weight: 600;
   color: rgba(0, 0, 0, .65);
-  border: 0;
 }
 
 .bd-aside .btn:hover,
@@ -77,10 +75,7 @@ body {
 
 /* Examples */
 .scrollspy-example {
-  position: relative;
   height: 200px;
-  margin-top: .5rem;
-  overflow: auto;
 }
 
 [id="modal"] .bd-example .btn,

site/content/docs/5.1/examples/cheatsheet/cheatsheet.rtl.css

@@ -27,7 +27,6 @@ body {
   margin-top: .125rem;
   margin-right: .3125rem;
   color: rgba(0, 0, 0, .65);
-  text-decoration: none;
 }
 
 .bd-aside a:hover,
@@ -45,7 +44,6 @@ body {
   padding: .25rem .5rem;
   font-weight: 600;
   color: rgba(0, 0, 0, .65);
-  border: 0;
 }
 
 .bd-aside .btn:hover,
@@ -74,10 +72,7 @@ body {
 
 /* Examples */
 .scrollspy-example {
-  position: relative;
   height: 200px;
-  margin-top: .5rem;
-  overflow: auto;
 }
 
 [id="modal"] .bd-example .btn,

site/content/docs/5.1/examples/cheatsheet/index.html

@@ -22,48 +22,48 @@ body_class: "bg-light"
   <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">Contents</button>
+        <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#contents-collapse" aria-controls="contents-collapse">Contents</button>
         <ul class="list-unstyled ps-3 collapse" id="contents-collapse">
-          <li><a class="d-inline-flex align-items-center rounded" href="#typography">Typography</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#typography">Typography</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#images">Images</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#images">Images</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#tables">Tables</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#tables">Tables</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#figures">Figures</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#figures">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">Forms</button>
+        <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#forms-collapse" aria-controls="forms-collapse">Forms</button>
         <ul class="list-unstyled ps-3 collapse" id="forms-collapse">
-          <li><a class="d-inline-flex align-items-center rounded" href="#overview">Overview</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#overview">Overview</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#disabled-forms">Disabled forms</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#disabled-forms">Disabled forms</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#sizing">Sizing</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#sizing">Sizing</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#input-group">Input group</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#input-group">Input group</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#floating-labels">Floating labels</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#floating-labels">Floating labels</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#validation">Validation</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#validation">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">Components</button>
+        <button class="btn d-inline-flex align-items-center collapsed border-0" data-bs-toggle="collapse" aria-expanded="false" data-bs-target="#components-collapse" aria-controls="components-collapse">Components</button>
         <ul class="list-unstyled ps-3 collapse" id="components-collapse">
-          <li><a class="d-inline-flex align-items-center rounded" href="#accordion">Accordion</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#accordion">Accordion</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#alerts">Alerts</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#alerts">Alerts</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#badge">Badge</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#badge">Badge</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#breadcrumb">Breadcrumb</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#breadcrumb">Breadcrumb</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#buttons">Buttons</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#buttons">Buttons</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#button-group">Button group</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#button-group">Button group</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#card">Card</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#card">Card</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#carousel">Carousel</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#carousel">Carousel</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#dropdowns">Dropdowns</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#dropdowns">Dropdowns</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#list-group">List group</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#list-group">List group</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#modal">Modal</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#modal">Modal</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#navs">Navs</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#navs">Navs</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#navbar">Navbar</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#navbar">Navbar</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#pagination">Pagination</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#pagination">Pagination</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#popovers">Popovers</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#popovers">Popovers</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#progress">Progress</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#progress">Progress</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#scrollspy">Scrollspy</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#scrollspy">Scrollspy</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#spinners">Spinners</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#spinners">Spinners</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#toasts">Toasts</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#toasts">Toasts</a></li>
-          <li><a class="d-inline-flex align-items-center rounded" href="#tooltips">Tooltips</a></li>
+          <li><a class="d-inline-flex align-items-center rounded text-decoration-none" href="#tooltips">Tooltips</a></li>
         </ul>
       </li>
     </ul>
@@ -1438,7 +1438,7 @@ body_class: "bg-light"
               </li>
             </ul>
           </nav>
-        <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
+        <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example position-relative mt-2 overflow-auto" 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>

site/content/docs/5.1/examples/cover/cover.css

@@ -31,10 +31,7 @@ body {
  */
 
 .nav-masthead .nav-link {
-  padding: .25rem 0;
-  font-weight: 700;
   color: rgba(255, 255, 255, .5);
-  background-color: transparent;
   border-bottom: .25rem solid transparent;
 }
 

site/content/docs/5.1/examples/cover/index.html

@@ -13,9 +13,9 @@ include_js: false
     <div>
       <h3 class="float-md-start mb-0">Cover</h3>
       <nav class="nav nav-masthead justify-content-center float-md-end">
-        <a class="nav-link active" aria-current="page" href="#">Home</a>
+        <a class="nav-link fw-bold py-1 px-0 active" aria-current="page" href="#">Home</a>
-        <a class="nav-link" href="#">Features</a>
+        <a class="nav-link fw-bold py-1 px-0" href="#">Features</a>
-        <a class="nav-link" href="#">Contact</a>
+        <a class="nav-link fw-bold py-1 px-0" href="#">Contact</a>
       </nav>
     </div>
   </header>

site/content/docs/5.1/examples/dashboard-rtl/index.html

@@ -13,11 +13,11 @@ 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>
+  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" 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="عرض/إخفاء لوحة التنقل">
     <span class="navbar-toggler-icon"></span>
   </button>
-  <input class="form-control form-control-dark w-100" type="text" placeholder="بحث" aria-label="بحث">
+  <input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="بحث" aria-label="بحث">
   <div class="navbar-nav">
     <div class="nav-item text-nowrap">
       <a class="nav-link px-3" href="#">تسجيل الخروج</a>
@@ -32,70 +32,70 @@ extra_js:
         <ul class="nav flex-column">
           <li class="nav-item">
             <a class="nav-link active" aria-current="page" href="#">
-              <span data-feather="home"></span>
+              <span data-feather="home" class="align-text-bottom"></span>
               لوحة القيادة
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">
-              <span data-feather="file"></span>
+              <span data-feather="file" class="align-text-bottom"></span>
               الطلبات
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">
-              <span data-feather="shopping-cart"></span>
+              <span data-feather="shopping-cart" class="align-text-bottom"></span>
               المنتجات
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">
-              <span data-feather="users"></span>
+              <span data-feather="users" class="align-text-bottom"></span>
               الزبائن
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">
-              <span data-feather="bar-chart-2"></span>
+              <span data-feather="bar-chart-2" class="align-text-bottom"></span>
               التقارير
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">
-              <span data-feather="layers"></span>
+              <span data-feather="layers" class="align-text-bottom"></span>
               التكاملات
             </a>
           </li>
         </ul>
 
-        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
+        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
           <span>التقارير المحفوظة</span>
           <a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
-            <span data-feather="plus-circle"></span>
+            <span data-feather="plus-circle" class="align-text-bottom"></span>
           </a>
         </h6>
         <ul class="nav flex-column mb-2">
           <li class="nav-item">
             <a class="nav-link" href="#">
-              <span data-feather="file-text"></span>
+              <span data-feather="file-text" class="align-text-bottom"></span>
               الشهر الحالي
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">
-              <span data-feather="file-text"></span>
+              <span data-feather="file-text" class="align-text-bottom"></span>
               الربع الأخير
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">
-              <span data-feather="file-text"></span>
+              <span data-feather="file-text" class="align-text-bottom"></span>
               التفاعل الإجتماعي
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">
-              <span data-feather="file-text"></span>
+              <span data-feather="file-text" class="align-text-bottom"></span>
               مبيعات نهاية العام
             </a>
           </li>
@@ -112,7 +112,7 @@ extra_js:
             <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>
+            <span data-feather="calendar" class="align-text-bottom"></span>
             هذا الأسبوع
           </button>
         </div>

site/content/docs/5.1/examples/dashboard/dashboard.css

@@ -5,7 +5,6 @@ body {
 .feather {
   width: 16px;
   height: 16px;
-  vertical-align: text-bottom;
 }
 
 /*
@@ -62,7 +61,6 @@ body {
 
 .sidebar-heading {
   font-size: .75rem;
-  text-transform: uppercase;
 }
 
 /*
@@ -72,7 +70,6 @@ body {
 .navbar-brand {
   padding-top: .75rem;
   padding-bottom: .75rem;
-  font-size: 1rem;
   background-color: rgba(0, 0, 0, .25);
   box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
 }
@@ -84,8 +81,6 @@ body {
 
 .navbar .form-control {
   padding: .75rem 1rem;
-  border-width: 0;
-  border-radius: 0;
 }
 
 .form-control-dark {

site/content/docs/5.1/examples/dashboard/dashboard.rtl.css

@@ -5,7 +5,6 @@ body {
 .feather {
   width: 16px;
   height: 16px;
-  vertical-align: text-bottom;
 }
 
 /*
@@ -58,7 +57,6 @@ body {
 
 .sidebar-heading {
   font-size: .75rem;
-  text-transform: uppercase;
 }
 
 /*
@@ -68,7 +66,6 @@ body {
 .navbar-brand {
   padding-top: .75rem;
   padding-bottom: .75rem;
-  font-size: 1rem;
   background-color: rgba(0, 0, 0, .25);
   box-shadow: inset 1px 0 0 rgba(0, 0, 0, .25);
 }
@@ -80,8 +77,6 @@ body {
 
 .navbar .form-control {
   padding: .75rem 1rem;
-  border-width: 0;
-  border-radius: 0;
 }
 
 .form-control-dark {

site/content/docs/5.1/examples/dashboard/index.html

@@ -12,11 +12,11 @@ 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="#">Company name</a>
+  <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">Company name</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="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
-  <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
+  <input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
   <div class="navbar-nav">
     <div class="nav-item text-nowrap">
       <a class="nav-link px-3" href="#">Sign out</a>
@@ -31,70 +31,70 @@ extra_js:
         <ul class="nav flex-column">
           <li class="nav-item">
             <a class="nav-link active" aria-current="page" href="#">
-              <span data-feather="home"></span>
+              <span data-feather="home" class="align-text-bottom"></span>
               Dashboard
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">
-              <span data-feather="file"></span>
+              <span data-feather="file" class="align-text-bottom"></span>
               Orders
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">
-              <span data-feather="shopping-cart"></span>
+              <span data-feather="shopping-cart" class="align-text-bottom"></span>
               Products
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">
-              <span data-feather="users"></span>
+              <span data-feather="users" class="align-text-bottom"></span>
               Customers
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">
-              <span data-feather="bar-chart-2"></span>
+              <span data-feather="bar-chart-2" class="align-text-bottom"></span>
               Reports
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">
-              <span data-feather="layers"></span>
+              <span data-feather="layers" class="align-text-bottom"></span>
               Integrations
             </a>
           </li>
         </ul>
 
-        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
+        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
           <span>Saved reports</span>
           <a class="link-secondary" href="#" aria-label="Add a new report">
-            <span data-feather="plus-circle"></span>
+            <span data-feather="plus-circle" class="align-text-bottom"></span>
           </a>
         </h6>
         <ul class="nav flex-column mb-2">
           <li class="nav-item">
             <a class="nav-link" href="#">
-              <span data-feather="file-text"></span>
+              <span data-feather="file-text" class="align-text-bottom"></span>
               Current month
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">
-              <span data-feather="file-text"></span>
+              <span data-feather="file-text" class="align-text-bottom"></span>
               Last quarter
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">
-              <span data-feather="file-text"></span>
+              <span data-feather="file-text" class="align-text-bottom"></span>
               Social engagement
             </a>
           </li>
           <li class="nav-item">
             <a class="nav-link" href="#">
-              <span data-feather="file-text"></span>
+              <span data-feather="file-text" class="align-text-bottom"></span>
               Year-end sale
             </a>
           </li>
@@ -111,7 +111,7 @@ extra_js:
             <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
           </div>
           <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
-            <span data-feather="calendar"></span>
+            <span data-feather="calendar" class="align-text-bottom"></span>
             This week
           </button>
         </div>

site/content/docs/5.1/examples/dropdowns/dropdowns.css

@@ -1,20 +1,7 @@
 .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);
 }
@@ -28,9 +15,7 @@
 }
 
 .btn-hover-light {
-  text-align: left;
   background-color: var(--bs-white);
-  border-radius: .25rem;
 }
 .btn-hover-light:hover,
 .btn-hover-light:focus {
@@ -74,3 +59,20 @@
   background-color: rgba(255, 255, 255, .05);
   border-color: rgba(255, 255, 255, .15);
 }
+
+
+.w-220px {
+  width: 220px;
+}
+
+.w-280px {
+  width: 280px;
+}
+
+.w-340px {
+  width: 340px;
+}
+
+.w-600px {
+  width: 600px;
+}

site/content/docs/5.1/examples/dropdowns/index.html

@@ -80,28 +80,27 @@ body_class: ""
   </symbol>
 </svg>
 
-<div class="d-flex gap-5 justify-content-center dropdown" id="dropdownMacos">
+<div class="d-flex gap-5 justify-content-center">
-  <ul class="dropdown-menu dropdown-menu-macos mx-0 shadow" style="width: 220px;">
+  <ul class="dropdown-menu position-static d-grid gap-1 p-2 rounded-4 mx-0 shadow w-220px">
-    <li><a class="dropdown-item active" href="#">Action</a></li>
+    <li><a class="dropdown-item rounded-2 active" href="#">Action</a></li>
-    <li><a class="dropdown-item" href="#">Another action</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Another action</a></li>
-    <li><a class="dropdown-item" href="#">Something else here</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Something else here</a></li>
     <li><hr class="dropdown-divider"></li>
-    <li><a class="dropdown-item" href="#">Separated link</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Separated link</a></li>
   </ul>
-  <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-macos mx-0 border-0 shadow" style="width: 220px;">
+  <ul class="dropdown-menu dropdown-menu-dark position-static d-grid gap-1 p-2 rounded-4 mx-0 border-0 shadow w-220px">
-    <li><a class="dropdown-item active" href="#">Action</a></li>
+    <li><a class="dropdown-item rounded-2 active" href="#">Action</a></li>
-    <li><a class="dropdown-item" href="#">Another action</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Another action</a></li>
-    <li><a class="dropdown-item" href="#">Something else here</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Something else here</a></li>
     <li><hr class="dropdown-divider"></li>
-    <li><a class="dropdown-item" href="#">Separated link</a></li>
+    <li><a class="dropdown-item rounded-2" href="#">Separated link</a></li>
   </ul>
 </div>
 
 <div class="b-example-divider"></div>
 
-
+<div class="d-flex gap-5 justify-content-center">
-<div class="d-flex gap-5 justify-content-center dropdown" id="dropdownFilter">
+  <div class="dropdown-menu d-block position-static pt-0 mx-0 rounded-3 shadow overflow-hidden w-280px">
-  <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>
@@ -125,7 +124,7 @@ body_class: ""
     </ul>
   </div>
 
-  <div class="dropdown-menu dropdown-menu-dark border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden" style="width: 280px;">
+  <div class="dropdown-menu dropdown-menu-dark d-block position-static border-0 pt-0 mx-0 rounded-3 shadow overflow-hidden w-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>
@@ -152,8 +151,8 @@ body_class: ""
 
 <div class="b-example-divider"></div>
 
-<div class="d-flex gap-5 justify-content-center dropdown" id="dropdownIcons">
+<div class="d-flex gap-5 justify-content-center">
-  <ul class="dropdown-menu mx-0 shadow" style="width: 220px;">
+  <ul class="dropdown-menu d-block position-static mx-0 shadow w-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>
@@ -192,7 +191,7 @@ body_class: ""
       </a>
     </li>
   </ul>
-  <ul class="dropdown-menu dropdown-menu-dark mx-0 border-0 shadow" style="width: 220px;">
+  <ul class="dropdown-menu dropdown-menu-dark d-block position-static mx-0 border-0 shadow w-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>
@@ -235,7 +234,7 @@ body_class: ""
 
 <div class="b-example-divider"></div>
 
-<div class="dropdown-menu p-2 shadow rounded-3" style="width: 340px" id="dropdownCalendar">
+<div class="dropdown-menu d-block position-static p-2 shadow rounded-3 w-340px">
   <div class="d-grid gap-1">
     <div class="cal">
       <div class="cal-month">
@@ -316,16 +315,16 @@ body_class: ""
 
 <div class="b-example-divider"></div>
 
-<div class="dropdown-menu d-flex align-items-stretch p-3 rounded-3 shadow-lg dropdown" style="width: 600px" id="dropdownMega">
+<div class="dropdown-menu position-static d-flex align-items-stretch p-3 rounded-3 shadow-lg w-600px">
   <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">
+    <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-center gap-3 py-2 px-3 lh-sm text-start">
       <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">
+    <a href="#" class="btn btn-hover-light rounded-2 d-flex align-items-center gap-3 py-2 px-3 lh-sm text-start">
       <svg class="bi" width="32" height="32"><use xlink:href="#question-circle"/></svg>
       <div>
         <strong class="d-block">Support</strong>

site/content/docs/5.1/examples/features/features.css

@@ -1,19 +1,8 @@
 .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;
@@ -25,18 +14,10 @@
 }
 
 .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); }

site/content/docs/5.1/examples/features/index.html

@@ -71,34 +71,34 @@ body_class: ""
     <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">
+        <div class="feature-icon d-inline-flex align-items-center justify-content-center bg-primary bg-gradient rounded-5 text-white fs-2 mb-3">
           <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">
+        <a href="#" class="icon-link d-inline-flex align-items-center">
           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">
+        <div class="feature-icon d-inline-flex align-items-center justify-content-center bg-primary bg-gradient rounded-5 text-white fs-2 mb-3">
           <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">
+        <a href="#" class="icon-link d-inline-flex align-items-center">
           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">
+        <div class="feature-icon d-inline-flex align-items-center justify-content-center bg-primary bg-gradient rounded-5 text-white fs-2 mb-3">
           <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">
+        <a href="#" class="icon-link d-inline-flex align-items-center">
           Call to action
           <svg class="bi" width="1em" height="1em"><use xlink:href="#chevron-right"/></svg>
         </a>
@@ -112,7 +112,7 @@ body_class: ""
     <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">
+        <div class="icon-square bg-light text-dark d-inline-flex align-items-center justify-content-center fs-4 rounded-5 flex-shrink-0 me-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#toggles2"/></svg>
         </div>
         <div>
@@ -124,7 +124,7 @@ body_class: ""
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <div class="icon-square bg-light text-dark flex-shrink-0 me-3">
+        <div class="icon-square bg-light text-dark d-inline-flex align-items-center justify-content-center fs-4 rounded-5 flex-shrink-0 me-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#cpu-fill"/></svg>
         </div>
         <div>
@@ -136,7 +136,7 @@ body_class: ""
         </div>
       </div>
       <div class="col d-flex align-items-start">
-        <div class="icon-square bg-light text-dark flex-shrink-0 me-3">
+        <div class="icon-square bg-light text-dark d-inline-flex align-items-center justify-content-center fs-4 rounded-5 flex-shrink-0 me-3">
           <svg class="bi" width="1em" height="1em"><use xlink:href="#tools"/></svg>
         </div>
         <div>
@@ -157,7 +157,7 @@ body_class: ""
 
     <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="card card-cover h-100 overflow-hidden text-white bg-dark rounded-6 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">
@@ -178,7 +178,7 @@ body_class: ""
       </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="card card-cover h-100 overflow-hidden text-white bg-dark rounded-6 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">
@@ -199,7 +199,7 @@ body_class: ""
       </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="card card-cover h-100 overflow-hidden text-white bg-dark rounded-6 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">

site/content/docs/5.1/examples/headers/headers.css

@@ -1,11 +1,7 @@
 .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);
 }

site/content/docs/5.1/examples/headers/index.html

@@ -105,7 +105,7 @@ body_class: ""
         </ul>
 
         <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
-          <input type="search" class="form-control form-control-dark" placeholder="Search..." aria-label="Search">
+          <input type="search" class="form-control form-control-dark text-white bg-dark" placeholder="Search..." aria-label="Search">
         </form>
 
         <div class="text-end">

site/content/docs/5.1/examples/list-groups/index.html

@@ -27,7 +27,7 @@ body_class: ""
   </symbol>
 </svg>
 
-<div class="list-group">
+<div class="list-group w-auto">
   <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">
@@ -63,7 +63,7 @@ body_class: ""
 <div class="b-example-divider"></div>
 
 <div class="d-flex gap-5 justify-content-center">
-  <div class="list-group mx-0">
+  <div class="list-group mx-0 w-auto">
     <label class="list-group-item d-flex gap-2">
       <input class="form-check-input flex-shrink-0" type="checkbox" value="" checked>
       <span>
@@ -87,7 +87,7 @@ body_class: ""
     </label>
   </div>
 
-  <div class="list-group mx-0">
+  <div class="list-group mx-0 w-auto">
     <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>
@@ -114,7 +114,7 @@ body_class: ""
 
 <div class="b-example-divider"></div>
 
-<div class="list-group">
+<div class="list-group w-auto">
   <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">
@@ -146,7 +146,7 @@ body_class: ""
     </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;">
+    <input class="form-check-input form-check-input-placeholder bg-light flex-shrink-0 pe-none" 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">
@@ -159,27 +159,27 @@ body_class: ""
 
 <div class="b-example-divider"></div>
 
-<div class="list-group list-group-checkable">
+<div class="list-group list-group-checkable d-grid gap-2 border-0 w-auto">
-  <input class="list-group-item-check" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios1" value="" checked>
+  <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios1" value="" checked>
-  <label class="list-group-item py-3" for="listGroupCheckableRadios1">
+  <label class="list-group-item rounded-4 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="">
+  <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios2" value="">
-  <label class="list-group-item py-3" for="listGroupCheckableRadios2">
+  <label class="list-group-item rounded-4 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="">
+  <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios3" value="">
-  <label class="list-group-item py-3" for="listGroupCheckableRadios3">
+  <label class="list-group-item rounded-4 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>
+  <input class="list-group-item-check pe-none" type="radio" name="listGroupCheckableRadios" id="listGroupCheckableRadios4" value="" disabled>
-  <label class="list-group-item py-3" for="listGroupCheckableRadios4">
+  <label class="list-group-item rounded-4 py-3" for="listGroupCheckableRadios4">
     Fourth disabled radio
     <span class="d-block small opacity-50">This option is disabled</span>
   </label>

site/content/docs/5.1/examples/list-groups/list-groups.css

@@ -1,5 +1,4 @@
 .list-group {
-  width: auto;
   max-width: 460px;
   margin: 4rem auto;
 }
@@ -9,26 +8,18 @@
 }
 
 .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);

site/content/docs/5.1/examples/modals/modals.css

@@ -1,7 +1,3 @@
-.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;

site/content/docs/5.1/examples/offcanvas-navbar/index.html

@@ -48,7 +48,7 @@ aliases: "/docs/5.1/examples/offcanvas/"
 </nav>
 
 <div class="nav-scroller bg-body shadow-sm">
-  <nav class="nav nav-underline" aria-label="Secondary navigation">
+  <nav class="nav" aria-label="Secondary navigation">
     <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
     <a class="nav-link" href="#">
       Friends

site/content/docs/5.1/examples/offcanvas-navbar/offcanvas.css

@@ -27,37 +27,22 @@ body {
   }
 }
 
-.nav-scroller {
-  position: relative;
-  z-index: 2;
-  height: 2.75rem;
-  overflow-y: hidden;
-}
-
 .nav-scroller .nav {
-  display: flex;
-  flex-wrap: nowrap;
-  padding-bottom: 1rem;
-  margin-top: -1px;
-  overflow-x: auto;
   color: rgba(255, 255, 255, .75);
-  text-align: center;
-  white-space: nowrap;
-  -webkit-overflow-scrolling: touch;
 }
 
-.nav-underline .nav-link {
+.nav-scroller .nav-link {
   padding-top: .75rem;
   padding-bottom: .75rem;
   font-size: .875rem;
   color: #6c757d;
 }
 
-.nav-underline .nav-link:hover {
+.nav-scroller .nav-link:hover {
   color: #007bff;
 }
 
-.nav-underline .active {
+.nav-scroller .active {
   font-weight: 500;
   color: #343a40;
 }

site/content/docs/5.1/examples/sidebars/index.html

@@ -67,7 +67,7 @@ body_class: ""
   </symbol>
 </svg>
 
-<main>
+<main class="d-flex flex-nowrap">
   <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;">
@@ -189,27 +189,27 @@ body_class: ""
     </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">
+        <a href="#" class="nav-link active py-3 border-bottom rounded-0" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right">
           <svg class="bi pe-none" 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">
+        <a href="#" class="nav-link py-3 border-bottom rounded-0" title="Dashboard" data-bs-toggle="tooltip" data-bs-placement="right">
           <svg class="bi pe-none" 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">
+        <a href="#" class="nav-link py-3 border-bottom rounded-0" title="Orders" data-bs-toggle="tooltip" data-bs-placement="right">
           <svg class="bi pe-none" 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">
+        <a href="#" class="nav-link py-3 border-bottom rounded-0" title="Products" data-bs-toggle="tooltip" data-bs-placement="right">
           <svg class="bi pe-none" 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">
+        <a href="#" class="nav-link py-3 border-bottom rounded-0" title="Customers" data-bs-toggle="tooltip" data-bs-placement="right">
           <svg class="bi pe-none" width="24" height="24" role="img" aria-label="Customers"><use xlink:href="#people-circle"/></svg>
         </a>
       </li>
@@ -237,54 +237,54 @@ body_class: ""
     </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">
+        <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 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 d-inline-flex text-decoration-none rounded">Overview</a></li>
-            <li><a href="#" class="link-dark rounded">Updates</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Updates</a></li>
-            <li><a href="#" class="link-dark rounded">Reports</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none 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">
+        <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 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 d-inline-flex text-decoration-none rounded">Overview</a></li>
-            <li><a href="#" class="link-dark rounded">Weekly</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Weekly</a></li>
-            <li><a href="#" class="link-dark rounded">Monthly</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Monthly</a></li>
-            <li><a href="#" class="link-dark rounded">Annually</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none 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">
+        <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 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 d-inline-flex text-decoration-none rounded">New</a></li>
-            <li><a href="#" class="link-dark rounded">Processed</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Processed</a></li>
-            <li><a href="#" class="link-dark rounded">Shipped</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Shipped</a></li>
-            <li><a href="#" class="link-dark rounded">Returned</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none 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">
+        <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 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 d-inline-flex text-decoration-none rounded">New...</a></li>
-            <li><a href="#" class="link-dark rounded">Profile</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Profile</a></li>
-            <li><a href="#" class="link-dark rounded">Settings</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Settings</a></li>
-            <li><a href="#" class="link-dark rounded">Sign out</a></li>
+            <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">Sign out</a></li>
           </ul>
         </div>
       </li>
@@ -299,21 +299,21 @@ body_class: ""
       <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">
+      <a href="#" class="list-group-item list-group-item-action active py-3 lh-sm" 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">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <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">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <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>
@@ -321,63 +321,63 @@ body_class: ""
         <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">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" 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">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <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">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <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">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" 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">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <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">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <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">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" 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">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <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">
+      <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
         <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>

site/content/docs/5.1/examples/sidebars/sidebars.css

@@ -8,8 +8,6 @@ html {
 }
 
 main {
-  display: flex;
-  flex-wrap: nowrap;
   height: 100vh;
   height: -webkit-fill-available;
   max-height: 100vh;
@@ -19,18 +17,11 @@ main {
 
 .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 {
@@ -54,11 +45,9 @@ main {
 }
 
 .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 {
@@ -70,4 +59,3 @@ main {
 }
 
 .fw-semibold { font-weight: 600; }
-.lh-tight { line-height: 1.25; }

site/content/docs/5.1/examples/sign-in/index.html

@@ -7,7 +7,7 @@ body_class: "text-center"
 include_js: false
 ---
 
-<main class="form-signin">
+<main class="form-signin w-100 m-auto">
   <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>

site/content/docs/5.1/examples/sign-in/signin.css

@@ -12,14 +12,8 @@ body {
 }
 
 .form-signin {
-  width: 100%;
   max-width: 330px;
   padding: 15px;
-  margin: auto;
-}
-
-.form-signin .checkbox {
-  font-weight: 400;
 }
 
 .form-signin .form-floating:focus-within {

site/content/docs/5.1/examples/starter-template/index.html

@@ -27,20 +27,20 @@ extra_css:
       <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">
+        <ul class="icon-list ps-0">
-          <li><a href="https://github.com/twbs/bootstrap-npm-starter" rel="noopener" target="_blank">Bootstrap npm starter</a></li>
+          <li class="d-flex align-items-start mb-1"><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>
+          <li class="text-muted d-flex align-items-start mb-1">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">
+        <ul class="icon-list ps-0">
-          <li><a href="{{< docsref "/getting-started/introduction" >}}">Bootstrap quick start guide</a></li>
+          <li class="d-flex align-items-start mb-1"><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 class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/webpack" >}}">Bootstrap Webpack guide</a></li>
-          <li><a href="{{< docsref "/getting-started/parcel" >}}">Bootstrap Parcel guide</a></li>
+          <li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/parcel" >}}">Bootstrap Parcel guide</a></li>
-          <li><a href="{{< docsref "/getting-started/contribute" >}}">Contributing to Bootstrap</a></li>
+          <li class="d-flex align-items-start mb-1"><a href="{{< docsref "/getting-started/contribute" >}}">Contributing to Bootstrap</a></li>
         </ul>
       </div>
     </div>

site/content/docs/5.1/examples/starter-template/starter-template.css

@@ -1,12 +1,3 @@
-.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;

site/layouts/_default/examples.html

@@ -50,6 +50,28 @@
         vertical-align: -.125em;
         fill: currentColor;
       }
+
+      .rounded-4 { border-radius: .5rem; }
+      .rounded-5 { border-radius: .75rem; }
+      .rounded-6 { border-radius: 1rem; }
+
+      .nav-scroller {
+        position: relative;
+        z-index: 2;
+        height: 2.75rem;
+        overflow-y: hidden;
+      }
+
+      .nav-scroller .nav {
+        display: flex;
+        flex-wrap: nowrap;
+        padding-bottom: 1rem;
+        margin-top: -1px;
+        overflow-x: auto;
+        text-align: center;
+        white-space: nowrap;
+        -webkit-overflow-scrolling: touch;
+      }
     </style>
 
     {{ range .Page.Params.extra_css }}