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/components/spinners/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
@@ -523,10 +527,10 @@
 </nav>
           </div>
         </div>
-      
+
 
       <div class="bd-content ps-lg-2">
-        
+
 
         <h2 id="about">About <a class="anchor-link" href="#about" aria-label="Link to this section: About"></a></h2>
 <p>Bootstrap &ldquo;spinners&rdquo; can be used to show the loading state in your projects. They&rsquo;re built only with HTML and CSS, meaning you don&rsquo;t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.</p>
@@ -1053,12 +1057,12 @@ The animation effect of this component is dependent on the <code>prefers-reduced
 <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')
@@ -1102,7 +1106,7 @@ ${htmlSnippet.replace(/^/gm, '    ')}
 </script>
 
 
-    
+
   <div class="position-fixed"><input type="text" tabindex="-1"></div>
 
   </body>