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/offcanvas/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
@@ -529,10 +533,10 @@
 </nav>
           </div>
         </div>
-      
+
 
       <div class="bd-content ps-lg-2">
-        
+
 
         <h2 id="how-it-works">How it works <a class="anchor-link" href="#how-it-works" aria-label="Link to this section: How it works"></a></h2>
 <p>Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and <code>data</code> attributes are used to invoke our JavaScript.</p>
@@ -1216,12 +1220,12 @@ While both ways to dismiss an offcanvas are supported, keep in mind that dismiss
 <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')
@@ -1265,7 +1269,7 @@ ${htmlSnippet.replace(/^/gm, '    ')}
 </script>
 
 
-    
+
   <div class="position-fixed"><input type="text" tabindex="-1"></div>
 
   </body>