Fix some bugs during v4->v5 migration.

Author: uhafner

README.adoc

@@ -26,14 +26,16 @@ You can see the available breakpoints by including the following HTML snippet in
 
 [source,xml]
 ----
-<div class="col-12">
-    <span class="badge badge-dark d-xxxl-inline d-none">xxxl</span>
-    <span class="badge badge-dark d-xxl-inline d-xxxl-none d-none">xxl</span>
-    <span class="badge badge-dark d-xl-inline d-xxl-none d-none">xl</span>
-    <span class="badge badge-dark d-lg-inline d-xl-none d-none">lg</span>
-    <span class="badge badge-dark d-md-inline d-lg-none d-none">md</span>
-    <span class="badge badge-dark d-sm-inline d-md-none d-none">sm</span>
-    <span class="badge badge-dark d-inline d-sm-none">xs</span>
+<div class="row py-3">
+    <div class="col-12">
+        <span class="badge bg-secondary d-xxxl-inline d-none">xxxl</span>
+        <span class="badge bg-secondary d-xxl-inline d-xxxl-none d-none">xxl</span>
+        <span class="badge bg-secondary d-xl-inline d-xxl-none d-none">xl</span>
+        <span class="badge bg-secondary d-lg-inline d-xl-none d-none">lg</span>
+        <span class="badge bg-secondary d-md-inline d-lg-none d-none">md</span>
+        <span class="badge bg-secondary d-sm-inline d-md-none d-none">sm</span>
+        <span class="badge bg-secondary d-inline d-sm-none">xs</span>
+    </div>
 </div>
 ----
 

etc/bootstrap-custom-build.scss

@@ -20,6 +20,7 @@ $container-max-widths: (
 
 @import "../node_modules/bootstrap/scss/variables";
 @import "../node_modules/bootstrap/scss/mixins";
+@import "../node_modules/bootstrap/scss/utilities";
 
 /* override the !default vars with the values we set above */
 
@@ -35,8 +36,8 @@ th {
   text-align: inherit;
 }
 
-@import "../node_modules/bootstrap/scss/accordion";
 @import "../node_modules/bootstrap/scss/images";
+@import "../node_modules/bootstrap/scss/containers";
 @import "../node_modules/bootstrap/scss/grid";
 @import "../node_modules/bootstrap/scss/tables";
 @import "../node_modules/bootstrap/scss/forms";
@@ -47,6 +48,7 @@ th {
 @import "../node_modules/bootstrap/scss/nav";
 @import "../node_modules/bootstrap/scss/navbar";
 @import "../node_modules/bootstrap/scss/card";
+@import "../node_modules/bootstrap/scss/accordion";
 @import "../node_modules/bootstrap/scss/breadcrumb";
 @import "../node_modules/bootstrap/scss/pagination";
 @import "../node_modules/bootstrap/scss/badge";
@@ -60,5 +62,7 @@ th {
 @import "../node_modules/bootstrap/scss/popover";
 @import "../node_modules/bootstrap/scss/carousel";
 @import "../node_modules/bootstrap/scss/spinners";
-@import "../node_modules/bootstrap/scss/utilities";
+@import "../node_modules/bootstrap/scss/helpers";
+
+@import "../node_modules/bootstrap/scss/utilities/api";
 // scss-docs-end import-stack

src/main/resources/io/jenkins/plugins/bootstrap5.jelly

@@ -7,6 +7,7 @@ Use it like <st:adjunct includes="io.jenkins.plugins.bootstrap5"/>
   <j:new var="h" className="hudson.Functions" />
   ${h.initPageVariables(context)}
 
+  <st:adjunct includes="io.jenkins.plugins.jquery3"/> <!-- FIXME: no-prototype.js dependes on JQuery -->
   <st:adjunct includes="io.jenkins.plugins.popper2"/>
 
   <link type="text/css" rel="stylesheet" href="${resURL}/plugin/bootstrap5-api/css/bootstrap-custom-build.css"/>
@@ -15,5 +16,9 @@ Use it like <st:adjunct includes="io.jenkins.plugins.bootstrap5"/>
   <script type="text/javascript" src="${resURL}/plugin/bootstrap5-api/js/bootstrap.min.js"/>
   <script type="text/javascript" src="${resURL}/plugin/bootstrap5-api/js/no-prototype.js"/>
 
+  <script>
+    const bootstrap5 = bootstrap;
+  </script>
+
 </j:jelly>
 

src/main/webapp/css/jenkins-style.css

@@ -38,14 +38,6 @@ pre {
     width: 20px;
 }
 
-.carousel-control-prev-icon {
-    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23b4b4b4' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
-}
-
-.carousel-control-next-icon {
-    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23b4b4b4' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
-}
-
 /* ------------------------------------------------------------------------------------------------------------------- */
 /* Font awesome icons float right                                                                                      */
 /* ------------------------------------------------------------------------------------------------------------------- */