Add newer version 5 alert on top of v4 and v5 pages (#38410)

* Change newer version label of v3.3

* Change newer version label of v3.4

* Change newer version label of v4.0/v4.1/v4.2

* Add newer version alert for v4.3

* Add newer version alert for v4.4

* Add newer version alert for v4.5/v4.6 (using `.skippy` bg color)

* Add newer version alert for v5.0 (using `.skippy` bg color)

* Add newer version alert for v5.1 (using `.skippy` bg color)

* Add newer version alert for v5.2 (using `.skippy` bg color)

* Change some copy

- v4 gets 'Bootstrap 5 is here'
- v5 gets 'Theres a newer version of Bootstrap 5'

* Unique message: 'There\'s a newer version of Bootstrap!'

* Change HTML structure for focus visible

---------

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

docs/5.2/getting-started/rfs/index.html

@@ -141,6 +141,10 @@
 </svg>
 
 
+<div class="d-block px-3 py-2 text-center text-bold skippy">
+  <a href="https://getbootstrap.com/" class="text-white text-decoration-none">There's a newer version of Bootstrap!</a>
+</div>
+
     <header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
   <nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
     <div class="bd-navbar-toggle">
@@ -158,9 +162,9 @@
     </a>
 
     <div class="d-flex">
-      
+
         <div class="bd-search" id="docsearch" data-bd-docs-version="5.2"></div>
-      
+
 
       <button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
         <svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
@@ -218,7 +222,7 @@
             <div class="vr d-none d-lg-flex h-100 mx-lg-2 text-white"></div>
             <hr class="d-lg-none text-white-50">
           </li>
-          
+
 
 <li class="nav-item dropdown">
   <button type="button" class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
@@ -254,7 +258,7 @@
 </header>
 
 
-    
+
   <div class="container-xxl bd-gutter mt-3 my-md-4 bd-layout">
     <aside class="bd-sidebar">
       <div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
@@ -480,7 +484,7 @@
 
       </div>
 
-      
+
         <div class="bd-toc mt-3 mb-5 my-lg-0 ps-xl-3 mb-lg-5 text-muted">
           <button class="btn btn-link link-dark p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
             On this page
@@ -503,10 +507,10 @@
 </nav>
           </div>
         </div>
-      
+
 
       <div class="bd-content ps-lg-2">
-        
+
 
         <h2 id="what-is-rfs">What is RFS? <a class="anchor-link" href="#what-is-rfs" aria-label="Link to this section: What is RFS?"></a></h2>
 <p>Bootstrap&rsquo;s side project <a href="https://github.com/twbs/rfs/tree/v9.0.6">RFS</a> is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling most CSS properties with unit values like <code>margin</code>, <code>padding</code>, <code>border-radius</code>, or even <code>box-shadow</code>.</p>
@@ -631,12 +635,12 @@
 <script src="/docs/5.2/assets/js/docs.min.js"></script>
 
 <script>
-  
+
   document.querySelectorAll('.btn-edit').forEach(btn => {
     btn.addEventListener('click', event => {
       const htmlSnippet = event.target.closest('.bd-code-snippet').querySelector('.bd-example').innerHTML
 
-      
+
       const classes = Array.from(event.target.closest('.bd-code-snippet').querySelector('.bd-example').classList).join(' ')
 
       const jsSnippet = event.target.closest('.bd-code-snippet').querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
@@ -680,7 +684,7 @@ ${htmlSnippet.replace(/^/gm, '    ')}
 </script>
 
 
-    
+
   <div class="position-fixed"><input type="text" tabindex="-1"></div>
 
   </body>