diff --git a/assets/javascripts/application.js b/assets/javascripts/application.js
index 8baa2ff007..3373e009b6 100644
--- a/assets/javascripts/application.js
+++ b/assets/javascripts/application.js
@@ -1,9 +1,8 @@
-import 'bootstrap-sass/assets/javascripts/bootstrap/transition'
-import 'bootstrap-sass/assets/javascripts/bootstrap/button'
-import 'bootstrap-sass/assets/javascripts/bootstrap/tooltip'
-import 'bootstrap-sass/assets/javascripts/bootstrap/popover'
-import 'bootstrap-sass/assets/javascripts/bootstrap/dropdown'
-import 'bootstrap-sass/assets/javascripts/bootstrap/collapse'
+import 'bootstrap/js/dist/button'
+import 'bootstrap/js/dist/tooltip'
+import 'bootstrap/js/dist/popover'
+import 'bootstrap/js/dist/dropdown'
+import 'bootstrap/js/dist/collapse'
 import './search'
 import './search_arrows'
 import AnchorJS from 'anchor-js';
diff --git a/assets/javascripts/search.js b/assets/javascripts/search.js
index d8738333a7..7eb4fc2dbc 100644
--- a/assets/javascripts/search.js
+++ b/assets/javascripts/search.js
@@ -45,7 +45,6 @@ $(document).ready(function() {
     };
 
     this.hidePopover = function() {
-      this.popover.options.animation = true;
       this.searchInput.popover('hide');
       this.searchArrows.destroy();
     };
@@ -114,7 +113,6 @@ $(document).ready(function() {
       });
       this.searchInput.on('shown.bs.popover', function()  {
         self.popoverHandler = $(self.POPOVER_CLASS);
-        self.popover.options.animation = false;
         self.popoverHandler.click(function(e) { e.stopPropagation() });
         self.searchArrows.init();
       });
diff --git a/assets/stylesheets/_bootstrap-overrides.scss b/assets/stylesheets/_bootstrap-overrides.scss
index 8059cefa81..47b7ff418f 100644
--- a/assets/stylesheets/_bootstrap-overrides.scss
+++ b/assets/stylesheets/_bootstrap-overrides.scss
@@ -1,24 +1,36 @@
+$theme-colors: (
+  // for .btn-primary. This color is applied to $link-color so tweak is followed.
+  // - Discussion: https://github.com/rubygems/bundler-site/pull/644#issuecomment-1178722939
+  "primary": #12AEE2
+);
+
 // navbar
-$navbar-default-bg: #fff;
-$navbar-default-border: #fff;
+$navbar-padding-y: 0;
+
+$navbar-light-brand-color: #06456A;
+$navbar-light-color: #000;
+
+// Transition workaround for skipping improvement from Bootstrap 3.4.1 to Bootstrap 4.6.1
+// - Discussion: https://github.com/rubygems/bundler-site/pull/644#issuecomment-1178722939
+// - Color adapted from https://github.com/twbs/bootstrap/blob/v3.4.1/less/variables.less#L389
+$_navbar-default-toggle-icon-bar-bg: #888;
+$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$_navbar-default-toggle-icon-bar-bg}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
+// /Transition workaround
 
-$navbar-default-link-color: #000;
-$navbar-default-link-hover-color: #777;
+$navbar-nav-link-padding-x: 0.875rem;
 
-$navbar-default-brand-color: #06456A;
-$navbar-default-brand-hover-color: $navbar-default-brand-color;
+// font-size: 1.25rem ($font-size-lg) is too large for .navbar-toggler
+// - Discussion: https://github.com/rubygems/bundler-site/pull/644#issuecomment-1177959921
+$navbar-toggler-font-size: 1rem;
 
-$btn-primary-bg: #12AEE2;
-$btn-primary-border: transparent;
+// .btn does not need border
+$btn-border-width: 0;
 
-$font-family-sans-serif: "SancoaleSlab";
-$font-size-base: 16px;
+$font-family-sans-serif: "SancoaleSlab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
-$pre-bg: #373737;
-$pre-color: #fff;
-$pre-border-color: #373737;
+// for contributors
+$card-border-width: 0;
 
-$thumbnail-padding: 25px;
-$thumbnail-border: #fff;
-$thumbnail-caption-color: $navbar-default-brand-color;
-$thumbnail-caption-padding: 0px;
+// Transition workaround for unifying link color and button (btn-primary) in Boostrap 4.6.1
+$link-color: #337ab7;
+// /Transition workaround
diff --git a/assets/stylesheets/_docs.scss b/assets/stylesheets/_docs.scss
index f0ff1616d4..51a77fae75 100644
--- a/assets/stylesheets/_docs.scss
+++ b/assets/stylesheets/_docs.scss
@@ -18,7 +18,7 @@
   }
 
   .thumbnail {
-    @media(min-width: $screen-sm-min) {
+    @include media-breakpoint-up(sm) {
       img {
         max-width: 200px;
       }
@@ -32,3 +32,26 @@
     margin-bottom: 20px;
   }
 }
+
+// transition code in Bootstrap 4 migration
+// https://github.com/twbs/bootstrap/commit/4fdd63a516cdce26c6914f2b7d11e0af0b08df17
+pre {
+  padding: 0.625rem;
+  border-radius: 4px;
+
+  code {
+    padding: 0;
+    font-size: inherit;
+    color: inherit;
+    white-space: pre-wrap;
+    background-color: transparent;
+  }
+}
+
+code {
+  padding: 0.125rem 0.25rem;
+  color: #c7254e;
+  background-color: #f9f2f4;
+  border-radius: 0.25rem;
+}
+// end of transition code in Bootstrap 4 migration
diff --git a/assets/stylesheets/_footer.scss b/assets/stylesheets/_footer.scss
index c4eb2613b3..ece1740c31 100644
--- a/assets/stylesheets/_footer.scss
+++ b/assets/stylesheets/_footer.scss
@@ -1,26 +1,15 @@
 /* Sticky footer styles
 -------------------------------------------------- */
-$footer-height: 75px;
+$footer-height: 4.6875rem;
 $footer-color: #55BCEB;
 
 html {
   position: relative;
   min-height: 100%;
 }
-body {
-  margin-bottom: $footer-height;
-}
 
 .footer {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  margin-top: 30px;
-  padding-top: 5px;
-
-  .row {
-    background-color: $footer-color;
-  }
+  background-color: $footer-color;
 
   .footer-logo {
     float: right;
@@ -41,7 +30,7 @@ body {
       display: inline-block;
 
       a {
-        line-height: $footer-height - 2*14;
+        line-height: $footer-height - $nav-link-padding-y * 2;
         color: black;
       }
 
diff --git a/assets/stylesheets/_navbar.scss b/assets/stylesheets/_navbar.scss
index 68281c68bb..05b6c972a8 100644
--- a/assets/stylesheets/_navbar.scss
+++ b/assets/stylesheets/_navbar.scss
@@ -4,6 +4,7 @@
 
 .navbar-brand {
   font-size: 32px;
+  margin: -3px 0;
 }
 
 .navbar {
diff --git a/assets/stylesheets/_opacity.scss b/assets/stylesheets/_opacity.scss
new file mode 100644
index 0000000000..1eb5ed895c
--- /dev/null
+++ b/assets/stylesheets/_opacity.scss
@@ -0,0 +1,16 @@
+// https://getbootstrap.com/docs/5.1/utilities/colors/#opacity
+// See also
+// https://github.com/twbs/bootstrap/blob/v5.1.3/scss/_utilities.scss#L27-L39
+// https://github.com/twbs/bootstrap/blob/v5.1.3/scss/mixins/_utilities.scss#L64-L72
+.text-opacity-50 {
+  --bs-text-opacity: 0.5;
+  color: rgba($body-color, var(--bs-text-opacity));
+}
+
+// Transition workaround for skipping improvement from Bootstrap 3.4.1 to Bootstrap 4.6.1
+// - Discussion: https://github.com/rubygems/bundler-site/pull/644#issuecomment-1178722939
+.text-opacity-40 {
+  --bs-text-opacity: 0.4;
+  color: rgba($body-color, var(--bs-text-opacity));
+}
+// /Transition workaround
diff --git a/assets/stylesheets/_search.scss b/assets/stylesheets/_search.scss
index abccfffb16..75aa7907d3 100644
--- a/assets/stylesheets/_search.scss
+++ b/assets/stylesheets/_search.scss
@@ -1,22 +1,8 @@
-.search-wrapper {
-  height: $navbar-height;
-  padding: ($navbar-height - 29)/2 0;
-  position: relative;
-
-  .form-control-feedback  {
-    line-height: 30px;
-    opacity: 0.4;
-  }
-}
-
-@media (min-width: $screen-md-min) {
-  .search-wrapper {
-    width: 300px;
-  }
-}
-
 .input-search {
   width: 100%;
+  min-width: 18.75rem;
+  margin-right: -2.25rem;
+  padding-right: 2.5rem;
   font-size: 18px;
   background: transparent;
   border: 0;
@@ -87,9 +73,3 @@
 .popover{
   max-width: 100%; /* Max Width of the popover (depending on the container!) */
 }
-
-@media (max-width: $screen-xs-max) {
-  .search-wrapper {
-    padding-left: 15px;
-  }
-}
diff --git a/assets/stylesheets/_sidebar.scss b/assets/stylesheets/_sidebar.scss
index c368a0a464..243c9c4283 100644
--- a/assets/stylesheets/_sidebar.scss
+++ b/assets/stylesheets/_sidebar.scss
@@ -123,10 +123,6 @@
     padding-left: 10px;
   }
 
-  #wrapper {
-    padding-left: 250px;
-  }
-
   #wrapper.toggled {
     padding-left: 0;
   }
@@ -141,7 +137,7 @@
   }
 
   #page-content-wrapper {
-    padding: 20px;
+    padding: 20px 20px 20px 250px;
     position: relative;
   }
 
diff --git a/assets/stylesheets/_team.scss b/assets/stylesheets/_team.scss
index 56b6782908..ddb5a172ac 100644
--- a/assets/stylesheets/_team.scss
+++ b/assets/stylesheets/_team.scss
@@ -1,16 +1,3 @@
-/*
- * To use, add:
- .col-xs-6.col-md-4
-   .thumbnail
-     .polygon-each-img-wrap
-       = image_tag 'team/square_image.jpg', class: 'polygon-clip-hexagon'
-     .caption.text-center
-       %h4
-         %b Name
-       %h5= link_to '@username', 'https://github.com/username'
- * to contributors.html.haml
-**/
-
 .clip-svg {
   width: 0;
   height: 0;
diff --git a/assets/stylesheets/application.css.scss b/assets/stylesheets/application.css.scss
index 716ce61a91..7c9b9cdd18 100644
--- a/assets/stylesheets/application.css.scss
+++ b/assets/stylesheets/application.css.scss
@@ -8,42 +8,48 @@ $navbar-height: 50px;
   src: url('fonts/SancoaleSlabNormRegular.otf') format("opentype");
 }
 
+@import "~bootstrap/scss/functions";
+
+pre {
+  color: #fff;
+  // https://github.com/twbs/bootstrap/pull/28966
+  background-color: #373737;
+  border-color: #373737;
+}
+$pre-color: #fff;
+
 @import "code.css";
 @import "bootstrap-overrides";
 
-$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
+$icon-font-path: '~bootstrap/assets/fonts/bootstrap/';
 
 // Core variables and mixins
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/mixins";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
 // Reset and dependencies
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/normalize";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/glyphicons";
+@import "~bootstrap/scss/reboot";
 // Core CSS
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/type";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/code";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/grid";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/tables";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/forms";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/buttons";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
 // Components
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/component-animations";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/dropdowns";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/navs";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/navbar";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/pagination";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/pager";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/thumbnails";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/media";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/media";
+@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/images";
 // Utility classes
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/utilities";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";
+@import "~bootstrap/scss/utilities";
 
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/modals";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/tooltip";
-@import "~bootstrap-sass/assets/stylesheets/bootstrap/popovers";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/popover";
 
 @import "navbar";
 @import "docs";
@@ -55,10 +61,8 @@ $icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
 @import "anchorjs";
 @import "search";
 
-.row {
-  margin-left: auto;
-  margin-right: auto;
-}
+// Utilities from Bootstrap 5.x
+@import "opacity";
 
 .row:after {
   clear: none;
@@ -87,7 +91,7 @@ $icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
   margin-bottom: 35px;
 }
 
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(sm) {
   .btn-responsive {
     font-size: 100%;
     text-align: center;
@@ -118,10 +122,6 @@ $icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
   width: 70%;
 }
 
-.main-wrapper {
-  padding-bottom: 50px;
-}
-
 .header {
   position: relative;
   height: $header-height;
@@ -142,14 +142,14 @@ p {
 .contents {
   font-size: 17px;
 
-  @media(min-width: $screen-lg-min) {
+  @include media-breakpoint-up(lg) {
     font-size: 18px;
   }
 
   .btn {
     font-size: 17px;
 
-    @media(min-width: $screen-lg-min) {
+    @include media-breakpoint-up(lg) {
       font-size: 18px;
     }
   }
diff --git a/package-lock.json b/package-lock.json
index 3e292c4a1e..45ca0c5f66 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "anchor-js": "^4.3.1",
-        "bootstrap-sass": "^3.4.1",
+        "bootstrap": "^4.6.1",
         "jquery": "^3.6.0",
         "lunr": "^0.7.0"
       },
@@ -751,10 +751,18 @@
         "node": "*"
       }
     },
-    "node_modules/bootstrap-sass": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/bootstrap-sass/-/bootstrap-sass-3.4.1.tgz",
-      "integrity": "sha512-p5rxsK/IyEDQm2CwiHxxUi0MZZtvVFbhWmyMOt4lLkA4bujDA1TGoKT0i1FKIWiugAdP+kK8T5KMDFIKQCLYIA=="
+    "node_modules/bootstrap": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.1.tgz",
+      "integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap"
+      },
+      "peerDependencies": {
+        "jquery": "1.9.1 - 3",
+        "popper.js": "^1.16.1"
+      }
     },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
@@ -2689,6 +2697,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.4",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.4.tgz",
@@ -4577,10 +4596,11 @@
       "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
       "dev": true
     },
-    "bootstrap-sass": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/bootstrap-sass/-/bootstrap-sass-3.4.1.tgz",
-      "integrity": "sha512-p5rxsK/IyEDQm2CwiHxxUi0MZZtvVFbhWmyMOt4lLkA4bujDA1TGoKT0i1FKIWiugAdP+kK8T5KMDFIKQCLYIA=="
+    "bootstrap": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.1.tgz",
+      "integrity": "sha512-0dj+VgI9Ecom+rvvpNZ4MUZJz8dcX7WCX+eTID9+/8HgOkv3dsRzi8BGeZJCQU6flWQVYxwTQnEZFrmJSEO7og==",
+      "requires": {}
     },
     "brace-expansion": {
       "version": "1.1.11",
@@ -6080,6 +6100,12 @@
         "find-up": "^4.0.0"
       }
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "peer": true
+    },
     "postcss": {
       "version": "8.4.4",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.4.tgz",
diff --git a/package.json b/package.json
index 562450c16e..a6487b19a8 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "anchor-js": "^4.3.1",
-    "bootstrap-sass": "^3.4.1",
+    "bootstrap": "^4.6.1",
     "jquery": "^3.6.0",
     "lunr": "^0.7.0"
   }
diff --git a/source/blog/index.html.haml b/source/blog/index.html.haml
index bf9e8e1c1a..2798a11663 100644
--- a/source/blog/index.html.haml
+++ b/source/blog/index.html.haml
@@ -1,8 +1,8 @@
 = partial 'partials/blog_header'
 
-.row
-  .container
-    .col-md-12.col-lg-10.col-lg-offset-1
+.container
+  .row.my-5
+    .col-md-12.col-xl-10.offset-xl-1
       .contents.blog
         %h2.title
           = link_to blog.articles.first.title, blog.articles.first.url
@@ -15,9 +15,8 @@
         .blog-content
           = blog.articles.first.render layout: false
 
-.row.btn-margin-top
-  .container
-    .col-md-12.col-lg-10.col-lg-offset-1
+  .row.my-5
+    .col-md-12.col-xl-10.offset-xl-1
       .contents.blog
         %h1 Previous Posts
         %ul.posts
diff --git a/source/contributors.html.haml b/source/contributors.html.haml
index f61331853c..bed5cf291b 100644
--- a/source/contributors.html.haml
+++ b/source/contributors.html.haml
@@ -5,7 +5,7 @@ title: Contributors
 .row.bg-light-blue.header
   = image_tag '/images/team_header_transparent_bg.png',
     srcset: '/images/team_header_transparent_bg.png 1x, /images/team_header_transparent_bg@2x.png 2x, /images/team_header_transparent_bg@3x.png 3x',
-    class: 'img-responsive header-padding',
+    class: 'img-fluid header-padding',
     style: 'max-width: 460px; padding-bottom: 10px; width: 78%;'
 
 :css
@@ -21,8 +21,9 @@ title: Contributors
 
 .container
   .row
-    %h3 Maintainers
-  .row.team
+    .col
+      %h3 Maintainers
+  .row.row-cols-2.row-cols-md-3.row-cols-lg-4.team
     = team_member("indirect", "André Arko")
     = team_member("segiddins", "Samuel Giddins")
     = team_member("colby-swandale", "Colby Swandale")
@@ -32,20 +33,21 @@ title: Contributors
     = team_member("rubymorillo", "Stephanie Morillo")
 
   .row
-    %h3 Website team
-  .row.team
+    .col
+      %h3 Website team
+  .row.row-cols-2.row-cols-md-3.row-cols-lg-4.team
     = team_member("sailorhg", "Amy Wibowo")
     = team_member("kruczjak", "Jakub Kruczek")
 
-.container
   .row
-    %h3 And many, many thanks to all of our contributors throughout the years, including:
-    %br
+    .col
+      %h3 And many, many thanks to all of our contributors throughout the years, including:
   .row
-    - data.contributors.each do |c|
-      %span.contributor
-        = link_to c[:name], c[:href], title: "#{pluralize(c[:commits], "commit")}"
-        = "&nbsp;•&nbsp;" unless c == data.contributors.last
-    %p
+    .col
+      - data.contributors.each do |c|
+        %span.contributor
+          = link_to c[:name], c[:href], title: "#{pluralize(c[:commits], "commit")}"
+          = "&nbsp;•&nbsp;" unless c == data.contributors.last
       %br
-      …and everyone who has given time, effort, thought, or help, instead of git commits &lt;3
+      %p
+        …and everyone who has given time, effort, thought, or help, instead of git commits &lt;3
diff --git a/source/layouts/_footer.haml b/source/layouts/_footer.haml
index 5931d8b74a..7bb2f126dd 100644
--- a/source/layouts/_footer.haml
+++ b/source/layouts/_footer.haml
@@ -1,7 +1,6 @@
-.row
-  .container.text-center
-    %ul.nav.navbar-nav
-      %li= link_to t('navbar.docs'), "/docs.html"
-      %li= link_to t('navbar.team'), "/contributors.html"
-      %li= link_to t('navbar.blog'), "/blog"
-      %li= link_to t('navbar.repository'), "https://github.com/rubygems/rubygems/tree/master/bundler"
+%nav.navbar.justify-content-center
+  %ul.navbar-nav
+    %li.nav-item= link_to t('navbar.docs'), "/docs.html", class: "nav-link px-3"
+    %li.nav-item= link_to t('navbar.team'), "/contributors.html", class: "nav-link px-3"
+    %li.nav-item= link_to t('navbar.blog'), "/blog", class: "nav-link px-3"
+    %li.nav-item= link_to t('navbar.repository'), "https://github.com/rubygems/rubygems/tree/master/bundler", class: "nav-link px-3"
diff --git a/source/layouts/_navbar.haml b/source/layouts/_navbar.haml
index 0bbd6b795f..93da8410d9 100644
--- a/source/layouts/_navbar.haml
+++ b/source/layouts/_navbar.haml
@@ -1,21 +1,14 @@
-%nav.navbar.navbar-default
-  .container
-    .navbar-header
-      %button.navbar-toggle.collapsed{type: 'button', data: { toggle: 'collapse', target: '#bs-navbar-collapse' }, 'aria-expanded': 'false' }
-        %span.sr-only= t('navbar.toggle_navigation')
-        %span.icon-bar
-        %span.icon-bar
-        %span.icon-bar
-      %b= link_to 'Bundler', '/', class: 'navbar-brand'
-
-    .collapse.navbar-collapse{id: 'bs-navbar-collapse'}
-      %ul.nav.navbar-nav.navbar-right
-        %li
-          .search-wrapper
-            .form-group.has-feedback
-              %i.glyphicon.glyphicon-search.form-control-feedback
-              %input#input-search.input-search{type: :text, placeholder: t('search.placeholder')}
-        %li= link_to t('navbar.docs'), '/docs.html'
-        %li= link_to t('navbar.team'), '/contributors.html'
-        %li= link_to t('navbar.blog'), '/blog'
-        %li= link_to t('navbar.repository'), 'https://github.com/rubygems/rubygems/tree/master/bundler', target: '_blank', rel: 'noopener noreferrer'
+%link{rel: "stylesheet", href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css", integrity: "sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==", crossorigin: "anonymous", referrerpolicy: "no-referrer"}
+%nav.navbar.navbar-expand-md.navbar-light.container-md.justify-content-between
+  = link_to 'Bundler', '/', class: "navbar-brand mr-auto font-weight-bold"
+  %button.navbar-toggler{type: "button", "data-toggle": "collapse", "data-target": "#bs-navbar-collapse", "aria-controls": "bs-navbar-collapse", "aria-expanded": "false", "aria-label": "Toggle navigation"}
+    %span.navbar-toggler-icon
+  .collapse.navbar-collapse.flex-grow-0#bs-navbar-collapse
+    %ul.nav.navbar-nav
+      %li.nav-item
+        %input#input-search.input-search.my-1.pl-1.pt-1{type: :text, placeholder: t('search.placeholder')}
+        %i.fa.fa-search.text-opacity-40.px-1.py-2
+      %li.nav-item= link_to t('navbar.docs'), '/docs.html', class: "nav-link"
+      %li.nav-item= link_to t('navbar.team'), '/contributors.html', class: "nav-link"
+      %li.nav-item= link_to t('navbar.blog'), '/blog', class: "nav-link"
+      %li.nav-item= link_to t('navbar.repository'), 'https://github.com/rubygems/rubygems/tree/master/bundler', target: '_blank', rel: 'noopener noreferrer', class: "nav-link"
diff --git a/source/layouts/base.haml b/source/layouts/base.haml
index cced318a6e..284c690abf 100644
--- a/source/layouts/base.haml
+++ b/source/layouts/base.haml
@@ -24,7 +24,7 @@
   %body{class: current_page.data.page_classes || ''}
     = partial 'layouts/navbar'
 
-    .main-wrapper
+    .main-wrapper.container-fluid
       ~ yield
 
       = yield_content :tail
diff --git a/source/layouts/blog_layout.haml b/source/layouts/blog_layout.haml
index c2b22799ce..324dc6c1d2 100644
--- a/source/layouts/blog_layout.haml
+++ b/source/layouts/blog_layout.haml
@@ -1,8 +1,8 @@
 ~ wrap_layout :base do
   = partial 'partials/blog_header'
   .container
-    .row
-      .col-md-12.col-lg-10.col-lg-offset-1
+    .row.my-5
+      .col-md-12.col-xl-10.offset-xl-1
         .contents.blog
           %h2.title
             = link_to current_article.title, current_article.url
diff --git a/source/layouts/commands_layout.haml b/source/layouts/commands_layout.haml
index 97fbe8baf6..dd3f361725 100644
--- a/source/layouts/commands_layout.haml
+++ b/source/layouts/commands_layout.haml
@@ -12,12 +12,12 @@
   .row.bg-light-blue.header
     = image_tag '/images/docs_header_transparent_bg.png',
       srcset: '/images/docs_header_transparent_bg.png 1x, /images/docs_header_transparent_bg@2x.png 2x, /images/docs_header_transparent_bg@3x.png 3x',
-      class: 'img-responsive header-padding',
+      class: 'img-fluid header-padding',
       style: 'max-width: 400px;'
   .row
     .container
       #wrapper
-        #sidebar-wrapper
+        #sidebar-wrapper.col.d-none.d-sm-block
           .sidebar-nav
             = partial 'partials/commands_sidebar'
         #page-content-wrapper.commands.contents
@@ -26,13 +26,8 @@
 
   .row
     .container
-      #bottom-sidebar-wrapper.hidden-lg.hidden-md.hidden-sm
+      #bottom-sidebar-wrapper.d-block.d-sm-none
         .bottom-sidebar-nav
           = partial 'partials/commands_sidebar'
 
   = javascript_include_tag 'commands_layout.min'
-
-:css
-  .main-wrapper {
-    padding-bottom: 0;
-  }
diff --git a/source/layouts/guides_layout.haml b/source/layouts/guides_layout.haml
index 443b4fa3f8..a36ea963c5 100644
--- a/source/layouts/guides_layout.haml
+++ b/source/layouts/guides_layout.haml
@@ -11,7 +11,7 @@
   .row.bg-light-blue.header
     = image_tag '/images/docs_header_transparent_bg.png',
       srcset: '/images/docs_header_transparent_bg.png 1x, /images/docs_header_transparent_bg@2x.png 2x, /images/docs_header_transparent_bg@3x.png 3x',
-      class: 'img-responsive header-padding',
+      class: 'img-fluid header-padding',
       style: 'max-width: 400px;'
   .row
     #guide-container.container
@@ -19,8 +19,3 @@
         ~ yield
 
   = javascript_include_tag 'anchors.min'
-
-:css
-  .main-wrapper {
-    padding-bottom: 0;
-  }
diff --git a/source/layouts/md_guides_layout.haml b/source/layouts/md_guides_layout.haml
index c1a2363717..12ffecd721 100644
--- a/source/layouts/md_guides_layout.haml
+++ b/source/layouts/md_guides_layout.haml
@@ -14,12 +14,12 @@
   .row.bg-light-blue.header
     = image_tag '/images/docs_header_transparent_bg.png',
       srcset: '/images/docs_header_transparent_bg.png 1x, /images/docs_header_transparent_bg@2x.png 2x, /images/docs_header_transparent_bg@3x.png 3x',
-      class: 'img-responsive header-padding',
+      class: 'img-fluid header-padding',
       style: 'max-width: 400px;'
   .row
     #guide-container.container
       #wrapper
-        #sidebar-wrapper.hidden-xs
+        #sidebar-wrapper.d-none.d-sm-block
           .sidebar-nav
             %h4 Guides
             = partial 'partials/guides_sidebar'
@@ -28,13 +28,8 @@
 
   .row
     .container
-      #bottom-sidebar-wrapper.hidden-lg.hidden-md.hidden-sm
+      #bottom-sidebar-wrapper.d-sm-none
         .bottom-sidebar-nav
           = partial 'partials/guides_sidebar'
 
   = javascript_include_tag 'anchors.min'
-
-:css
-  .main-wrapper {
-    padding-bottom: 0;
-  }
diff --git a/source/localizable/index.html.haml b/source/localizable/index.html.haml
index 9b810ea60b..0394b91975 100644
--- a/source/localizable/index.html.haml
+++ b/source/localizable/index.html.haml
@@ -3,7 +3,7 @@
     .col-md-12
       = image_tag '/images/header_transparent_bg.png',
         srcset: '/images/header_transparent_bg.png 1x, /images/header_transparent_bg@2x.png 2x, /images/header_transparent_bg@3x.png 3x',
-        class: 'img-responsive'
+        class: 'img-fluid'
 
 .row.btn-margin-top
   .container
@@ -51,7 +51,7 @@
             gem 'rack', '~> 2.0.1'
             gem 'rspec'
           %p.center-on-xs
-            = link_to t('home.learn_more_gemfile'), './gemfile.html', class: 'btn btn-primary btn-lg pull-right btn-responsive'
+            = link_to t('home.learn_more_gemfile'), './gemfile.html', class: 'btn btn-primary btn-lg float-right btn-responsive'
         .clearfix
 
         .bullet
@@ -61,7 +61,7 @@
             $ bundle install
             $ git add Gemfile Gemfile.lock
           %p.center-on-xs
-            = link_to t('home.learn_more_bundle_install'), "./#{current_version}/man/bundle-install.1.html", class: 'btn btn-primary btn-lg pull-right btn-responsive'
+            = link_to t('home.learn_more_bundle_install'), "./#{current_version}/man/bundle-install.1.html", class: 'btn btn-primary btn-lg float-right btn-responsive'
 
 .row.bg-light-blue
   .container
@@ -76,8 +76,3 @@
           = link_to 'Join the Bundler Slack', 'http://slack.bundler.io', class: 'btn btn-primary'
           = link_to 'Contributing guide', 'https://github.com/rubygems/rubygems/blob/master/bundler/doc/contributing/README.md', class: 'btn btn-primary'
           = link_to 'Report security issue', 'https://hackerone.com/rubygems', class: 'btn btn-primary'
-
-:css
-  .main-wrapper {
-    padding-bottom: 0;
-  }
diff --git a/source/older_versions.html.haml b/source/older_versions.html.haml
index 7ed5d1a95b..5c065ddc51 100644
--- a/source/older_versions.html.haml
+++ b/source/older_versions.html.haml
@@ -4,6 +4,6 @@ title: Older Versions of Bundler
 .container
   %h2 Older Versions of Bundler
   .row
-    .col-sm-12.text-center
+    .col-12.text-center
       - versions.reverse.select{ |version| path_exist?('docs', version) || path_exist?('index', version) }.each do |v|
-        = link_to v, "/#{v}/#{path_exist?('docs', v) ? 'docs' : 'index'}.html", class: "btn btn-sm #{current_visible_version == v ? 'btn-default' : 'btn-primary'}"
+        = link_to v, "/#{v}/#{path_exist?('docs', v) ? 'docs' : 'index'}.html", class: "btn btn-sm #{current_visible_version == v ? 'btn-secondary' : 'btn-primary'}"
diff --git a/source/partials/_blog_header.haml b/source/partials/_blog_header.haml
index 779e90911d..eb8a0050ff 100644
--- a/source/partials/_blog_header.haml
+++ b/source/partials/_blog_header.haml
@@ -1,5 +1,5 @@
 .row.bg-light-blue.header
   = image_tag '/images/blog_header_transparent_bg.png',
     srcset: '/images/blog_header_transparent_bg.png 1x, /images/blog_header_transparent_bg@2x.png 2x, /images/blog_header_transparent_bg@3x.png 3x',
-    class: 'img-responsive header-padding',
+    class: 'img-fluid header-padding',
     style: 'max-width: 350px; padding-top: 5px; width: 64%;'
diff --git a/source/partials/_team_member.haml b/source/partials/_team_member.haml
index 3c6dfaaffa..10f361a1cf 100644
--- a/source/partials/_team_member.haml
+++ b/source/partials/_team_member.haml
@@ -1,8 +1,8 @@
-.col-xs-6.col-sm-4.col-md-3
-  .thumbnail
+.col
+  .card.m-4
     .polygon-each-img-wrap
       = image_tag "team/#{login}.jpg", class: "polygon-clip-hexagon"
-    .caption.text-center
+    .card-body.caption.text-center
       %h4
         %b= name
       %h5= link_to "@#{login}", "https://github.com/#{login}"
diff --git a/source/shared/_whats_new.haml b/source/shared/_whats_new.haml
index 0366dfa54d..51e00d3cfb 100644
--- a/source/shared/_whats_new.haml
+++ b/source/shared/_whats_new.haml
@@ -1,5 +1,5 @@
 %h1 What's New in each Release
 .row
-  .col-sm-12
+  .col-12
     - versions.reverse.select{ |version| path_exist?('whats_new', version) }.each do |v|
-      = link_to v, "/#{v}/whats_new.html", class: "btn btn-sm #{current_visible_version == v ? 'btn-default' : 'btn-primary'}"
+      = link_to v, "/#{v}/whats_new.html", class: "btn btn-sm #{current_visible_version == v ? 'btn-secondary' : 'btn-primary'}"
diff --git a/source/v1.12/docs.html.haml b/source/v1.12/docs.html.haml
index e56a40036e..248d66310d 100644
--- a/source/v1.12/docs.html.haml
+++ b/source/v1.12/docs.html.haml
@@ -8,12 +8,12 @@ description: Main Docs page with all available resources
 .row.bg-light-blue.header
   = image_tag '/images/docs_header_transparent_bg.png',
     srcset: '/images/docs_header_transparent_bg.png 1x, /images/docs_header_transparent_bg@2x.png 2x, /images/docs_header_transparent_bg@3x.png 3x',
-    class: 'img-responsive header-padding',
+    class: 'img-fluid header-padding',
     style: 'max-width: 400px;'
 
-.row.docs
-  .container
-    .col-sm-5.col-sm-offset-0.col-xs-9.col-xs-offset-2
+.container
+  .row.docs.my-5
+    .col-md-5.offset-md-0.col-9.offset-2
       %h3
         %b Guides
       %ul.ul-padding
@@ -39,7 +39,7 @@ description: Main Docs page with all available resources
         %li= link_to 'Sinatra', "/#{current_visible_version}/sinatra.html"
         %li= link_to 'RubyGems', "/#{current_visible_version}/rubygems.html"
 
-    .col-sm-4.col-sm-offset-0.col-xs-9.col-xs-offset-2
+    .col-md-4.offset-md-0.col-9.offset-2
       %h3
         %b Reference
       %h4
@@ -54,7 +54,7 @@ description: Main Docs page with all available resources
         - other_commands(primary_commands).each do |page|
           %li= link_to_documentation(page)
 
-    .col-sm-2.col-sm-offset-0.col-xs-9.col-xs-offset-2
+    .col-md-2.offset-md-0.col-9.offset-2
       %h3
         %b Release Notes
       %h4
diff --git a/source/v1.13/docs.html.haml b/source/v1.13/docs.html.haml
index 0675a18e3a..2aa6008a48 100644
--- a/source/v1.13/docs.html.haml
+++ b/source/v1.13/docs.html.haml
@@ -3,12 +3,12 @@
 .row.bg-light-blue.header
   = image_tag '/images/docs_header_transparent_bg.png',
     srcset: '/images/docs_header_transparent_bg.png 1x, /images/docs_header_transparent_bg@2x.png 2x, /images/docs_header_transparent_bg@3x.png 3x',
-    class: 'img-responsive header-padding',
+    class: 'img-fluid header-padding',
     style: 'max-width: 400px;'
 
-.row.docs
-  .container
-    .col-sm-5.col-sm-offset-0.col-xs-9.col-xs-offset-2
+.container
+  .row.docs.my-5
+    .col-md-5.offset-md-0.col-9.offset-2
       %h3
         %b Guides
       %ul.ul-padding
@@ -32,7 +32,7 @@
         %li= link_to 'Sinatra', "/#{current_visible_version}/sinatra.html"
         %li= link_to 'RubyGems', "/#{current_visible_version}/rubygems.html"
 
-    .col-sm-4.col-sm-offset-0.col-xs-9.col-xs-offset-2
+    .col-md-4.offset-md-0.col-9.offset-2
       %h3
         %b Reference
       %h4
@@ -47,7 +47,7 @@
         - other_commands(primary_commands).each do |page|
           %li= link_to_documentation(page)
 
-    .col-sm-2.col-sm-offset-0.col-xs-9.col-xs-offset-2
+    .col-md-2.offset-md-0.col-9.offset-2
       %h3
         %b Release Notes
       %h4
diff --git a/source/v1.14/docs.html.haml b/source/v1.14/docs.html.haml
index 0675a18e3a..2aa6008a48 100644
--- a/source/v1.14/docs.html.haml
+++ b/source/v1.14/docs.html.haml
@@ -3,12 +3,12 @@
 .row.bg-light-blue.header
   = image_tag '/images/docs_header_transparent_bg.png',
     srcset: '/images/docs_header_transparent_bg.png 1x, /images/docs_header_transparent_bg@2x.png 2x, /images/docs_header_transparent_bg@3x.png 3x',
-    class: 'img-responsive header-padding',
+    class: 'img-fluid header-padding',
     style: 'max-width: 400px;'
 
-.row.docs
-  .container
-    .col-sm-5.col-sm-offset-0.col-xs-9.col-xs-offset-2
+.container
+  .row.docs.my-5
+    .col-md-5.offset-md-0.col-9.offset-2
       %h3
         %b Guides
       %ul.ul-padding
@@ -32,7 +32,7 @@
         %li= link_to 'Sinatra', "/#{current_visible_version}/sinatra.html"
         %li= link_to 'RubyGems', "/#{current_visible_version}/rubygems.html"
 
-    .col-sm-4.col-sm-offset-0.col-xs-9.col-xs-offset-2
+    .col-md-4.offset-md-0.col-9.offset-2
       %h3
         %b Reference
       %h4
@@ -47,7 +47,7 @@
         - other_commands(primary_commands).each do |page|
           %li= link_to_documentation(page)
 
-    .col-sm-2.col-sm-offset-0.col-xs-9.col-xs-offset-2
+    .col-md-2.offset-md-0.col-9.offset-2
       %h3
         %b Release Notes
       %h4
diff --git a/source/v1.15/docs.html.haml b/source/v1.15/docs.html.haml
index 22f62d1cf8..14eaf4de53 100644
--- a/source/v1.15/docs.html.haml
+++ b/source/v1.15/docs.html.haml
@@ -3,19 +3,19 @@
 .row.bg-light-blue.header
   = image_tag '/images/docs_header_transparent_bg.png',
     srcset: '/images/docs_header_transparent_bg.png 1x, /images/docs_header_transparent_bg@2x.png 2x, /images/docs_header_transparent_bg@3x.png 3x',
-    class: 'img-responsive header-padding',
+    class: 'img-fluid header-padding',
     style: 'max-width: 400px;'
 
-.row.docs
-  .container
-    .col-sm-5.col-sm-offset-0.col-xs-9.col-xs-offset-2
+.container
+  .row.docs.my-5
+    .col-md-5.offset-md-0.col-9.offset-2
       %h3
         %b Guides
       %ul.ul-padding
         - guides.each do |guide|
           %li= link_to_guide guide
 
-    .col-sm-4.col-sm-offset-0.col-xs-9.col-xs-offset-2
+    .col-md-4.offset-md-0.col-9.offset-2
       %h3
         %b Reference
       %h4
@@ -30,7 +30,7 @@
         - other_commands(primary_commands).each do |page|
           %li= link_to_documentation(page)
 
-    .col-sm-2.col-sm-offset-0.col-xs-9.col-xs-offset-2
+    .col-md-2.offset-md-0.col-9.offset-2
       %h3
         %b Release Notes
       %h4
diff --git a/source/v1.16/docs.html.haml b/source/v1.16/docs.html.haml
index 3312b31d3a..b73d4fa6b2 100644
--- a/source/v1.16/docs.html.haml
+++ b/source/v1.16/docs.html.haml
@@ -3,12 +3,12 @@
 .row.bg-light-blue.header
   = image_tag '/images/docs_header_transparent_bg.png',
     srcset: '/images/docs_header_transparent_bg.png 1x, /images/docs_header_transparent_bg@2x.png 2x, /images/docs_header_transparent_bg@3x.png 3x',
-    class: 'img-responsive header-padding',
+    class: 'img-fluid header-padding',
     style: 'max-width: 400px;'
 
-.row.docs
-  .container
-    .col-sm-5.col-sm-offset-0.col-xs-9.col-xs-offset-2
+.container
+  .row.docs.my-5
+    .col-md-5.offset-md-0.col-9.offset-2
       %h3
         %b Guides
       %p
@@ -17,7 +17,7 @@
         - guides.each do |guide|
           %li= link_to_guide guide
 
-    .col-sm-4.col-sm-offset-0.col-xs-9.col-xs-offset-2
+    .col-md-4.offset-md-0.col-9.offset-2
       %h3
         %b Reference Guides
       %p
@@ -34,7 +34,7 @@
         - other_commands(primary_commands).each do |page|
           %li= link_to_documentation(page)
 
-    .col-sm-2.col-sm-offset-0.col-xs-9.col-xs-offset-2
+    .col-md-2.offset-md-0.col-9.offset-2
       %h3
         %b Release Notes
       %h4
diff --git a/source/v1.17/docs.html.haml b/source/v1.17/docs.html.haml
index 3312b31d3a..b73d4fa6b2 100644
--- a/source/v1.17/docs.html.haml
+++ b/source/v1.17/docs.html.haml
@@ -3,12 +3,12 @@
 .row.bg-light-blue.header
   = image_tag '/images/docs_header_transparent_bg.png',
     srcset: '/images/docs_header_transparent_bg.png 1x, /images/docs_header_transparent_bg@2x.png 2x, /images/docs_header_transparent_bg@3x.png 3x',
-    class: 'img-responsive header-padding',
+    class: 'img-fluid header-padding',
     style: 'max-width: 400px;'
 
-.row.docs
-  .container
-    .col-sm-5.col-sm-offset-0.col-xs-9.col-xs-offset-2
+.container
+  .row.docs.my-5
+    .col-md-5.offset-md-0.col-9.offset-2
       %h3
         %b Guides
       %p
@@ -17,7 +17,7 @@
         - guides.each do |guide|
           %li= link_to_guide guide
 
-    .col-sm-4.col-sm-offset-0.col-xs-9.col-xs-offset-2
+    .col-md-4.offset-md-0.col-9.offset-2
       %h3
         %b Reference Guides
       %p
@@ -34,7 +34,7 @@
         - other_commands(primary_commands).each do |page|
           %li= link_to_documentation(page)
 
-    .col-sm-2.col-sm-offset-0.col-xs-9.col-xs-offset-2
+    .col-md-2.offset-md-0.col-9.offset-2
       %h3
         %b Release Notes
       %h4
diff --git a/source/v2.0/docs.html.haml b/source/v2.0/docs.html.haml
index 3312b31d3a..b73d4fa6b2 100644
--- a/source/v2.0/docs.html.haml
+++ b/source/v2.0/docs.html.haml
@@ -3,12 +3,12 @@
 .row.bg-light-blue.header
   = image_tag '/images/docs_header_transparent_bg.png',
     srcset: '/images/docs_header_transparent_bg.png 1x, /images/docs_header_transparent_bg@2x.png 2x, /images/docs_header_transparent_bg@3x.png 3x',
-    class: 'img-responsive header-padding',
+    class: 'img-fluid header-padding',
     style: 'max-width: 400px;'
 
-.row.docs
-  .container
-    .col-sm-5.col-sm-offset-0.col-xs-9.col-xs-offset-2
+.container
+  .row.docs.my-5
+    .col-md-5.offset-md-0.col-9.offset-2
       %h3
         %b Guides
       %p
@@ -17,7 +17,7 @@
         - guides.each do |guide|
           %li= link_to_guide guide
 
-    .col-sm-4.col-sm-offset-0.col-xs-9.col-xs-offset-2
+    .col-md-4.offset-md-0.col-9.offset-2
       %h3
         %b Reference Guides
       %p
@@ -34,7 +34,7 @@
         - other_commands(primary_commands).each do |page|
           %li= link_to_documentation(page)
 
-    .col-sm-2.col-sm-offset-0.col-xs-9.col-xs-offset-2
+    .col-md-2.offset-md-0.col-9.offset-2
       %h3
         %b Release Notes
       %h4
diff --git a/source/v2.1/docs.html.haml b/source/v2.1/docs.html.haml
index 3312b31d3a..b73d4fa6b2 100644
--- a/source/v2.1/docs.html.haml
+++ b/source/v2.1/docs.html.haml
@@ -3,12 +3,12 @@
 .row.bg-light-blue.header
   = image_tag '/images/docs_header_transparent_bg.png',
     srcset: '/images/docs_header_transparent_bg.png 1x, /images/docs_header_transparent_bg@2x.png 2x, /images/docs_header_transparent_bg@3x.png 3x',
-    class: 'img-responsive header-padding',
+    class: 'img-fluid header-padding',
     style: 'max-width: 400px;'
 
-.row.docs
-  .container
-    .col-sm-5.col-sm-offset-0.col-xs-9.col-xs-offset-2
+.container
+  .row.docs.my-5
+    .col-md-5.offset-md-0.col-9.offset-2
       %h3
         %b Guides
       %p
@@ -17,7 +17,7 @@
         - guides.each do |guide|
           %li= link_to_guide guide
 
-    .col-sm-4.col-sm-offset-0.col-xs-9.col-xs-offset-2
+    .col-md-4.offset-md-0.col-9.offset-2
       %h3
         %b Reference Guides
       %p
@@ -34,7 +34,7 @@
         - other_commands(primary_commands).each do |page|
           %li= link_to_documentation(page)
 
-    .col-sm-2.col-sm-offset-0.col-xs-9.col-xs-offset-2
+    .col-md-2.offset-md-0.col-9.offset-2
       %h3
         %b Release Notes
       %h4
diff --git a/source/v2.2/docs.html.haml b/source/v2.2/docs.html.haml
index 3312b31d3a..b73d4fa6b2 100644
--- a/source/v2.2/docs.html.haml
+++ b/source/v2.2/docs.html.haml
@@ -3,12 +3,12 @@
 .row.bg-light-blue.header
   = image_tag '/images/docs_header_transparent_bg.png',
     srcset: '/images/docs_header_transparent_bg.png 1x, /images/docs_header_transparent_bg@2x.png 2x, /images/docs_header_transparent_bg@3x.png 3x',
-    class: 'img-responsive header-padding',
+    class: 'img-fluid header-padding',
     style: 'max-width: 400px;'
 
-.row.docs
-  .container
-    .col-sm-5.col-sm-offset-0.col-xs-9.col-xs-offset-2
+.container
+  .row.docs.my-5
+    .col-md-5.offset-md-0.col-9.offset-2
       %h3
         %b Guides
       %p
@@ -17,7 +17,7 @@
         - guides.each do |guide|
           %li= link_to_guide guide
 
-    .col-sm-4.col-sm-offset-0.col-xs-9.col-xs-offset-2
+    .col-md-4.offset-md-0.col-9.offset-2
       %h3
         %b Reference Guides
       %p
@@ -34,7 +34,7 @@
         - other_commands(primary_commands).each do |page|
           %li= link_to_documentation(page)
 
-    .col-sm-2.col-sm-offset-0.col-xs-9.col-xs-offset-2
+    .col-md-2.offset-md-0.col-9.offset-2
       %h3
         %b Release Notes
       %h4
diff --git a/source/v2.3/docs.html.haml b/source/v2.3/docs.html.haml
index 3312b31d3a..b73d4fa6b2 100644
--- a/source/v2.3/docs.html.haml
+++ b/source/v2.3/docs.html.haml
@@ -3,12 +3,12 @@
 .row.bg-light-blue.header
   = image_tag '/images/docs_header_transparent_bg.png',
     srcset: '/images/docs_header_transparent_bg.png 1x, /images/docs_header_transparent_bg@2x.png 2x, /images/docs_header_transparent_bg@3x.png 3x',
-    class: 'img-responsive header-padding',
+    class: 'img-fluid header-padding',
     style: 'max-width: 400px;'
 
-.row.docs
-  .container
-    .col-sm-5.col-sm-offset-0.col-xs-9.col-xs-offset-2
+.container
+  .row.docs.my-5
+    .col-md-5.offset-md-0.col-9.offset-2
       %h3
         %b Guides
       %p
@@ -17,7 +17,7 @@
         - guides.each do |guide|
           %li= link_to_guide guide
 
-    .col-sm-4.col-sm-offset-0.col-xs-9.col-xs-offset-2
+    .col-md-4.offset-md-0.col-9.offset-2
       %h3
         %b Reference Guides
       %p
@@ -34,7 +34,7 @@
         - other_commands(primary_commands).each do |page|
           %li= link_to_documentation(page)
 
-    .col-sm-2.col-sm-offset-0.col-xs-9.col-xs-offset-2
+    .col-md-2.offset-md-0.col-9.offset-2
       %h3
         %b Release Notes
       %h4