From 965a64ffaac4cd6a7a0724f0c6cc37464d24702d Mon Sep 17 00:00:00 2001
From: Prateek Kumar <prateek@prateekkumar.in>
Date: Sun, 9 Sep 2018 03:20:36 +0530
Subject: [PATCH] Migrate from Bootstrap v3 to v4 (#571)

---
 data/assets.toml                              |  12 +-
 demo.sh                                       |   0
 exampleSite/content/home/hero.md              |  13 +-
 layouts/_default/list.html                    |   2 +-
 layouts/partials/css/academic.css             | 289 ++++++++----------
 layouts/partials/footer_container.html        |  16 +-
 layouts/partials/navbar.html                  |  39 ++-
 layouts/partials/pagination.html              |   6 +-
 layouts/partials/post_li_detailed.html        |   2 +-
 layouts/partials/publication_links.html       |  24 +-
 layouts/partials/tags.html                    |   2 +-
 layouts/partials/talk_links.html              |  12 +-
 layouts/partials/widgets/about.html           |   8 +-
 layouts/partials/widgets/contact.html         |   6 +-
 layouts/partials/widgets/custom.html          |   6 +-
 layouts/partials/widgets/featurette.html      |   2 +-
 layouts/partials/widgets/hero.html            |   2 +-
 layouts/partials/widgets/hero_carousel.html   |  14 +-
 layouts/partials/widgets/posts.html           |   4 +-
 layouts/partials/widgets/projects.html        |  12 +-
 layouts/partials/widgets/publications.html    |   4 +-
 .../widgets/publications_selected.html        |   4 +-
 layouts/partials/widgets/tag_cloud.html       |   4 +-
 layouts/partials/widgets/talks.html           |   4 +-
 layouts/partials/widgets/talks_selected.html  |   4 +-
 layouts/project/single.html                   |   4 +-
 layouts/publication/single.html               |  50 +--
 layouts/section/post.html                     |   2 +-
 layouts/section/publication.html              |  58 ++--
 layouts/section/talk.html                     |   8 +-
 layouts/talk/single.html                      |  50 +--
 static/js/hugo-academic.js                    |  12 +-
 32 files changed, 327 insertions(+), 348 deletions(-)
 mode change 100644 => 100755 demo.sh

diff --git a/data/assets.toml b/data/assets.toml
index 13336444..25442a3d 100644
--- a/data/assets.toml
+++ b/data/assets.toml
@@ -8,12 +8,12 @@
 # JavaScript
 
 [js.jQuery]
-  version = "3.2.1"
-  sri = "sha512-3P8rXCuGJdNZOnUx/03c1jOTnMn3rP63nBip5gOP2qmUh5YAdVAvFZ1E+QLZZbC1rtMrQb+mah3AfYW11RUrWA=="
+  version = "3.3.1"
+  sri = "sha512-+NqPlbbtM1QqiK8ZAo4Yrj2c4lNQoGv8P79DPtKzj++l5jnN39rHA/xsqn8zE9l0uSoxaCdrOgFs6yjyfbBxSg=="
   url = "https://cdnjs.cloudflare.com/ajax/libs/jquery/%s/jquery.min.js"
 [js.bootstrap]
-  version = "3.3.7"
-  sri = "sha512-iztkobsvnjKfAtTNdHkGVjAYTrrtlC7mGp/54c40wowO7LhURYl3gVzzcEqGl/qKXQltJ2HwMrdLcNUdo+N/RQ=="
+  version = "4.1.3"
+  sri = "sha256-VsEqElsCHSGmnmHXGQzvoWjWwoznFSZc6hs7ARLRacQ="
   url = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/%s/js/bootstrap.min.js"
 [js.highlight]
   version = "9.12.0"
@@ -63,8 +63,8 @@
 # CSS
 
 [css.bootstrap]
-  version = "3.3.7"
-  sri = "sha512-6MXa8B6uaO18Hid6blRMetEIoPqHf7Ux1tnyIQdpt9qI5OACx7C+O3IVTr98vwGnlcg0LOLa02i9Y1HpVhlfiw=="
+  version = "4.1.3"
+  sri = "sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE="
   url = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/%s/css/bootstrap.min.css"
 [css.fontAwesome]
   version = "5.3.1"
diff --git a/demo.sh b/demo.sh
old mode 100644
new mode 100755
diff --git a/exampleSite/content/home/hero.md b/exampleSite/content/home/hero.md
index 97aa62f4..923fe3d0 100644
--- a/exampleSite/content/home/hero.md
+++ b/exampleSite/content/home/hero.md
@@ -25,12 +25,13 @@ weight = 3
 +++
 
 The highly flexible website framework for Hugo with an extensible plugin mechanism. Create a beautifully simple site in under 10 minutes :rocket:
-<br>
-<small><a id="academic-release" href="https://sourcethemes.com/academic/updates">Latest release</a></small>
-<br><br>
-<iframe style="display: inline-block;" src="https://ghbtns.com/github-btn.html?user=gcushen&amp;repo=hugo-academic&amp;type=star&amp;count=true&amp;size=large" scrolling="0" width="160px" height="30px" frameborder="0"></iframe>
-<iframe style="display: inline-block;" src="https://ghbtns.com/github-btn.html?user=gcushen&amp;repo=hugo-academic&amp;type=fork&amp;count=true&amp;size=large" scrolling="0" width="158px" height="30px" frameborder="0"></iframe>
-
+<div style="margin-top: -0.5rem;">
+  <a id="academic-release" href="https://sourcethemes.com/academic/updates">Latest release</a>
+</div>
+<div class="mt-3">
+  <a class="github-button" href="https://github.com/gcushen/hugo-academic" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star gcushen/hugo-academic on GitHub">Star</a>
+</div>
+<script async defer src="https://buttons.github.io/buttons.js"></script>
 <script type="text/javascript">
   (function defer() {
     if (window.jQuery) {
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 8fa17ea1..c1f7fb35 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -11,7 +11,7 @@
 
 <div class="article-container">
 
-  {{ with .Title }}<h1>{{ . }}</h1>{{ end }}
+  {{ with .Title }}<h1 class="my-4">{{ . }}</h1>{{ end }}
 
   {{ with .Content }}
   <div class="article-style" itemprop="articleBody">{{ . }}</div>
diff --git a/layouts/partials/css/academic.css b/layouts/partials/css/academic.css
index 3c3b85b3..cd1f5cc5 100644
--- a/layouts/partials/css/academic.css
+++ b/layouts/partials/css/academic.css
@@ -74,7 +74,7 @@ ul, ol, dl {
 }
 
 /* Navigation bar text */
-.navbar-default {
+.navbar-light {
   font-family: '{{ .Get "nav_font" }}', sans-serif;
   font-weight: 400;
   line-height: 1.25;
@@ -176,6 +176,8 @@ pre {
   margin: 0 0 1rem 0;
   background-color: rgb(248, 248, 248); /* Match default highlight theme. */
   border-color: rgb(248, 248, 248);
+  font-size: 0.7rem;
+  border-radius: 4px;
 }
 
 pre code {
@@ -223,10 +225,12 @@ blockquote p:last-child {
 
 .universal-wrapper {
   margin: 0 auto;
-  padding-right: 15px;
-  padding-left: 15px;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  padding-top: 0.1rem;
   width: 100%;
 }
+
 @media only screen and (min-width: 1001px) {
   .universal-wrapper {
     width: 1000px;
@@ -299,18 +303,27 @@ small,
  *  Modals.
  **************************************************/
 
-.modal-header .close {
-  font-size: 40px; /* Bigger cross. */
-  height: 30px; /* Remove icon's vertical spacing. */
-  overflow-y: hidden;
-  position: relative;
-  top: -5px;
+.modal-content {
+  background: {{ .Get "background" }};
+}
+
+.modal-title {
+  margin: 0; /* Override default h5 margin. */
 }
 
 .modal-content pre {
   margin: 0;
 }
 
+.modal-header {
+  border: 0;
+  color: rgba(0,0,0,0.8);
+}
+
+.modal-footer {
+  border: 0;
+}
+
 #modal-error {
   color: red;
 }
@@ -429,7 +442,6 @@ a[data-fancybox] img {
  **************************************************/
 
 .hero-overlay {
-  position: relative;
   padding: 3em 0;
   clear: both;
   background-size: cover;
@@ -467,7 +479,7 @@ a[data-fancybox] img {
   text-decoration-line: underline;
 }
 
-.hero-overlay .btn-large {
+.hero-overlay .btn-lg {
   font-size: 1.1rem;
 }
 
@@ -1045,11 +1057,11 @@ footer a#back_to_top i {
   color: #899596;
 }
 
-/*************************************************
+/**************************************************
  *  Tags/Labels
  **************************************************/
 
-.label-default {
+.badge-light {
   border: none;
   color: rgba(0,0,0,.68);
   background: rgba(0,0,0,.05);
@@ -1060,27 +1072,49 @@ footer a#back_to_top i {
   margin-bottom: 8px;
 }
 
-.article-tags > .label-default:last-child {
+.article-tags > .badge-light:last-child {
   margin-right: 0;
 }
 
-.label-default[href]:focus,
-.label-default[href]:hover {
+.badge-light[href]:focus,
+.badge-light[href]:hover {
   background: rgba(0,0,0,.1);
 }
 
-a.label:focus,
-a.label:hover {
+a.badge:focus,
+a.badge:hover {
   color: rgba(0,0,0,.68);
 }
 
 /*************************************************
- *  Button Primary: Color Override
+ *  Button size override
+ *************************************************/
+
+.btn {
+  padding: .5rem;
+  font-size: .8rem;
+  line-height: .5;
+  border-radius: .3rem;
+}
+
+.btn.btn-sm {
+  padding: .4rem;
+  font-size: .6rem;
+  border-radius: .2rem;
+}
+
+/*************************************************
+ *  Button Primary: Color override
  **************************************************/
 
 .btn-primary {
-  border-color: {{ .Get "primary" }} !important;
-  background: {{ .Get "primary" }} !important;
+  border-color: {{ .Get "primary" }};
+  background: {{ .Get "primary" }};
+}
+
+.btn-outline-primary {
+  border-color: {{ .Get "primary" }};
+  color: {{ .Get "primary" }};
 }
 
 .btn-primary:hover,
@@ -1088,18 +1122,27 @@ a.label:hover {
 .btn-primary.active,
 .btn-primary:visited,
 .open > .dropdown-toggle.btn-primary {
-  background: {{ .Get "primary" }} !important;
+  background: {{ .Get "primary" }};
 }
 
-.btn-light {
-  border-color: #fff !important;
-  background: #fff !important;
+.btn-outline-light:hover,
+.btn-outline-light:active,
+.btn-outline-light.active {
+  background: rgba(0,0,0,0.4);
 }
 
-.btn-light:hover,
-.btn-light:active,
-.btn-light.active {
-  background: rgba(0,0,0,0.4) !important;
+.btn-outline-primary:not(:disabled):not(.disabled).active,
+.btn-outline-primary:not(:disabled):not(.disabled):active,
+.show > .btn-outline-primary.dropdown-toggle {
+  color: #fff;
+  background-color: {{ .Get "primary" }};
+  border-color: {{ .Get "primary" }};
+}
+
+.btn-outline-primary:hover {
+  color: #fff;
+  background-color: {{ .Get "primary" }};
+  border-color: {{ .Get "primary" }};
 }
 
 /*************************************************
@@ -1130,65 +1173,10 @@ a.label:hover {
   background-color: {{ .Get "primary_light" }} !important;
 }
 
-/*************************************************
- *  Button Outlines
- **************************************************/
-
-.btn-outline {
-  background-color: transparent !important;
-  color: inherit;
-  transition: all .5s;
-}
-
-.btn-primary.btn-outline {
-  color: {{ .Get "primary" }} !important;
-  border-color: {{ .Get "primary" }} !important;
-}
-
-.btn-primary.btn-outline:focus {
-  color: {{ .Get "primary" }} !important;
-}
-
-.btn-primary.btn-outline:active {
-  color: #fff !important;
-}
-
-.btn-light.btn-outline {
-  color: #fff !important;
-  border-color: #fff !important;
-}
-
-.btn-light.btn-outline:focus {
-  color: #fff !important;
-}
-
-.btn-light.btn-outline:active {
-  color: transparent !important;
-}
-
-.btn-success.btn-outline {
-  color: #5cb85c;
-}
-
-.btn-info.btn-outline {
-  color: #5bc0de;
-}
-
-.btn-warning.btn-outline {
-  color: #f0ad4e;
-}
-
-.btn-danger.btn-outline {
-  color: #d9534f;
-}
-
-.btn-primary.btn-outline:hover,
-.btn-light.btn-outline:hover,
-.btn-success.btn-outline:hover,
-.btn-info.btn-outline:hover,
-.btn-warning.btn-outline:hover,
-.btn-danger.btn-outline:hover {
-  color: #fff !important;
+.btn-primary:not(:disabled):not(.disabled).active:focus,
+.btn-primary:not(:disabled):not(.disabled):active:focus,
+.show > .btn-primary.dropdown-toggle:focus {
+  box-shadow: 0 0 0 .2rem {{ .Get "primary_dark" }};
 }
 
 /*************************************************
@@ -1199,27 +1187,32 @@ a.label:hover {
   min-height: 70px !important;
 }
 
-.navbar-default {
-  background: {{ .Get "menu_primary" }};
+.navbar-light {
+  background: {{ .Get "menu_primary" }} !important;
   box-shadow: 0 0.125rem 0.25rem 0 rgba(0,0,0,.11)
 }
 
-.navbar-default .navbar-toggle {
+.navbar-light .navbar-toggler {
   border-color: transparent;
 }
 
-.navbar-default .navbar-toggle:focus,
-.navbar-default .navbar-toggle:hover {
+.navbar-toggler {
+  color: {{ .Get "menu_text" }} !important;
+}
+
+.navbar-light .navbar-toggler:focus,
+.navbar-light .navbar-toggler:hover {
   background-color: transparent;
 }
 
-nav#navbar-main li {
+.dropdown-menu,
+nav#navbar-main li.nav-item {
   font-size: {{ .Get "font_size_small" }}px;
 }
 
-.navbar-default .navbar-nav>li>a,
-.navbar-default .navbar-nav>a:focus,
-.navbar-default .navbar-nav>a:hover {
+.navbar-light .navbar-nav>.nav-item>.nav-link,
+.navbar-light .navbar-nav>.nav-item>.nav-link:focus,
+.navbar-light .navbar-nav>.nav-item>.nav-link:hover {
   white-space: nowrap;
   -webkit-transition: 0.2s ease;
   transition: 0.2s ease;
@@ -1227,26 +1220,26 @@ nav#navbar-main li {
   font-weight: 600;
 }
 
-.navbar-default .navbar-nav>li>a:focus {
+.navbar-light .navbar-nav>.nav-item>.nav-link:focus {
   color: {{ .Get "menu_text" }};
   background-color: transparent;
 }
 
-.navbar-default .navbar-nav>li>a:hover {
+.navbar-light .navbar-nav>.nav-item>.nav-link:hover {
   color: {{ .Get "menu_text_active" }};
   background-color: transparent;
 }
 
-.navbar-default .navbar-nav>.active>a,
-.navbar-default .navbar-nav>.active>a:focus,
-.navbar-default .navbar-nav>.active>a:hover {
+.navbar-light .navbar-nav>li.nav-item>a.active,
+.navbar-light .navbar-nav>li.nav-item>a.active:focus,
+.navbar-light .navbar-nav>li.nav-item>a.active:hover {
   color: {{ .Get "menu_text_active" }};
   font-weight: 700;
   background-color: transparent !important; /* Override Bootstrap. */
 }
 
 .navbar-brand,
-.navbar-nav li a {
+.navbar-nav li.nav-item a.nav-link {
   height: inherit;
   line-height: 50px;
   padding-top: 10px;
@@ -1257,7 +1250,7 @@ nav#navbar-main li {
   max-height: 50px;
 }
 
-.navbar-default .navbar-toggle .icon-bar {
+.navbar-light .navbar-toggler .icon-bar {
   background-color: {{ .Get "menu_text" }} !important;
 }
 
@@ -1282,32 +1275,32 @@ nav#navbar-main li {
   background-color: {{ .Get "menu_primary" }};
 }
 
-.dropdown-menu > .active > a,
-.dropdown-menu > .active > a:focus,
-.dropdown-menu > .active > a:hover {
+.dropdown-menu > .active,
+.dropdown-menu > .active:focus,
+.dropdown-menu > .active:hover {
   color: {{ .Get "menu_primary" }};
   text-decoration: none;
   background-color: {{ .Get "menu_text_active" }};
   outline: 0;
 }
 
-.navbar-default .navbar-nav>.open>a,
-.navbar-default .navbar-nav>.open>a:focus,
-.navbar-default .navbar-nav>.open>a:hover,
-.navbar-default .navbar-nav>.open>a:visited {
+.navbar-light .navbar-nav>.open>a,
+.navbar-light .navbar-nav>.open>a:focus,
+.navbar-light .navbar-nav>.open>a:hover,
+.navbar-light .navbar-nav>.open>a:visited {
   color: {{ .Get "menu_text" }} !important;
   background-color: {{ .Get "menu_primary" }} !important;
 }
 
-.navbar-default .navbar-brand {
+.navbar-light .navbar-brand {
   text-transform: uppercase;
   font-weight: bold;
   font-size: 1.2em;
   color: {{ .Get "menu_title" }};
 }
 
-.navbar-default .navbar-brand:focus,
-.navbar-default .navbar-brand:hover {
+.navbar-light .navbar-brand:focus,
+.navbar-light .navbar-brand:hover {
   color: {{ .Get "menu_title" }};
   background-color: transparent;
 }
@@ -1318,7 +1311,7 @@ nav#navbar-main li {
   }
 
   .navbar-brand,
-  .navbar-nav li a {
+  .navbar-nav li.nav-item a.nav-link {
     height: inherit;
     line-height: 40px;
     padding-top: 5px;
@@ -1329,39 +1322,16 @@ nav#navbar-main li {
     max-height: 40px;
   }
 
-  .navbar-header {
-    float: none;
-    min-height: inherit;
-  }
-
-  .navbar-left,
-  .navbar-right {
-    float: none !important;
-  }
-
-  .navbar-toggle {
+  .navbar-toggler {
     display: block;
   }
 
-  .navbar-fixed-top {
+  .fixed-top {
     top: 0;
     border-width: 0 0 1px;
   }
 
-  .navbar-collapse.collapse {
-    display: none !important;
-  }
-
-  .navbar-nav {
-    float: none !important;
-    margin-top: 7.5px;
-  }
-
-  .navbar-nav > li {
-    float: none;
-  }
-
-  .navbar-nav > li > a {
+  .navbar-nav > li.nav-item > a.nav-link {
     padding-top: 10px;
     padding-bottom: 10px;
     line-height: normal;
@@ -1377,9 +1347,8 @@ nav#navbar-main li {
     white-space: nowrap;
   }
 
-  .navbar-default .navbar-nav .open .dropdown-menu {
+  .navbar-light .navbar-nav .open .dropdown-menu {
     position: static;
-    float: none;
     width: auto;
     margin-top: 0;
     background-color: transparent;
@@ -1387,21 +1356,21 @@ nav#navbar-main li {
     box-shadow: none;
   }
 
-  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
+  .navbar-light .navbar-nav .open .dropdown-menu > li > a {
     padding: 5px 15px 5px 25px;
     line-height: 20px;
     color: {{ .Get "menu_text" }};
   }
 
-  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
-  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
+  .navbar-light .navbar-nav .open .dropdown-menu > li > a:focus,
+  .navbar-light .navbar-nav .open .dropdown-menu > li > a:hover {
     color: inherit;
     background-color: transparent;
   }
 
-  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
-  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus,
-  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover {
+  .navbar-light .navbar-nav .open .dropdown-menu >.nav-item> .active,
+  .navbar-light .navbar-nav .open .dropdown-menu >.nav-item> .active:focus,
+  .navbar-light .navbar-nav .open .dropdown-menu >.nav-item> .active:hover {
     color: {{ .Get "menu_text_active" }};
     background-color: transparent;
   }
@@ -1538,6 +1507,14 @@ body.dark {
   color: rgb(248, 248, 242);
 }
 
+.dark input {
+  color: rgb(248, 248, 242);
+}
+
+.dark .modal button.close {
+  color: rgb(248, 248, 242);
+}
+
 .dark h1,
 .dark h2,
 .dark h3,
@@ -1610,7 +1587,7 @@ body.dark {
   color: rgba(255, 255, 255, 0.54);
 }
 
-.dark .pager li > a, .pager li > span {
+.dark .pagination li > a, .pagination li > span {
   background-color: rgb(40, 42, 54);
   border: 1px solid #ddd;
 }
@@ -1633,7 +1610,7 @@ body.dark {
   color: #fff;
 }
 
-.dark .navbar-default {
+.dark .navbar-light {
   box-shadow: 0 0.125rem 0.25rem 0 rgba(255, 255, 255, .11);
   border-color: #070707;
 }
@@ -1652,17 +1629,17 @@ body.dark {
   background-color: rgb(68, 71, 90);
 }
 
-.dark .label-default {
+.dark .badge-light {
   color: rgba(255, 255, 255, .68);
   background: rgba(255, 255, 255, .2);
 }
 
-.dark .label-default[href]:focus,
-.dark .label-default[href]:hover {
+.dark .badge-light[href]:focus,
+.dark .badge-light[href]:hover {
   background: rgba(255, 255, 255, .3);
 }
 
-.dark a.label:focus,
-.dark a.label:hover {
+.dark a.badge:focus,
+.dark a.badge:hover {
   color: rgba(255, 255, 255, .68);
 }
diff --git a/layouts/partials/footer_container.html b/layouts/partials/footer_container.html
index 9b374681..f7a005c2 100644
--- a/layouts/partials/footer_container.html
+++ b/layouts/partials/footer_container.html
@@ -15,7 +15,7 @@
       <a href="https://sourcethemes.com/academic/" target="_blank" rel="noopener">Academic theme</a> for
       <a href="https://gohugo.io" target="_blank" rel="noopener">Hugo</a>.
 
-      <span class="pull-right" aria-hidden="true">
+      <span class="float-right" aria-hidden="true">
         <a href="#" id="back_to_top">
           <span class="button_icon">
             <i class="fas fa-chevron-up fa-2x"></i>
@@ -32,17 +32,19 @@
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="close btn-large" data-dismiss="modal">&times;</button>
-        <h4 class="modal-title">{{ i18n "btn_cite" }}</h4>
+        <h5 class="modal-title">{{ i18n "btn_cite" }}</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
       </div>
-      <div>
-        <pre><code class="modal-body tex"></code></pre>
+      <div class="modal-body">
+        <pre><code class="tex hljs"></code></pre>
       </div>
       <div class="modal-footer">
-        <a class="btn btn-primary btn-outline js-copy-cite" href="#" target="_blank">
+        <a class="btn btn-outline-primary my-1 js-copy-cite" href="#" target="_blank">
           <i class="fas fa-copy"></i> {{ i18n "btn_copy" }}
         </a>
-        <a class="btn btn-primary btn-outline js-download-cite" href="#" target="_blank">
+        <a class="btn btn-outline-primary my-1 js-download-cite" href="#" target="_blank">
           <i class="fas fa-download"></i> {{ i18n "btn_download" }}
         </a>
         <div id="modal-error"></div>
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 1ed7f588..66c4cfa1 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -1,17 +1,7 @@
-<nav class="navbar navbar-default navbar-fixed-top" id="navbar-main">
+<nav class="navbar navbar-light fixed-top navbar-expand-lg py-0" id="navbar-main">
   <div class="container">
 
     <!-- Brand and toggle get grouped for better mobile display -->
-    <div class="navbar-header">
-      {{ if or .Site.Menus.main .IsTranslated }}
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
-              data-target=".navbar-collapse" aria-expanded="false">
-        <span class="sr-only">{{ i18n "toggle_navigation" }}</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-      {{ end }}
       <a class="navbar-brand" href="{{ "/" | relLangURL }}">
         {{- if .Site.Params.logo -}}
         <img src="{{ printf "/img/%s" .Site.Params.logo | relURL }}" alt="{{ .Site.Title }}">
@@ -19,19 +9,24 @@
         {{- .Site.Title -}}
         {{- end -}}
       </a>
-    </div>
+      {{ if or .Site.Menus.main .IsTranslated }}
+      <button type="button" class="navbar-toggler" data-toggle="collapse"
+              data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="{{ i18n "toggle_navigation" }}">
+        <span><i class="fas fa-bars"></i></span>
+      </button>
+      {{ end }}
 
     <!-- Collect the nav links, forms, and other content for toggling -->
-    <div class="collapse navbar-collapse">
+    <div class="collapse navbar-collapse" id="navbar">
 
       <!-- Left Nav Bar -->
       {{ $align_right := .Site.Params.menus.align_right | default true }}
-      <ul class="nav navbar-nav {{ if $align_right }}navbar-right{{ else }}navbar-left{{ end }}">
+      <ul class="navbar-nav {{ if $align_right }}ml-auto{{ else }}mr-auto{{ end }}">
         {{ range .Site.Menus.main }}
 
         {{ if .HasChildren }}
-        <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
+        <li class="nav-item dropdown">
+          <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
             {{ .Pre }}
             <span>{{ .Name }}</span>
             {{ .Post }}
@@ -39,7 +34,7 @@
           </a>
           <ul class="dropdown-menu">
             {{ range .Children }}
-            <li class="nav-item">
+            <li class="dropdown-item my-0 py-0 mx-0 px-0">
               <a href="{{ .URL | relLangURL }}"{{ if $.IsHome }} data-target="{{ .URL }}"{{ end }}>
                 {{ .Pre }}
                 <span>{{ .Name }}</span>
@@ -61,7 +56,7 @@
         {{ end }}
 
         <li class="nav-item">
-          <a href="{{ .URL | relLangURL }}"{{ if $.IsHome }} data-target="{{ .URL }}"{{ end }}{{ ($.Scratch.Get "target") | safeHTMLAttr }}>
+          <a class="nav-link" href="{{ .URL | relLangURL }}"{{ if $.IsHome }} data-target="{{ .URL }}"{{ end }}{{ ($.Scratch.Get "target") | safeHTMLAttr }}>
             {{ .Pre }}
             <span>{{ .Name }}</span>
             {{ .Post }}
@@ -76,16 +71,16 @@
 
       {{ if .IsTranslated }}
       {{ if not $align_right }}
-      <ul class="nav navbar-nav navbar-right">
+      <ul class="navbar-nav ml-auto">
       {{ end }}
-        <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
+        <li class="nav-item dropdown">
+          <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
             <i class="fas fa-globe" aria-hidden="true"></i>
             <span>{{ index .Site.Data.i18n.languages .Lang }}</span>
           </a>
           <ul class="dropdown-menu">
             {{ range .Translations }}
-            <li class="nav-item">
+            <li class="dropdown-item my-0 py-0 mx-0 px-0">
               <a href="{{ .URL }}"{{ if $.IsHome }} data-target="{{ .URL }}"{{ end }}>
                 <span>{{ index .Site.Data.i18n.languages .Lang }}</span>
               </a>
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
index f1f5ea09..90de738e 100644
--- a/layouts/partials/pagination.html
+++ b/layouts/partials/pagination.html
@@ -1,11 +1,11 @@
 {{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
 <nav>
-  <ul class="pager">
+  <ul class="pagination justify-content-center">
     {{ if .Paginator.HasPrev }}
-    <li><a href="{{ .Paginator.Prev.URL | relLangURL }}">&lt;</a></li>
+    <li class="page-item"><a class="page-link" href="{{ .Paginator.Prev.URL | relLangURL }}">&laquo;</a></li>
     {{ end }}
     {{ if .Paginator.HasNext }}
-    <li><a href="{{ .Paginator.Next.URL | relLangURL }}">&gt;</a></li>
+    <li class="page-item"><a class="page-link" href="{{ .Paginator.Next.URL | relLangURL }}">&raquo;</a></li>
     {{ end }}
   </ul>
 </nav>
diff --git a/layouts/partials/post_li_detailed.html b/layouts/partials/post_li_detailed.html
index de598735..1c087982 100644
--- a/layouts/partials/post_li_detailed.html
+++ b/layouts/partials/post_li_detailed.html
@@ -27,7 +27,7 @@
     {{ end }}
   </div>
   <p class="read-more" itemprop="mainEntityOfPage">
-    <a href="{{ $post.Permalink }}" class="btn btn-primary btn-outline">
+    <a href="{{ $post.Permalink }}" class="btn btn-outline-primary my-1">
       {{ i18n "continue_reading" }}
     </a>
   </p>
diff --git a/layouts/partials/publication_links.html b/layouts/partials/publication_links.html
index f73fbe43..072e5a09 100644
--- a/layouts/partials/publication_links.html
+++ b/layouts/partials/publication_links.html
@@ -2,37 +2,37 @@
 {{ $ := .content }}
 
 {{ with $.Params.url_preprint }}
-<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
+<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
   {{ i18n "btn_preprint" }}
 </a>
 {{ end }}
 {{ with $.Params.url_pdf }}
-<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
+<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
   {{ i18n "btn_pdf" }}
 </a>
 {{ end }}
 {{ $directory := "static/files/citations/" }}
 {{ $filename := printf "%s%s.bib" $directory $.File.TranslationBaseName }}
 {{ if fileExists $filename }}
-<button type="button" class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}} js-cite-modal"
+<button type="button" class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}} js-cite-modal"
         data-filename="{{ printf "files/citations/%s.bib" $.File.TranslationBaseName | relURL }}">
   {{ i18n "btn_cite" }}
 </button>
 {{ end }}
 {{ with $.Params.url_code }}
-<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
+<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
   {{ i18n "btn_code" }}
 </a>
 {{ end }}
 {{ with $.Params.url_dataset }}
-<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
+<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
   {{ i18n "btn_dataset" }}
 </a>
 {{ end }}
 {{ if $.Params.projects }}
 {{ range $.Params.projects }}
   {{ with ($.Site.GetPage (printf "project/%s" .)) }}
-  <a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ .Permalink }}">
+  <a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ .Permalink }}">
     {{ i18n "btn_project" }}
   </a>
   {{ else }}
@@ -41,33 +41,33 @@
 {{ end }}
 {{ else }}
 {{ with $.Params.url_project }}
-<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absLangURL }}" target="_blank" rel="noopener">
+<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . | absLangURL }}" target="_blank" rel="noopener">
   {{ i18n "btn_project" }}
 </a>
 {{ end }}
 {{ end }}
 {{ with $.Params.url_poster }}
-<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
+<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
   {{ i18n "btn_poster" }}
 </a>
 {{ end }}
 {{ with $.Params.url_slides }}
-<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
+<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
   {{ i18n "btn_slides" }}
 </a>
 {{ end }}
 {{ with $.Params.url_video }}
-<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
+<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
   {{ i18n "btn_video" }}
 </a>
 {{ end }}
 {{ with $.Params.url_source }}
-<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
+<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
   {{ i18n "btn_source" }}
 </a>
 {{ end }}
 {{ range $.Params.url_custom }}
-<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ .url | absURL }}" target="_blank" rel="noopener">
+<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ .url | absURL }}" target="_blank" rel="noopener">
   {{ .name }}
 </a>
 {{ end }}
diff --git a/layouts/partials/tags.html b/layouts/partials/tags.html
index 2dcad01a..af45863c 100644
--- a/layouts/partials/tags.html
+++ b/layouts/partials/tags.html
@@ -3,7 +3,7 @@
 {{ if gt $tagsLen 0 }}
 <div class="article-tags">
   {{ range $k, $v := $.Params.tags }}
-  <a class="label label-default" href="{{ ($.Site.GetPage (printf "tags/%s" .)).Permalink }}">{{ . }}</a>
+  <a class="badge badge-light" href="{{ ($.Site.GetPage (printf "tags/%s" .)).Permalink }}">{{ . }}</a>
   {{ end }}
 </div>
 {{ end }}
diff --git a/layouts/partials/talk_links.html b/layouts/partials/talk_links.html
index 3bd97d4f..8a728460 100644
--- a/layouts/partials/talk_links.html
+++ b/layouts/partials/talk_links.html
@@ -2,28 +2,28 @@
 {{ $ := .content }}
 
 {{ with $.Params.url_pdf }}
-<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}">
+<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . | absURL }}">
   {{ i18n "btn_pdf" }}
 </a>
 {{ end }}
 {{ with $.Params.url_slides }}
-<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}">
+<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . | absURL }}">
   {{ i18n "btn_slides" }}
 </a>
 {{ end }}
 {{ with $.Params.url_video }}
-<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}">
+<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . | absURL }}">
   {{ i18n "btn_video" }}
 </a>
 {{ end }}
 {{ with $.Params.url_code }}
-<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}">
+<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ . | absURL }}">
   {{ i18n "btn_code" }}
 </a>
 {{ end }}
 {{ range $.Params.projects }}
   {{ with ($.Site.GetPage (printf "project/%s" .)) }}
-  <a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ .Permalink }}">
+  <a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ .Permalink }}">
     {{ i18n "btn_project" }}
   </a>
   {{ else }}
@@ -31,7 +31,7 @@
   {{ end }}
 {{ end }}
 {{ range $.Params.url_custom }}
-<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ .url | absURL }}">
+<a class="btn btn-outline-primary my-1 mr-1{{ if $is_list }} btn-sm{{end}}" href="{{ .url | absURL }}">
   {{ .name }}
 </a>
 {{ end }}
diff --git a/layouts/partials/widgets/about.html b/layouts/partials/widgets/about.html
index 92137e27..b286dccd 100644
--- a/layouts/partials/widgets/about.html
+++ b/layouts/partials/widgets/about.html
@@ -3,7 +3,7 @@
 
 <!-- About widget -->
 <div class="row" itemprop="author" itemscope itemtype="http://schema.org/Person" itemref="{{ if $.Site.Params.email }}person-email{{ end }}{{ if $.Site.Params.phone }} person-telephone{{ end }}{{ if $.Site.Params.address}} person-address{{ end }}">
-  <div class="col-xs-12 col-md-4">
+  <div class="col-12 col-lg-4">
     <div id="profile">
 
       {{ if $.Site.Params.gravatar }}
@@ -55,14 +55,14 @@
 
     </div>
   </div>
-  <div class="col-xs-12 col-md-8" itemprop="description">
+  <div class="col-12 col-lg-8" itemprop="description">
 
     {{ $page.Content }}
 
     <div class="row">
 
       {{ with $page.Params.interests }}
-      <div class="col-sm-5">
+      <div class="col-md-5">
         <h3>{{ i18n "interests" | markdownify }}</h3>
         <ul class="ul-interests">
           {{ range .interests }}
@@ -73,7 +73,7 @@
       {{ end }}
 
       {{ with $page.Params.education }}
-      <div class="col-sm-7">
+      <div class="col-md-7">
         <h3>{{ i18n "education" | markdownify }}</h3>
         <ul class="ul-edu fa-ul">
           {{ range .courses }}
diff --git a/layouts/partials/widgets/contact.html b/layouts/partials/widgets/contact.html
index 48eea735..070914c3 100644
--- a/layouts/partials/widgets/contact.html
+++ b/layouts/partials/widgets/contact.html
@@ -4,11 +4,11 @@
 
 <!-- Contact widget -->
 <div class="row">
-  <div class="col-xs-12 col-md-4 section-heading">
+  <div class="col-12 col-lg-4 section-heading">
     <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
     {{ with $page.Params.subtitle }}<p>{{ . | markdownify }}</p>{{ end }}
   </div>
-  <div class="col-xs-12 col-md-8">
+  <div class="col-12 col-lg-8">
     {{ with $page.Content }}<p>{{ . | markdownify }}</p>{{ end }}
 
     <ul class="fa-ul" itemscope>
@@ -84,7 +84,7 @@
     </ul>
 
     {{ if $.Site.Params.map }}
-    <div class="hidden">
+    <div class="d-none">
       <input id="map-provider" value="{{ $.Site.Params.map }}">
       <input id="map-lat" value="{{ $.Site.Params.latitude }}">
       <input id="map-lng" value="{{ $.Site.Params.longitude }}">
diff --git a/layouts/partials/widgets/custom.html b/layouts/partials/widgets/custom.html
index fec5a9c7..a31c37c8 100644
--- a/layouts/partials/widgets/custom.html
+++ b/layouts/partials/widgets/custom.html
@@ -3,15 +3,15 @@
 <!-- Custom widget -->
 <div class="row">
   {{ if $page.Title }}
-  <div class="col-xs-12 col-md-4 section-heading">
+  <div class="col-12 col-lg-4 section-heading">
     <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
     {{ with $page.Params.subtitle }}<p>{{ . | markdownify }}</p>{{ end }}
   </div>
-  <div class="col-xs-12 col-md-8">
+  <div class="col-12 col-lg-8">
     {{ $page.Content }}
   </div>
   {{ else }}
-  <div class="col-md-12">
+  <div class="col-lg-12">
     {{ $page.Content }}
   </div>
   {{ end }}
diff --git a/layouts/partials/widgets/featurette.html b/layouts/partials/widgets/featurette.html
index a749b79e..ec592410 100644
--- a/layouts/partials/widgets/featurette.html
+++ b/layouts/partials/widgets/featurette.html
@@ -21,7 +21,7 @@
   {{ if in (slice "fab" "fas" "far" "fal") $pack }}
     {{ $pack_prefix = "fa" }}
   {{ end }}
-  <div class="col-sm-4">
+  <div class="col-md-4">
     {{ with .icon }}<div class="featurette-icon"><i class="{{ $pack }} {{ $pack_prefix }}-{{ . }}"></i></div>{{ end }}
     <h3>{{ .name | markdownify | emojify }}</h3>
     {{ with .description }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
diff --git a/layouts/partials/widgets/hero.html b/layouts/partials/widgets/hero.html
index 51233a74..2dc2988f 100644
--- a/layouts/partials/widgets/hero.html
+++ b/layouts/partials/widgets/hero.html
@@ -24,7 +24,7 @@ url('{{ printf "img/%s" $header.overlay_img | absURL}}');
     {{ end }}
 
     {{ if $page.Params.cta.url }}
-    <p><a href="{{ $page.Params.cta.url }}" class="btn btn-light btn-outline btn-large">{{ $page.Params.cta.label | safeHTML}}</a></p>
+    <p><a href="{{ $page.Params.cta.url }}" class="btn btn-outline-light btn-lg">{{ $page.Params.cta.label | safeHTML}}</a></p>
     {{ end }}
 
   </div>
diff --git a/layouts/partials/widgets/hero_carousel.html b/layouts/partials/widgets/hero_carousel.html
index a0c604c4..36780d33 100644
--- a/layouts/partials/widgets/hero_carousel.html
+++ b/layouts/partials/widgets/hero_carousel.html
@@ -4,7 +4,7 @@
 <section id="{{ $page.File.TranslationBaseName }}" class="carousel slide" data-ride="carousel" data-interval="{{if isset $page.Params "interval"}}{{$page.Params.interval}}{{else}}5000{{end}}">
 
   <!-- Indicators -->
-  <ol class="carousel-indicators carousel-indicators-botleft">
+  <ol class="carousel-indicators">
     {{ range $index, $item := $page.Params.item }}
     <li data-target="#{{ $page.File.TranslationBaseName }}" data-slide-to="{{ $index }}" {{ if eq $index 0 }}class="active"{{ end }}></li>
     {{ end }}
@@ -13,7 +13,7 @@
   <!-- Carousel slides wrapper -->
   <div class="carousel-inner" style="min-height: {{$page.Params.height | default "300px"}};">
     {{ range $index, $item := $page.Params.item }}
-    <div class="hero-overlay item{{ if eq $index 0 }} active{{ end }}" style="min-height: inherit;
+    <div class="hero-overlay carousel-item{{ if eq $index 0 }} active{{ end }}" style="min-height: inherit;
       {{ if $item.overlay_color }}
       background-color: {{ $item.overlay_color | default "transparent" }};
       {{ end }}
@@ -37,7 +37,7 @@
           {{ if $item.cta_url }}
           {{ $pack := or .icon_pack "fa" }}
           <p>
-            <a href="{{ $item.cta_url }}" class="btn btn-light btn-outline btn-large">
+            <a href="{{ $item.cta_url }}" class="btn btn-outline-light btn-lg">
               {{- with $item.cta_icon -}}<i class="{{ $pack }} {{ $pack }}-{{ . }}" style="padding-right: 10px;"></i>{{- end -}}
               {{- $item.cta_label | emojify | safeHTML -}}
             </a>
@@ -49,12 +49,12 @@
   </div>
 
   <!-- Left and right controls -->
-  <a class="left carousel-control" href="#{{ $page.File.TranslationBaseName }}" data-slide="prev">
-    <span class="glyphicon glyphicon-chevron-left"></span>
+  <a class="carousel-control-prev" href="#{{ $page.File.TranslationBaseName }}" data-slide="prev">
+    <span class="carousel-control-prev-icon"></span>
     <span class="sr-only">Previous</span>
   </a>
-  <a class="right carousel-control" href="#{{ $page.File.TranslationBaseName }}" data-slide="next">
-    <span class="glyphicon glyphicon-chevron-right"></span>
+  <a class="carousel-control-next" href="#{{ $page.File.TranslationBaseName }}" data-slide="next">
+    <span class="carousel-control-next-icon"></span>
     <span class="sr-only">Next</span>
   </a>
 
diff --git a/layouts/partials/widgets/posts.html b/layouts/partials/widgets/posts.html
index 5212dd8d..03836dfc 100644
--- a/layouts/partials/widgets/posts.html
+++ b/layouts/partials/widgets/posts.html
@@ -4,7 +4,7 @@
 
 <!-- Blog Posts widget -->
 <div class="row">
-  <div class="col-xs-12 col-md-4 section-heading">
+  <div class="col-12 col-lg-4 section-heading">
 
     <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
     {{ with $page.Params.subtitle }}<p>{{ . | markdownify }}</p>{{ end }}
@@ -18,7 +18,7 @@
     {{ end }}
 
   </div>
-  <div class="col-xs-12 col-md-8">
+  <div class="col-12 col-lg-8">
 
     {{ with $page.Content }}<p>{{ . | markdownify }}</p>{{ end }}
 
diff --git a/layouts/partials/widgets/projects.html b/layouts/partials/widgets/projects.html
index 3e9b233a..527fd6b9 100644
--- a/layouts/partials/widgets/projects.html
+++ b/layouts/partials/widgets/projects.html
@@ -3,11 +3,11 @@
 
 <!-- Projects widget -->
 <div class="row">
-  <div class="col-xs-12 col-md-4 section-heading">
+  <div class="col-12 col-lg-4 section-heading">
     <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
     {{ with $page.Params.subtitle }}<p>{{ . | markdownify }}</p>{{ end }}
   </div>
-  <div class="col-xs-12 col-md-8">
+  <div class="col-12 col-lg-8">
     {{ with $page.Content }}<p>{{ . | markdownify }}</p>{{ end }}
 
     {{ if $page.Params.filter }}
@@ -21,7 +21,7 @@
       {{ $default_filter_tag = $default_filter_tag_raw }}
     {{ end }}
 
-    <span class="hidden default-project-filter">{{ $default_filter_tag }}</span>
+    <span class="d-none default-project-filter">{{ $default_filter_tag }}</span>
 
     {{/* Only show filter buttons if there are multiple filters. */}}
     {{ if gt (len $page.Params.filter) 1 }}
@@ -36,7 +36,7 @@
               {{ else }}
                 {{ $.Scratch.Set "tag" (printf ".%s" (urlize .tag)) }}
               {{ end }}
-              <a href="#" data-filter="{{ $.Scratch.Get "tag" }}" class="btn btn-primary btn-large{{ if eq $idx $filter_default }} active{{ end }}">{{ .name }}</a>
+              <a href="#" data-filter="{{ $.Scratch.Get "tag" }}" class="btn btn-primary btn-lg{{ if eq $idx $filter_default }} active{{ end }}">{{ .name }}</a>
             {{ end }}
           </div>
         </div>
@@ -49,7 +49,7 @@
 
     <div class="row isotope projects-container js-layout-row">
         {{ range where $.Site.RegularPages "Type" ($page.Params.folder | default "project") }}
-        <div class="col-md-12 project-item isotope-item {{ delimit (apply .Params.tags "urlize" ".") " " }}" itemscope itemtype="http://schema.org/CreativeWork">
+        <div class="col-lg-12 project-item isotope-item {{ delimit (apply .Params.tags "urlize" ".") " " }}" itemscope itemtype="http://schema.org/CreativeWork">
           <i class="far fa-copy pub-icon" aria-hidden="true"></i>
 
           <span class="project-title">
@@ -77,7 +77,7 @@
       {{   $.Scratch.Set "project_url" $project.Params.external_link }}
       {{   $.Scratch.Set "target" "target=\"_blank\"" }}
       {{ end }}
-      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-6 project-item isotope-item {{ delimit (apply .Params.tags "urlize" ".") " " }}">
+      <div class="col-12 col-md-6 col-lg-4 col-xl-6 project-item isotope-item {{ delimit (apply .Params.tags "urlize" ".") " " }}">
         <div class="card">
           {{ with $project.Params.image_preview }}
           <a href="{{ $.Scratch.Get "project_url" }}" title="" class="card-image hover-overlay"
diff --git a/layouts/partials/widgets/publications.html b/layouts/partials/widgets/publications.html
index 8566452e..97ac4337 100644
--- a/layouts/partials/widgets/publications.html
+++ b/layouts/partials/widgets/publications.html
@@ -4,7 +4,7 @@
 
 <!-- Publications widget -->
 <div class="row">
-  <div class="col-xs-12 col-md-4 section-heading">
+  <div class="col-12 col-lg-4 section-heading">
     <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
     {{ with $page.Params.subtitle }}<p>{{ . | markdownify }}</p>{{ end }}
     {{ if gt $pubs_len $page.Params.count }}
@@ -16,7 +16,7 @@
     </p>
     {{ end }}
   </div>
-  <div class="col-xs-12 col-md-8">
+  <div class="col-12 col-lg-8">
     {{ with $page.Content }}<p>{{ . | markdownify }}</p>{{ end }}
 
     {{ if and ($page.Params.publication_type) (ne $page.Params.publication_type "-1") }}
diff --git a/layouts/partials/widgets/publications_selected.html b/layouts/partials/widgets/publications_selected.html
index d442448d..0e06c0da 100644
--- a/layouts/partials/widgets/publications_selected.html
+++ b/layouts/partials/widgets/publications_selected.html
@@ -3,11 +3,11 @@
 
 <!-- Selected Publications widget -->
 <div class="row">
-  <div class="col-xs-12 col-md-4 section-heading">
+  <div class="col-12 col-lg-4 section-heading">
     <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
     {{ with $page.Params.subtitle }}<p>{{ . | markdownify }}</p>{{ end }}
   </div>
-  <div class="col-xs-12 col-md-8">
+  <div class="col-12 col-lg-8">
     {{ with $page.Content }}<p>{{ . | markdownify }}</p>{{ end }}
 
     {{ if and ($page.Params.publication_type) (ne $page.Params.publication_type "-1") }}
diff --git a/layouts/partials/widgets/tag_cloud.html b/layouts/partials/widgets/tag_cloud.html
index c7c44900..9db3f912 100644
--- a/layouts/partials/widgets/tag_cloud.html
+++ b/layouts/partials/widgets/tag_cloud.html
@@ -2,11 +2,11 @@
 {{ $page := .page }}
 
 <div class="row">
-  <div class="col-xs-12 col-md-4 section-heading">
+  <div class="col-12 col-lg-4 section-heading">
     <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
     {{ with $page.Params.subtitle }}<p>{{ . | markdownify }}</p>{{ end }}
   </div>
-  <div class="col-xs-12 col-md-8">
+  <div class="col-12 col-lg-8">
     {{ with $page.Content }}<p>{{ . | markdownify }}</p>{{ end }}
 
     {{ if not (eq (len $.Site.Taxonomies.tags) 0) }}
diff --git a/layouts/partials/widgets/talks.html b/layouts/partials/widgets/talks.html
index c42f9938..9632f206 100644
--- a/layouts/partials/widgets/talks.html
+++ b/layouts/partials/widgets/talks.html
@@ -4,7 +4,7 @@
 
 <!-- Talks widget -->
 <div class="row">
-  <div class="col-xs-12 col-md-4 section-heading">
+  <div class="col-12 col-lg-4 section-heading">
     <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
     {{ with $page.Params.subtitle }}<p>{{ . | markdownify }}</p>{{ end }}
     {{ if gt $talks_len $page.Params.count }}
@@ -16,7 +16,7 @@
     </p>
     {{ end }}
   </div>
-  <div class="col-xs-12 col-md-8">
+  <div class="col-12 col-lg-8">
     {{ with $page.Content }}<p>{{ . | markdownify }}</p>{{ end }}
 
     {{ $.Scratch.Set "talks" (where $.Site.RegularPages "Type" "talk") }}
diff --git a/layouts/partials/widgets/talks_selected.html b/layouts/partials/widgets/talks_selected.html
index f8480abc..ccaedcba 100644
--- a/layouts/partials/widgets/talks_selected.html
+++ b/layouts/partials/widgets/talks_selected.html
@@ -3,11 +3,11 @@
 
 <!-- Selected Talks widget -->
 <div class="row">
-  <div class="col-xs-12 col-md-4 section-heading">
+  <div class="col-12 col-lg-4 section-heading">
     <h1>{{ with $page.Title }}{{ . | markdownify }}{{ end }}</h1>
     {{ with $page.Params.subtitle }}<p>{{ . | markdownify }}</p>{{ end }}
   </div>
-  <div class="col-xs-12 col-md-8">
+  <div class="col-12 col-lg-8">
     {{ with $page.Content }}<p>{{ . | markdownify }}</p>{{ end }}
 
     {{ range (sort (where (where $.Site.RegularPages "Type" "talk") ".Params.selected" true) ".Params.time_start" "desc") }}
diff --git a/layouts/project/single.html b/layouts/project/single.html
index 04af86f1..5af3ce15 100644
--- a/layouts/project/single.html
+++ b/layouts/project/single.html
@@ -10,13 +10,13 @@
     <div class="pub-title">
       <h1 itemprop="name">{{ .Title }}</h1>
       <span class="pub-authors" itemprop="author">&nbsp;</span>
-      <span class="pull-right">
+      <span class="float-right">
         {{ partial "share.html" . }}
       </span>
     </div>
 
     {{ with .Params.external_link }}
-    <a class="btn btn-primary btn-outline" href="{{ . }}" target="_blank" rel="noopener">{{ i18n "open_project_site" }}</a>
+    <a class="btn btn-outline-primary my-1" href="{{ . }}" target="_blank" rel="noopener">{{ i18n "open_project_site" }}</a>
     {{ end }}
 
     <div class="article-style" itemprop="articleBody">
diff --git a/layouts/publication/single.html b/layouts/publication/single.html
index dc4af0f3..c63a95cc 100644
--- a/layouts/publication/single.html
+++ b/layouts/publication/single.html
@@ -11,7 +11,7 @@
       {{ delimit . ", " | markdownify }}
       {{ end }}
     </span>
-    <span class="pull-right">
+    <span class="float-right">
       {{ partial "share.html" . }}
     </span>
 
@@ -26,11 +26,11 @@
 
     {{ if (.Params.publication_types) and (ne (index .Params.publication_types 0) "0") }}
     <div class="row">
-      <div class="col-sm-1"></div>
-      <div class="col-sm-10">
+      <div class="col-md-1"></div>
+      <div class="col-md-10">
         <div class="row">
-          <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "publication_type" }}</div>
-          <div class="col-xs-12 col-sm-9">
+          <div class="col-12 col-md-3 pub-row-heading">{{ i18n "publication_type" }}</div>
+          <div class="col-12 col-md-9">
             {{ range $index, $pubtype := .Params.publication_types }}
             <a href="{{ ($.Site.GetPage "section" "publication").Permalink }}#{{ . | urlize }}">
               {{ index $.Site.Params.publication_types (int .) }}
@@ -39,54 +39,54 @@
           </div>
         </div>
       </div>
-      <div class="col-sm-1"></div>
+      <div class="col-md-1"></div>
     </div>
-    <div class="visible-xs space-below"></div>
+    <div class="d-md-none space-below"></div>
     {{ end }}
 
     {{ if .Params.publication }}
     <div class="row">
-      <div class="col-sm-1"></div>
-      <div class="col-sm-10">
+      <div class="col-md-1"></div>
+      <div class="col-md-10">
         <div class="row">
-          <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "publication" }}</div>
-          <div class="col-xs-12 col-sm-9">{{ .Params.publication | markdownify }}</div>
+          <div class="col-12 col-md-3 pub-row-heading">{{ i18n "publication" }}</div>
+          <div class="col-12 col-md-9">{{ .Params.publication | markdownify }}</div>
         </div>
       </div>
-      <div class="col-sm-1"></div>
+      <div class="col-md-1"></div>
     </div>
-    <div class="visible-xs space-below"></div>
+    <div class="d-md-none space-below"></div>
     {{ end }}
 
     <div class="row">
-      <div class="col-sm-1"></div>
-      <div class="col-sm-10">
+      <div class="col-md-1"></div>
+      <div class="col-md-10">
         <div class="row">
-          <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "date" }}</div>
-          <div class="col-xs-12 col-sm-9" itemprop="datePublished">
+          <div class="col-12 col-md-3 pub-row-heading">{{ i18n "date" }}</div>
+          <div class="col-12 col-md-9" itemprop="datePublished">
             {{ .Date.Format ($.Site.Params.publications.date_format | default "January, 2006") }}
           </div>
         </div>
       </div>
-      <div class="col-sm-1"></div>
+      <div class="col-md-1"></div>
     </div>
-    <div class="visible-xs space-below"></div>
+    <div class="d-sm-none space-below"></div>
 
     <div class="row" style="padding-top: 10px">
-      <div class="col-sm-1"></div>
-      <div class="col-sm-10">
+      <div class="col-md-1"></div>
+      <div class="col-md-10">
         <div class="row">
-          <div class="col-xs-12 col-sm-3 pub-row-heading" style="line-height:34px;">{{ i18n "links" }}</div>
-          <div class="col-xs-12 col-sm-9">
+          <div class="col-12 col-md-3 pub-row-heading" style="line-height:34px;">{{ i18n "links" }}</div>
+          <div class="col-12 col-md-9">
 
             {{ partial "publication_links" (dict "content" . "is_list" 0) }}
 
           </div>
         </div>
       </div>
-      <div class="col-sm-1"></div>
+      <div class="col-md-1"></div>
     </div>
-    <div class="visible-xs space-below"></div>
+    <div class="d-sm-none space-below"></div>
 
     <div class="space-below"></div>
 
diff --git a/layouts/section/post.html b/layouts/section/post.html
index 614f37e5..81202d89 100644
--- a/layouts/section/post.html
+++ b/layouts/section/post.html
@@ -5,7 +5,7 @@
 
 <div class="universal-wrapper">
 
-  <h1>{{ .Title | default (i18n "posts") }}</h1>
+  <h1 class="my-4">{{ .Title | default (i18n "posts") }}</h1>
 
   {{ with .Content }}
   <div class="article-style" itemprop="articleBody">{{ . }}</div>
diff --git a/layouts/section/publication.html b/layouts/section/publication.html
index 21a17be3..b42d298f 100644
--- a/layouts/section/publication.html
+++ b/layouts/section/publication.html
@@ -5,8 +5,8 @@
 
 <div class="container">
   <div class="row">
-    <div class="col-md-12">
-      <h1>{{ .Title | default (i18n "publications") }}</h1>
+    <div class="col-lg-12">
+      <h1 class="my-4">{{ .Title | default (i18n "publications") }}</h1>
 
       {{ with .Content }}
       <div class="article-style" itemprop="articleBody">{{ . }}</div>
@@ -18,30 +18,34 @@
         {{ $.Scratch.SetInMap "years" $year $year }}
       {{ end }}
 
-      <p>
-        {{ i18n "filter_by_type" }}:
-
-        <select class="pub-filters pubtype-select" data-filter-group="pubtype">
-          <option value="*">{{ i18n "filter_all" }}</option>
-          {{ range $index, $taxonomy := .Site.Taxonomies.publication_types }}
-          <option value=".pubtype-{{ (int $index) }}">
-            {{ index $.Site.Params.publication_types (int $index) }}
-          </option>
-          {{ end }}
-        </select>
-
-        <select class="pub-filters" data-filter-group="year">
-          <option value="*">{{ i18n "filter_all" }}</option>
-          {{ $years_sorted := $.Scratch.GetSortedMapValues "years" }}
-          {{ if $years_sorted }}
-          {{ range $year := sort $years_sorted "" "desc" }}
-          <option value=".year-{{ $year }}">
-            {{ $year }}
-          </option>
-          {{ end }}
-          {{ end }}
-        </select>
-      </p>
+      <div class="row">
+        <div class="col-auto">
+          {{ i18n "filter_by_type" }}:
+        </div>
+        <div class="form-group col-auto">
+          <select class="pub-filters pubtype-select form-control form-control-sm" data-filter-group="pubtype">
+            <option value="*">{{ i18n "filter_all" }}</option>
+            {{ range $index, $taxonomy := .Site.Taxonomies.publication_types }}
+            <option value=".pubtype-{{ (int $index) }}">
+              {{ index $.Site.Params.publication_types (int $index) }}
+            </option>
+            {{ end }}
+          </select>
+        </div>
+        <div class="form-group col-auto">
+          <select class="pub-filters form-control form-control-sm" data-filter-group="year">
+            <option value="*">{{ i18n "filter_all" }}</option>
+            {{ $years_sorted := $.Scratch.GetSortedMapValues "years" }}
+            {{ if $years_sorted }}
+            {{ range $year := sort $years_sorted "" "desc" }}
+            <option value=".year-{{ $year }}">
+              {{ $year }}
+            </option>
+            {{ end }}
+            {{ end }}
+          </select>
+        </div>
+      </div>
 
       <div id="container-publications">
         {{ range .Pages.ByDate.Reverse }}
@@ -52,7 +56,7 @@
           {{ $.Scratch.Set "pubtype" 0 }}
         {{ end }}
 
-        <div class="grid-sizer col-md-12 isotope-item pubtype-{{ $.Scratch.Get "pubtype" }} year-{{ .Date.Format "2006" }}">
+        <div class="grid-sizer col-lg-12 isotope-item pubtype-{{ $.Scratch.Get "pubtype" }} year-{{ .Date.Format "2006" }}">
           {{ if eq $.Params.list_format 1 }}
             {{ partial "publication_li_detailed" . }}
           {{ else if eq $.Params.list_format 2 }}
diff --git a/layouts/section/talk.html b/layouts/section/talk.html
index 4062daf3..e82b38f4 100644
--- a/layouts/section/talk.html
+++ b/layouts/section/talk.html
@@ -5,8 +5,8 @@
 
 <div class="container">
   <div class="row">
-    <div class="col-md-12">
-      <h1>{{ .Title | default (i18n "talks") }}</h1>
+    <div class="col-lg-12">
+      <h1 class="my-4">{{ .Title | default (i18n "talks") }}</h1>
 
       {{ with .Content }}
       <div class="article-style" itemprop="articleBody">{{ . }}</div>
@@ -14,10 +14,10 @@
 
       {{ range .Data.Pages.GroupByParamDate "time_start" "2006" }}
       <div class="row" id="talk_list">
-        <div class="col-md-2">
+        <div class="col-lg-2">
           <h3>{{ .Key }}</h3>
         </div>
-        <div class="col-md-10">
+        <div class="col-lg-10">
 
           {{ range sort .Pages ".Params.time_start" "desc" }}
             {{ if eq $.Params.list_format 1 }}
diff --git a/layouts/talk/single.html b/layouts/talk/single.html
index 08ba8ae6..a1e5be69 100644
--- a/layouts/talk/single.html
+++ b/layouts/talk/single.html
@@ -13,7 +13,7 @@
         {{ delimit . ", " | markdownify }}
         {{ end }}
       </span>
-      <span class="pull-right">
+      <span class="float-right">
         {{ partial "share.html" . }}
       </span>
     </div>
@@ -26,11 +26,11 @@
     {{ end }}
 
     <div class="row">
-      <div class="col-sm-1"></div>
-      <div class="col-sm-10">
+      <div class="col-md-1"></div>
+      <div class="col-md-10">
         <div class="row">
-          <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "date" }}</div>
-          <div class="col-xs-12 col-sm-9" itemprop="datePublished">
+          <div class="col-12 col-md-3 pub-row-heading">{{ i18n "date" }}</div>
+          <div class="col-12 col-md-9" itemprop="datePublished">
             {{ $date := .Params.time_start | default .Date }}
             {{ (time $date).Format $.Site.Params.date_format }}
             <div class="talk-time">
@@ -44,56 +44,56 @@
           </div>
         </div>
       </div>
-      <div class="col-sm-1"></div>
+      <div class="col-md-1"></div>
     </div>
-    <div class="visible-xs space-below"></div>
+    <div class="d-md-none space-below"></div>
 
     <div class="row">
-      <div class="col-sm-1"></div>
-      <div class="col-sm-10">
+      <div class="col-md-1"></div>
+      <div class="col-md-10">
         <div class="row">
-          <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "event" }}</div>
-          <div class="col-xs-12 col-sm-9">
+          <div class="col-12 col-md-3 pub-row-heading">{{ i18n "event" }}</div>
+          <div class="col-12 col-md-9">
             {{ with .Params.event_url }}<a href="{{ . }}" target="_blank" rel="noopener">{{ end }}
             {{ .Params.event | markdownify }}
             {{ if .Params.event_url }}</a>{{ end }}
           </div>
         </div>
       </div>
-      <div class="col-sm-1"></div>
+      <div class="col-md-1"></div>
     </div>
-    <div class="visible-xs space-below"></div>
+    <div class="d-md-none space-below"></div>
 
     {{ with .Params.location }}
     <div class="row">
-      <div class="col-sm-1"></div>
-      <div class="col-sm-10">
+      <div class="col-md-1"></div>
+      <div class="col-md-10">
         <div class="row">
-          <div class="col-xs-12 col-sm-3 pub-row-heading">{{ i18n "location" }}</div>
-          <div class="col-xs-12 col-sm-9">{{ . | markdownify }}</div>
+          <div class="col-12 col-md-3 pub-row-heading">{{ i18n "location" }}</div>
+          <div class="col-12 col-md-9">{{ . | markdownify }}</div>
         </div>
       </div>
-      <div class="col-sm-1"></div>
+      <div class="col-md-1"></div>
     </div>
-    <div class="visible-xs space-below"></div>
+    <div class="d-md-none space-below"></div>
     {{ end }}
 
     {{ if .Params.url_pdf | or .Params.url_slides | or .Params.url_video | or .Params.url_code | or .Params.projects | or .Params.url_custom }}
     <div class="row" style="padding-top: 10px">
-      <div class="col-sm-1"></div>
-      <div class="col-sm-10">
+      <div class="col-md-1"></div>
+      <div class="col-md-10">
         <div class="row">
-          <div class="col-xs-12 col-sm-3 pub-row-heading" style="line-height:34px;">{{ i18n "links" }}</div>
-          <div class="col-xs-12 col-sm-9">
+          <div class="col-12 col-md-3 pub-row-heading" style="line-height:34px;">{{ i18n "links" }}</div>
+          <div class="col-12 col-md-9">
 
             {{ partial "talk_links" (dict "content" . "is_list" 0) }}
 
           </div>
         </div>
       </div>
-      <div class="col-sm-1"></div>
+      <div class="col-md-1"></div>
     </div>
-    <div class="visible-xs space-below"></div>
+    <div class="d-md-none space-below"></div>
     {{ end }}
 
     <div class="space-below"></div>
diff --git a/static/js/hugo-academic.js b/static/js/hugo-academic.js
index f1fdc0e8..e38bc3cd 100644
--- a/static/js/hugo-academic.js
+++ b/static/js/hugo-academic.js
@@ -10,7 +10,7 @@
    * --------------------------------------------------------------------------- */
 
   // Dynamically get responsive navigation bar offset.
-  let $navbar = $('.navbar-header');
+  let $navbar = $('.navbar');
   let navbar_offset = $navbar.innerHeight();
 
   /**
@@ -41,7 +41,7 @@
     let $body = $('body');
     let data = $body.data('bs.scrollspy');
     if (data) {
-      data.options.offset = navbar_offset;
+      data._config.offset = navbar_offset;
       $body.data('bs.scrollspy', data);
       $body.scrollspy('refresh');
     }
@@ -54,7 +54,7 @@
    * Add smooth scrolling to all links inside the main navbar.
    * --------------------------------------------------------------------------- */
 
-  $('#navbar-main li.nav-item a').on('click', function(event) {
+  $('#navbar-main li.nav-item a.nav-link').on('click', function(event) {
     // Store requested URL hash.
     let hash = this.hash;
 
@@ -88,7 +88,7 @@
    * Hide mobile collapsable menu on clicking a link.
    * --------------------------------------------------------------------------- */
 
-  $(document).on('click', '.navbar-collapse.in', function(e) {
+  $(document).on('click', '.navbar-collapse.show', function(e) {
     //get the <a> element that was clicked, even if the <span> element that is inside the <a> element is e.target
     let targetElement = $(e.target).is('a') ? $(e.target) : $(e.target).parent();
 
@@ -184,7 +184,7 @@
       let zoom = parseInt($('#map-zoom').val());
       let address = $('#map-dir').val();
       let api_key = $('#map-api-key').val();
-      
+
       if ( map_provider == 1 ) {
         let map = new GMaps({
           div: '#map',
@@ -299,7 +299,7 @@
       e.preventDefault();
       let filename = $(this).attr('data-filename');
       let modal = $('#modal');
-      modal.find('.modal-body').load( filename , function( response, status, xhr ) {
+      modal.find('.modal-body code').load( filename , function( response, status, xhr ) {
         if ( status == 'error' ) {
           let msg = "Error: ";
           $('#modal-error').html( msg + xhr.status + " " + xhr.statusText );