Update Bootstrap to version 5.3.3

- replace the jumbotron, which is not in 5.x anymore, with custom version Signed-off-by: Stefan Marr <[email protected]>
smarr · Oct 1, 2024 · 5655ab6 · 5655ab6
1 parent bbe0e45
commit 5655ab6
Show file tree

Hide file tree

Showing 14 changed files with 59 additions and 67 deletions.
diff --git a/src/backend/compare/html/gen-index.html b/src/backend/compare/html/gen-index.html
@@ -12,14 +12,14 @@
 <body class="compare timeline-multi">
 
 <header>
-<div class="jumbotron compare">
+<div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5 compare">
   <h2>ReBenchDB for {%= it.project %}</h2>
-  {% if (it.revisionFound) { %}
+{% if (it.revisionFound) { %}
   <h3>Comparing <a href="{%= it.base.repourl%}/compare/{%= it.baselineHash%}...{%= it.changeHash%}">{%= it.baselineHash6%} with {%= it.changeHash6%}</a></h3>
-  {% } else { %}
+{% } else { %}
   <h3>Comparing {%= it.baselineHash6%} with {%= it.changeHash6%}</h3>
-  {% } %}
-</div>
+{% } %}
+</div></div>
 </header>
 
 {% if (it.revisionFound) { %}

diff --git a/src/backend/compare/html/index.html b/src/backend/compare/html/index.html
@@ -18,14 +18,14 @@
 </svg>
 
 <header>
-<div class="jumbotron compare">
+<div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5 compare">
   <h2>ReBenchDB for {%= it.project %}</h2>
-  {% if (it.revisionFound) { %}
+{% if (it.revisionFound) { %}
   <h3>Comparing <a href="{%= it.base.repourl%}/compare/{%= it.baselineHash%}...{%= it.changeHash%}">{%= it.baselineHash6%} with {%= it.changeHash6%}</a></h3>
-  {% } else { %}
+{% } else { %}
   <h3>Comparing {%= it.baselineHash6%} with {%= it.changeHash6%}</h3>
-  {% } %}
-</div>
+{% } %}
+</div></div>
 
 {%- include('refresh-menu.html', it) %}
 </header>

diff --git a/src/backend/main/index.html b/src/backend/main/index.html
@@ -7,7 +7,7 @@
 </head>
 <body>
 
-  <div class="jumbotron">
+  <div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5">
     <h1 class="display-4">ReBench</h1>
     <h2 class="display-5">Execute and document benchmarks reproducibly.</h2>
 
@@ -21,7 +21,7 @@ <h2 class="display-5">Execute and document benchmarks reproducibly.</h2>
     <a href="https://github.com/smarr/ReBench"><img src="https://img.shields.io/badge/GitHub-ReBench-success"></a>
     <a href="https://github.com/smarr/ReBenchDB"><img src="https://img.shields.io/badge/GitHub-ReBenchDB-success"></a>
     <a href="https://rebench.readthedocs.io/"><img src="https://img.shields.io/badge/Documentation-Go-informational"></a>
-  </div>
+  </div></div>
 
   <div id="projects">
     {% for (const p of it.projects) { %}

diff --git a/src/backend/project/get-exp-data.html b/src/backend/project/get-exp-data.html
@@ -9,10 +9,10 @@
 </head>
 <body class="compare">
 
-<div class="jumbotron">
+<div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5">
   <h2>ReBenchDB for {%= it.project %}</h2>
   <h3>Preparing Data for download of {%= it.expName %}</h3>
-</div>
+</div></div>
 
 {% if (it.preparingData) { %}
 <div class="alert alert-secondary" role="alert">

diff --git a/src/backend/project/project-data.html b/src/backend/project/project-data.html
@@ -9,12 +9,12 @@
 </head>
 <body>
 
-  <div class="jumbotron">
+  <div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5">
     <h1 class="display-4">{%= it.project.name %}</h1>
     {% if (it.project.description) { %}
     <h2 class="display-5">{%= it.project.description %}</h2>
     {% } %}
-  </div>
+  </div></div>
 
   <div>
     <table class="table table-sm">

diff --git a/src/backend/project/project.html b/src/backend/project/project.html
@@ -10,12 +10,12 @@
 </head>
 <body class="project-body">
 
-  <div class="jumbotron">
+  <div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5">
     <h1 class="display-4">{%= it.name %}</h1>
     {% if (it.description) { %}
     <h2 class="display-5">{%= it.description%}</h2>
     {% } %}
-  </div>
+  </div></div>
 
   <div id="project">
     <div class="branch-sidebar left">

diff --git a/src/backend/timeline/timeline.html b/src/backend/timeline/timeline.html
@@ -11,15 +11,15 @@
 <body class="timeline-multi timeline">
 
 <header>
-  <div class="jumbotron">
+  <div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5">
     <h1 class="display-4">ReBench: Timeline {%= it.project.name %}</h1>
     {% if (it.project.description) { %}
     <h2 class="display-5">{%= it.project.description %}</h2>
     {% }
        if (it.project.basebranch) { %}
     <p>Timeline is based on data for the <code>{%= it.project.basebranch %}</code> branch.</p>
     {% } %}
-  </div>
+  </div></div>
   <div class="refresh">
     <div class="flex-nowrap navbar-light">
       <button type="button" class="btn btn-outline-secondary btn-sm"
@@ -81,15 +81,14 @@ <h4><a href="#b-{%= bb.benchName %}-{%= bb.runId %}">{%= bb.benchName %}<span cl
   </div></div> <!-- closing class="row flex-nowrap" and class="container-fluid" -->
   {% } else { %}
   <main role="main">
-  <div class="jumbotron">
+  <div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5">
     <h1 class="display-4">No Data Available</h1>
     {% if (it.project.basebranch) { %}
       <p class="lead">There are no benchmarks available for this project.</p>
     {% } else { %}
       <p class="lead">The branch to show on the timeline has not been configured. Please ask the ReBenchDB administrator to set the branch for the timeline view.</p>
     {% } %}
-  </div>
-  </div>
+  </div></div>
   </main>
   {% } %}
 </body>

diff --git a/src/views/header.html b/src/views/header.html
@@ -2,10 +2,9 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
 <!-- Bootstrap from CDN -->
-<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" referrerpolicy="no-referrer">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
-<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" integrity="sha512-2rNj2KJ+D8s1ceNasTIex6z4HWyOnEYLVC3FigGOmyQCZc2eBXKgOxQmo3oKLHyfcj53uz4QMsRCWNbLd32Q1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 
 <link rel="stylesheet" href="/static/style.css?v={%= it.rebenchVersion %}">
diff --git a/tests/data/expected-results/main/index.html b/tests/data/expected-results/main/index.html
@@ -5,16 +5,15 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <!-- Bootstrap from CDN -->
-<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" referrerpolicy="no-referrer">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
-<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" integrity="sha512-2rNj2KJ+D8s1ceNasTIex6z4HWyOnEYLVC3FigGOmyQCZc2eBXKgOxQmo3oKLHyfcj53uz4QMsRCWNbLd32Q1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="/static/style.css?v=testVersion">
 <script src="/static/index.js" type="module"></script>
 </head>
 <body>
-<div class="jumbotron">
+<div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5">
 <h1 class="display-4">ReBench</h1>
 <h2 class="display-5">Execute and document benchmarks reproducibly.</h2>
 <p class="lead">ReBench is a tool to run and document benchmark experiments. Currently, it is mostly used for benchmarking language implementations, but it can be used to monitor the performance of all kinds of other applications and programs, too.</p>
@@ -26,7 +25,7 @@ <h2 class="display-5">Execute and document benchmarks reproducibly.</h2>
 <a href="https://github.com/smarr/ReBench"><img src="https://img.shields.io/badge/GitHub-ReBench-success"></a>
 <a href="https://github.com/smarr/ReBenchDB"><img src="https://img.shields.io/badge/GitHub-ReBenchDB-success"></a>
 <a href="https://rebench.readthedocs.io/"><img src="https://img.shields.io/badge/Documentation-Go-informational"></a>
-</div>
+</div></div>
 <div id="projects">
 
 <div class="card project-data" data-id="1" data-showchanges="true" data-allresults="false">

diff --git a/tests/data/expected-results/project/get-exp-data.html b/tests/data/expected-results/project/get-exp-data.html
@@ -5,19 +5,18 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <!-- Bootstrap from CDN -->
-<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" referrerpolicy="no-referrer">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
-<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" integrity="sha512-2rNj2KJ+D8s1ceNasTIex6z4HWyOnEYLVC3FigGOmyQCZc2eBXKgOxQmo3oKLHyfcj53uz4QMsRCWNbLd32Q1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="/static/style.css?v=testVersion">
 <meta http-equiv="refresh" content="10" />
 </head>
 <body class="compare">
-<div class="jumbotron">
+<div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5">
 <h2>ReBenchDB for Test Project</h2>
 <h3>Preparing Data for download of Test Experiment</h3>
-</div>
+</div></div>
 
 <div class="alert alert-secondary" role="alert">
 <h4 class="alert-heading">Data is currently being prepared for download</h4>

diff --git a/tests/data/expected-results/project/project-data.html b/tests/data/expected-results/project/project-data.html
@@ -7,21 +7,20 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <!-- Bootstrap from CDN -->
-<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" referrerpolicy="no-referrer">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
-<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" integrity="sha512-2rNj2KJ+D8s1ceNasTIex6z4HWyOnEYLVC3FigGOmyQCZc2eBXKgOxQmo3oKLHyfcj53uz4QMsRCWNbLd32Q1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="/static/style.css?v=testVersion">
 <script src="/static/project-data.js" type="module"></script>
 </head>
 <body>
-<div class="jumbotron">
+<div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5">
 <h1 class="display-4">Test Project</h1>
 
 <h2 class="display-5">desc</h2>
 
-</div>
+</div></div>
 <div>
 <table class="table table-sm">
 <thead>

diff --git a/tests/data/expected-results/stats-data-prep/compare-view-jssom.html b/tests/data/expected-results/stats-data-prep/compare-view-jssom.html
@@ -10,11 +10,10 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
 <!-- Bootstrap from CDN -->
-<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" referrerpolicy="no-referrer">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
-<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" integrity="sha512-2rNj2KJ+D8s1ceNasTIex6z4HWyOnEYLVC3FigGOmyQCZc2eBXKgOxQmo3oKLHyfcj53uz4QMsRCWNbLd32Q1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 
 <link rel="stylesheet" href="/static/style.css?v=testVersion">
 
@@ -29,12 +28,12 @@
 </svg>
 
 <header>
-<div class="jumbotron compare">
+<div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5 compare">
   <h2>ReBenchDB for jssom</h2>
-  
+
   <h3>Comparing <a href="repo-url/compare/4dff7e...bc1105">4dff7e with bc1105</a></h3>
-  
-</div>
+
+</div></div>
 
 <div class="refresh">
   <div class="flex-nowrap navbar-light">

diff --git a/tests/data/expected-results/stats-data-prep/compare-view-tsom.html b/tests/data/expected-results/stats-data-prep/compare-view-tsom.html
@@ -10,11 +10,10 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
 <!-- Bootstrap from CDN -->
-<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" referrerpolicy="no-referrer">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
-<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" integrity="sha512-2rNj2KJ+D8s1ceNasTIex6z4HWyOnEYLVC3FigGOmyQCZc2eBXKgOxQmo3oKLHyfcj53uz4QMsRCWNbLd32Q1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 
 <link rel="stylesheet" href="/static/style.css?v=testVersion">
 
@@ -29,12 +28,12 @@
 </svg>
 
 <header>
-<div class="jumbotron compare">
+<div class="p-4 mb-4 bg-light rounded-2"><div class="container-fluid py-5 compare">
   <h2>ReBenchDB for tsom</h2>
-  
+
   <h3>Comparing <a href="repo-url/compare/5820ec...5fa4bd">5820ec with 5fa4bd</a></h3>
-  
-</div>
+
+</div></div>
 
 <div class="refresh">
   <div class="flex-nowrap navbar-light">