diff --git a/package.json b/package.json
index a447463a38..b54e33b00e 100644
--- a/package.json
+++ b/package.json
@@ -18,9 +18,6 @@
     "pnpm": ">=9.12.3"
   },
   "packageManager": "pnpm@9.15.2",
-  "dependencies": {
-    "bootstrap-scss": "^4.6.2"
-  },
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0",
     "@types/hast": "^3.0.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0b6e1b9292..efa32fbe93 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,10 +7,6 @@ settings:
 importers:
 
   .:
-    dependencies:
-      bootstrap-scss:
-        specifier: ^4.6.2
-        version: 4.6.2
     devDependencies:
       '@11ty/eleventy':
         specifier: ^3.0.0
@@ -771,9 +767,6 @@ packages:
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
-  bootstrap-scss@4.6.2:
-    resolution: {integrity: sha512-emVpCI/S9aeFV1/qqKrztPZLiyow4XfRWLxOAu2SR/67Vau0y6IHNRukQrTx8+OUQ+aVPDhql40eDHSxGoAceA==}
-
   boxen@5.1.2:
     resolution: {integrity: sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==}
     engines: {node: '>=10'}
@@ -3941,8 +3934,6 @@ snapshots:
 
   boolbase@1.0.0: {}
 
-  bootstrap-scss@4.6.2: {}
-
   boxen@5.1.2:
     dependencies:
       ansi-align: 3.0.1
diff --git a/src/_11ty/plugins/markdown.ts b/src/_11ty/plugins/markdown.ts
index 0a9c2c7388..a7f65130d7 100644
--- a/src/_11ty/plugins/markdown.ts
+++ b/src/_11ty/plugins/markdown.ts
@@ -65,7 +65,7 @@ function _registerAside(markdown: MarkdownIt, id: string, defaultTitle: string |
         const title = parsedArgs?.[1] ?? defaultTitle ?? '';
         return `<aside class="alert ${style}">
 <div class="alert-header">
-${icon !== null ? `<i class="material-symbols" aria-hidden="true">${icon}</i>` : ''}
+${icon !== null ? `<span class="material-symbols" aria-hidden="true">${icon}</span>` : ''}
 <span>${title ?? ''}</span>
 </div>
 <div class="alert-content">
diff --git a/src/_includes/banner.html b/src/_includes/banner.html
index 52ea002f47..620323ce95 100644
--- a/src/_includes/banner.html
+++ b/src/_includes/banner.html
@@ -1,5 +1,5 @@
 <div class="banner">
-  <p class="banner__text">
+  <p>
     Dart 3.6 is here! Read the
     <a href="https://medium.com/dartlang/announcing-dart-3-6-778dd7a80983" target="_blank">blog post</a>
     to learn about new features in pub and the language.
diff --git a/src/_includes/cookie-notice.html b/src/_includes/cookie-notice.html
index edbb6b27ef..f1460e6375 100644
--- a/src/_includes/cookie-notice.html
+++ b/src/_includes/cookie-notice.html
@@ -4,6 +4,6 @@
       enhance the quality of its services and to analyze traffic.
       <a href="https://policies.google.com/technologies/cookies" target="_blank" rel="noopener">Learn more</a>.
     </p>
-    <button id="cookie-consent" class="btn btn-primary">OK, got it</button>
+    <button id="cookie-consent" class="filled-button">OK, got it</button>
   </div>
 </section>
diff --git a/src/_includes/head.html b/src/_includes/head.html
index 04c9cd3737..58363e18ae 100644
--- a/src/_includes/head.html
+++ b/src/_includes/head.html
@@ -78,17 +78,12 @@
           integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
           crossorigin="anonymous"
           referrerpolicy="no-referrer"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"
-          integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+"
-          crossorigin="anonymous"
-          referrerpolicy="no-referrer"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.5/js.cookie.min.js"
           integrity="sha512-nlp9/l96/EpjYBx7EP7pGASVXNe80hGhYAUrjeXnu/fyF5Py0/RXav4BBNs7n5Hx1WFhOEOWSAVjGeC3oKxDVQ=="
           crossorigin="anonymous"
           referrerpolicy="no-referrer"></script>
-  
+
   <script src="{{ '/assets/js/os-tabs.js' | append: cache_bust }}"></script>
-  <script src="{{ '/assets/js/utilities.js' | append: cache_bust }}"></script>
   <script src="{{ '/assets/js/main.js' | append: cache_bust }}"></script>
 
   {% if js -%}
diff --git a/src/_includes/page-header.html b/src/_includes/page-header.html
index 4f218d69a0..c694ec21f3 100644
--- a/src/_includes/page-header.html
+++ b/src/_includes/page-header.html
@@ -1,3 +1,4 @@
+{% if site.show_banner -%} {% render 'banner.html' %} {%- endif -%}
 <header id="page-header" class="site-header">
   {% include 'navigation-main.html' %}
   {% if obsolete -%}
@@ -10,4 +11,3 @@ <h4 class="text-center">
   {% endif -%}
   {% endif -%}
 </header>
-{% if site.show_banner -%} {% render 'banner.html' %} {%- endif -%}
diff --git a/src/_sass/_books.scss b/src/_sass/_books.scss
index 2765bb2b29..950462e79e 100644
--- a/src/_sass/_books.scss
+++ b/src/_sass/_books.scss
@@ -1,21 +1,22 @@
-@use 'core/bootstrap';
-
 .book-img-with-details {
   margin-bottom: 1.5rem;
 
   img {
-    @include bootstrap.media-breakpoint-down(sm) {
-      max-width: 200px;
-    }
     width: 100%;
+    max-width: 200px;
+
+    @media (min-width: 768px) {
+      max-width: unset;
+    }
   }
 
   .details {
     .title {
-      @include bootstrap.media-breakpoint-up(sm) {
+      margin-bottom: 0;
+
+      @media (min-width: 768px) {
         margin-top: 0;
       }
-      margin-bottom: 0;
     }
   }
 }
diff --git a/src/_sass/_dash.scss b/src/_sass/_dash.scss
index ed019ba893..8953e26fb2 100644
--- a/src/_sass/_dash.scss
+++ b/src/_sass/_dash.scss
@@ -1,5 +1,4 @@
 @use 'core/variables' as *;
-@use 'core/bootstrap';
 
 // Homepage styles
 
diff --git a/src/_sass/_overwrites.scss b/src/_sass/_overwrites.scss
deleted file mode 100644
index 36429c20c6..0000000000
--- a/src/_sass/_overwrites.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-@use 'sass:color';
-
-@use 'core/variables' as *;
-
-/* Add space between definitions. */
-dd {
-  margin-bottom: 15px;
-}
-
-b, strong {
-  font-weight: bold;
-}
-
-a {
-  code {
-    color: $default-link;
-  }
-
-  &:hover, &:focus, &:active {
-    code {
-      color: color.scale($default-link, $lightness: -15%, $saturation: 15%);
-    }
-  }
-}
-
-.btn-primary, .btn-primary:visited {
-  color: white;
-}
-
-@media print {
-  /* Don't display navigation aids when printing */
-  #page-header, #sidenav, #subnav, #page-footer, .banner,
-  #site-toc--inline, #site-toc--side, #page-github-links {
-    display: none !important;
-  }
-
-  #page-content {
-    > article {
-      width: auto;
-      margin: 0;
-    }
-  }
-
-  /* Display underlines under links */
-  a {
-    text-decoration: underline;
-  }
-
-  /* Remove external link icon and link path */
-  a:after {
-    content: none !important;
-  }
-
-  /* Show borders around notes and code blocks */
-  .alert, pre {
-    border: 1px solid black;
-  }
-}
-
-/* Overwrite bootstrap: don't wrap code */
-pre code {
-  white-space: pre;
-}
diff --git a/src/_sass/_site.scss b/src/_sass/_site.scss
index c6bc440905..139f784450 100644
--- a/src/_sass/_site.scss
+++ b/src/_sass/_site.scss
@@ -1,5 +1,8 @@
+// Must be imported first to ensure that
+// the reset is applied before any other styles are applied.
+@use 'core/reset';
+
 @use 'core/variables' as *;
-@use 'core/colors';
 @use 'core/mixins' as *;
 
 @use 'core/base';
@@ -20,9 +23,12 @@
 @use 'dartvm';
 @use 'books';
 @use 'os-tabs';
-@use 'overwrites';
 @use 'dash';
 
+// Must be imported last to ensure that
+// the print overrides take priority over earlier defined styles.
+@use 'core/print';
+
 /* -----------------------------------------
   DOM
   ----------------------------------------- */
@@ -43,7 +49,7 @@
   }
 
   body.obsolete & {
-    border: 10px solid $alert-warning-bg;
+    border: 0.5rem solid $alert-warning-bg;
     border-top: none;
   }
 
@@ -76,6 +82,7 @@
 
 #site-content-title {
   margin-bottom: 1.5rem;
+  scroll-margin: 4rem;
 }
 
 #page-footer {
@@ -91,6 +98,10 @@
 
   .brand {
     width: 176px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.125rem;
   }
 
   .footer-section {
@@ -126,14 +137,21 @@
   }
 
   .footer-social-links {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+
     a {
-      &:not(:first-child) {
-        margin-left: 16px;
-      }
+      display: inline-flex;
+      text-align: center;
+      padding: 0.25rem;
+      align-items: center;
+      justify-content: center;
+      text-decoration: none;
 
       svg {
-        height: 32px;
-        width: 32px;
+        height: 2rem;
+        width: 2rem;
       }
     }
 
@@ -191,10 +209,10 @@
   background-color: $site-color-header;
   color: $site-color-header-text;
   display: flex;
-  $mainnav-entry-spacing: 12px;
+  align-items: center;
 
   ul {
-    margin: auto 0 auto auto;
+    margin: 0 0 0 auto;
     padding: 0;
     list-style: none;
 
@@ -204,7 +222,7 @@
     align-items: center;
 
     li {
-      padding: 0 $mainnav-entry-spacing;
+      padding: 0 0.75rem;
 
       a {
         color: $site-color-header-text;
@@ -221,19 +239,21 @@
 
       &.searchfield {
         position: relative;
+
+        form {
+          display: flex;
+          align-items: center;
+        }
       }
     }
   }
 
   .brand {
-    display: block;
-    float: left;
-    width: 85px;
-    margin: 0 20px;
+    display: flex;
+    width: 5.5rem;
     overflow: hidden;
-    line-height: $site-header-height;
-    position: relative;
-    top: -1px;
+    margin-left: 1.25rem;
+    align-items: center;
   }
 }
 
@@ -295,11 +315,12 @@ main .content {
 
   .header-wrapper {
     display: flex;
-    margin-top: 1.5rem;
-    margin-bottom: 0.75rem;
+    margin-block-start: 1.5rem;
+    margin-block-end: 0.75rem;
     align-items: center;
 
     .heading-link {
+      border-radius: 0.125rem;
       margin-left: 0.4rem;
       font-size: 1.3rem;
       line-height: 1;
@@ -307,13 +328,14 @@ main .content {
       overflow: hidden;
       color: #4a4a4a;
       opacity: 0;
+      text-decoration: none;
 
       &:hover {
         color: $brand-primary;
       }
 
       &:focus {
-        opacity: 1
+        opacity: 1;
       }
 
       &:active {
@@ -401,16 +423,6 @@ main .content {
   height: 20px;
 }
 
-.cols3 {
-  list-style: none;
-  column-count: 3;
-  column-gap: 0;
-
-  li {
-    page-break-inside: avoid;
-  }
-}
-
 .muted {
   color: $gray;
 }
@@ -437,10 +449,6 @@ main .content {
   }
 }
 
-/* -----------------------------------------
-  Bootstrap Overwrites
- ----------------------------------------- */
-
 .container {
   position: relative;
   max-width: 100%;
@@ -450,11 +458,31 @@ main .content {
 
 .table {
   width: 100%;
-  @extend .table-striped;
+  border-spacing: 0;
 
-  // override .table-striped macro, remove top border
-  td {
-    border-top: none;
+  thead {
+    vertical-align: bottom;
+
+    th {
+      border-top: 1px solid $site-color-light-grey;
+      border-bottom: 2px solid $site-color-light-grey;
+      text-align: start;
+    }
+  }
+
+  tbody {
+    tr {
+      vertical-align: top;
+
+      &:nth-of-type(odd) {
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+    }
+  }
+
+  td, th {
+    border: none;
+    padding: .75rem;
   }
 }
 
@@ -466,6 +494,8 @@ thead:has(th:empty) {
 
 .table-wrapper {
   overflow-x: auto;
+  margin-block-start: 1rem;
+  margin-block-end: 1rem;
 }
 
 .alert {
@@ -475,11 +505,6 @@ thead:has(th:empty) {
   margin-top: 1rem;
   padding: 1.5rem;
 
-  i.material-icons {
-    font-size: 1.25em;
-    user-select: none;
-  }
-
   .alert-header {
     display: flex;
     align-items: center;
@@ -493,21 +518,19 @@ thead:has(th:empty) {
     margin-top: 0.5rem;
   }
 
-  i.material-symbols {
+  span.material-symbols {
     font-size: 1.25em;
     user-select: none;
   }
 
-  code {
-    background-color: transparent;
-  }
-
   pre {
     background-color: #00000010;
   }
 
-  p:last-child, li:last-child, ul:last-child, ol:last-child {
-    margin-bottom: 0;
+  p, li, ul, ol {
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 
   &.alert-success {
@@ -573,7 +596,8 @@ thead:has(th:empty) {
 
 nav.breadcrumbs {
   align-items: center;
-  margin-bottom: 1rem;
+  margin-block-start: 1rem;
+  margin-block-end: 1rem;
 }
 
 ol.breadcrumb-list {
diff --git a/src/_sass/components/_banner.scss b/src/_sass/components/_banner.scss
index 33a31ba70f..702b885698 100644
--- a/src/_sass/components/_banner.scss
+++ b/src/_sass/components/_banner.scss
@@ -7,13 +7,13 @@
   text-align: center;
   z-index: 500;
 
-  &__text {
+  p {
     font-family: $site-font-family-alt;
     font-size: 16px;
 
     color: white;
 
-    margin-bottom: 0;
+    margin: 0;
     padding-left: 1em;
     padding-right: 1em;
 
diff --git a/src/_sass/components/_card.scss b/src/_sass/components/_card.scss
index 813a3e16f6..d73d18224e 100644
--- a/src/_sass/components/_card.scss
+++ b/src/_sass/components/_card.scss
@@ -14,7 +14,6 @@
 
     border-radius: 0.5rem;
     padding: 0.75rem;
-    margin: 0;
     gap: 0.5rem;
     background-color: var(--card-container-color, rgb(242, 245, 255));
     height: auto;
@@ -35,12 +34,6 @@
       justify-content: space-between;
       align-items: center;
 
-      // TODO(parlough): Remove these resets after bootstrap removed.
-      border: none;
-      background: none;
-      margin: 0;
-      padding: 0;
-
       .card-title {
         font-size: 1.25rem;
         font-weight: 500;
@@ -59,6 +52,9 @@
       color: var(--card-text-color, $site-color-body);
 
       p {
+        margin: 0;
+        margin-block-end: 0.75rem;
+
         code {
           font-size: 0.95em;
           background-color: rgba(0, 0, 0, .05);
@@ -76,12 +72,10 @@
   }
 
   a.card {
+    text-decoration: none;
+
     .card-header {
       --card-title-color: #1967D2;
-
-      .card-title {
-        font-weight: 400;
-      }
     }
 
     &:hover {
diff --git a/src/_sass/components/_code.scss b/src/_sass/components/_code.scss
index 65e2147502..59090f2c8f 100644
--- a/src/_sass/components/_code.scss
+++ b/src/_sass/components/_code.scss
@@ -1,14 +1,29 @@
 @use 'sass:color';
 
-@use '../core/colors' as *;
 @use '../core/variables' as *;
 
+*:not(pre) > code {
+  font-size: 0.9em;
+  line-height: 1.25em;
+  padding: 0.1rem 0.25rem;
+  background-color: $site-color-light-grey;
+  background-color: color-mix(in srgb, $site-color-light-grey 35%, transparent);
+  border: 1px solid rgb(195, 201, 214);
+  border-radius: 0.25rem;
+  word-wrap: break-word;
+  white-space: nowrap;
+}
+
 pre {
-  margin-bottom: 1rem;
+  margin: 0 0 1rem;
   font-size: 0.9375rem;
   font-weight: 400;
   padding: 1.25rem;
 
+  code {
+    white-space: pre;
+  }
+
   a {
     font-family: inherit;
     font-weight: inherit;
@@ -21,7 +36,7 @@ pre {
 
   .highlight-diagnostics & {
     .highlight {
-      border-bottom: 2px $red-500 dashed;
+      border-bottom: 2px #F44336 dashed;
       background: inherit;
       padding: 0;
     }
@@ -136,7 +151,8 @@ pre {
 }
 
 .code-block-wrapper {
-  margin-bottom: 1rem;
+  margin-block-start: 1rem;
+  margin-block-end: 1rem;
   border: 1px solid $flutter-color-grey-500;
 
   .code-block-header {
@@ -178,6 +194,7 @@ pre {
     margin-bottom: 0;
     padding-right: 0;
     padding-left: 0;
+    overflow-x: scroll;
 
     &:not([lang="console"]) {
       line-height: 1.8;
@@ -188,7 +205,7 @@ pre {
 // Border and resizability for dartpad
 iframe[src^="https://dartpad"]:not(#try-dart-pad) {
   border: 1px solid #ccc;
-  margin-bottom: 1rem;
+  margin: 0;
   min-height: 400px;
   resize: vertical;
   width: 100%;
diff --git a/src/_sass/components/_cookie-notice.scss b/src/_sass/components/_cookie-notice.scss
index 9feae2ff86..3da1e0877b 100644
--- a/src/_sass/components/_cookie-notice.scss
+++ b/src/_sass/components/_cookie-notice.scss
@@ -2,10 +2,9 @@
 
 #cookie-notice {
   background-color: white;
-  padding: 2.5rem 0 !important;
+  padding: 2rem;
   position: fixed;
   bottom: 0;
-  left: 0;
   width: 100%;
   box-shadow: -1px 1px 4px rgba(0, 0, 0, 0.3);
   opacity: 0;
@@ -21,9 +20,8 @@
     }
   }
 
-  a.btn {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
+  button.filled-button {
+    font-size: 1rem;
   }
 
   &.show {
@@ -42,19 +40,18 @@
     align-items: center;
     max-width: 1080px;
     min-width: 0 !important;
-    margin: 0 auto;
     width: auto;
+    gap: 1.5rem;
 
     p {
       font-size: 1rem;
       line-height: 1.6;
-      margin-right: 2rem;
-      margin-bottom: 0;
+      margin: 0;
     }
   }
 }
 
-body.homepage, .error {
+body.homepage, body.error {
   #cookie-notice {
     background-color: $site-color-dark-background;
 
diff --git a/src/_sass/components/_form.scss b/src/_sass/components/_form.scss
index 63c8256f50..0256a1563f 100644
--- a/src/_sass/components/_form.scss
+++ b/src/_sass/components/_form.scss
@@ -8,6 +8,12 @@ form {
     text-indent: 0;
     padding: 10px;
   }
+
+  &.form-inline {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
 }
 
 .select {
@@ -15,32 +21,8 @@ form {
   cursor: pointer;
 
   select {
-    appearance: none;
     min-width: 120px;
-    padding: 0 30px 0 10px;
-    margin: 0 .25rem;
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  &:after {
-    font: $site-font-icon;
-    content: 'expand_more';
-    vertical-align: bottom;
-    display: block;
-    position: absolute;
-    right: .5rem;
-    font-style: normal;
-    font-weight: normal;
-    font-variant: normal;
-    text-transform: none;
-    line-height: 1;
-    font-size: 20px;
-    color: $gray-dark;
-    pointer-events: none;
-    @include transition();
+    margin: 0 0.3rem;
   }
 }
 
@@ -57,6 +39,6 @@ input, select {
   color: $gray-dark;
 
   &:focus, &:active {
-    outline-color: #fff;
+    outline-color: $site-color-primary;
   }
 }
diff --git a/src/_sass/components/_header.scss b/src/_sass/components/_header.scss
index 4f2f28d5d7..05137f13a8 100644
--- a/src/_sass/components/_header.scss
+++ b/src/_sass/components/_header.scss
@@ -1,5 +1,4 @@
 @use '../core/variables' as *;
-@use '../core/bootstrap';
 
 .site-header {
   background-color: $site-color-white;
@@ -9,10 +8,10 @@
   z-index: $site-z-header;
 
   .navbar {
-    font-size: 1.25rem;;
+    font-size: 1.25rem;
     min-height: $site-header-height;
 
-    @include bootstrap.media-breakpoint-up(md) {
+    @media (min-width: 768px) {
       font-size: $font-size-base;
     }
 
@@ -34,8 +33,9 @@
       color: $site-color-nav-links;
       padding: 1.25rem 0;
       position: relative;
+      text-decoration: none;
 
-      @include bootstrap.media-breakpoint-up(md) {
+      @media (min-width: 768px) {
         padding: 0 1rem;
       }
 
@@ -43,7 +43,7 @@
         color: $site-color-body;
         font-weight: 500;
 
-        @include bootstrap.media-breakpoint-up(md) {
+        @media (min-width: 768px) {
           &:after {
             $nav-active-marker-thickness: 3px;
             background-color: $site-color-card-link;
@@ -60,15 +60,6 @@
     }
   }
 
-  &__cta {
-    margin-left: 0.5rem;
-    padding: 0.5rem 1rem !important;
-
-    @include bootstrap.media-breakpoint-down(sm) {
-      display: none;
-    }
-  }
-
   &__search {
     position: relative;
 
@@ -80,23 +71,21 @@
       left: 0.25rem;
     }
 
-    @include bootstrap.media-breakpoint-up(md) {
+    @media (min-width: 768px) {
       margin-left: 1rem;
     }
   }
 
   &__searchfield {
     border: 0;
-    font-size: 0.875rem;
     padding-left: 2rem;
+    font-size: 1.25rem;
+    height: 3rem;
+    width: 100%;
 
-    @include bootstrap.media-breakpoint-down(sm) {
-      font-size: 1.25rem;
-      height: 3rem;
-      width: 100%;
-    }
-
-    @include bootstrap.media-breakpoint-up(md) {
+    @media (min-width: 768px) {
+      font-size: 0.875rem;
+      height: unset;
       transition: width .35s ease-in-out;
       width: 24px !important;
 
@@ -105,15 +94,4 @@
       }
     }
   }
-
-  &__social {
-    .nav-item.nav-link {
-      padding: 0 0.5rem;
-
-      @include bootstrap.media-breakpoint-down(sm) {
-        padding: 0 0.25rem;
-        font-size: smaller;
-      }
-    }
-  }
 }
diff --git a/src/_sass/components/_linter-rules.scss b/src/_sass/components/_linter-rules.scss
index 9ed67a79e0..3a6132ee27 100644
--- a/src/_sass/components/_linter-rules.scss
+++ b/src/_sass/components/_linter-rules.scss
@@ -32,7 +32,8 @@ body.linter-rules {
     flex-wrap: wrap;
     justify-content: center;
     gap: 0.75rem;
-    margin-bottom: 1rem;
+    margin-block-start: 1rem;
+    margin-block-end: 1rem;
 
     &.hidden {
       display: none;
@@ -238,6 +239,10 @@ body.linter-rules {
         font-size: 1rem;
         cursor: text;
 
+        &:focus {
+          outline: none;
+        }
+
         &::-webkit-search-cancel-button {
           display: none;
         }
diff --git a/src/_sass/components/_search.scss b/src/_sass/components/_search.scss
index 3b84307a29..a52ea83bb8 100644
--- a/src/_sass/components/_search.scss
+++ b/src/_sass/components/_search.scss
@@ -1,5 +1,4 @@
 @use '../core/variables' as *;
-@use '../core/bootstrap';
 
 .site-header__search {
   &::before {
@@ -7,6 +6,9 @@
     z-index: 1;
   }
 
+  display: flex;
+  align-items: center;
+
   #mainnav & {
     // Override of _header.scss
     border: 0;
@@ -33,21 +35,23 @@
 .site-header__searchfield {
   border: 0;
   box-shadow: none;
+  background-color: transparent;
 
   #mainnav & {
     background-color: $site-color-header;
     color: $site-color-header-text;
-    font-size: $site-font-size-header;
+    font-size: inherit;
+    height: inherit;
+    width: 24px;
 
-    // Override of _header.scss
-    @include bootstrap.media-breakpoint-down(sm) {
-      font-size: inherit;
-      height: inherit;
+    &:focus {
+      width: 220px;
+    }
 
-      width: 24px !important;
-      &:focus {
-        width: 220px !important;
-      }
+    @media (min-width: 768px) {
+      font-size: $site-font-size-header;
+      height: unset;
+      width: unset;
     }
   }
 
@@ -56,9 +60,10 @@
     height: 3rem;
     width: 100%;
 
-    // Override of _header.scss
-    @include bootstrap.media-breakpoint-up(md) {
+    // Override of _header.scss.
+    @media (min-width: 768px) {
       width: 100% !important;
+
       &:focus {
         width: 100% !important;
       }
@@ -66,11 +71,6 @@
   }
 }
 
-input.gsc-search-button {
-  @extend .btn;
-  @extend .btn-primary;
-}
-
 #search-icon {
   position: absolute;
   right: 5px;
@@ -100,9 +100,11 @@ input.gsc-search-button {
   }
 }
 
-.searchbar {
-  > * {
-    max-width: 640px;
-    width: 100%
+#search-body {
+  margin-block-end: 1rem;
+  max-width: 640px;
+
+  .gsc-control-cse {
+    border-radius: 0.5rem;
   }
 }
diff --git a/src/_sass/components/_toc.scss b/src/_sass/components/_toc.scss
index d1a4cf0efe..94225890fe 100644
--- a/src/_sass/components/_toc.scss
+++ b/src/_sass/components/_toc.scss
@@ -1,6 +1,5 @@
 @use '../core/variables' as *;
 @use '../core/mixins' as *;
-@use '../core/bootstrap';
 
 .site-toc {
   ul {
@@ -16,6 +15,7 @@
   }
 }
 
+//noinspection CssReplaceWithShorthandSafely
 #site-toc--side {
   padding: $site-content-top-padding;
   padding-left: $site-content-top-padding / 2;
@@ -32,7 +32,7 @@
   overflow-wrap: break-word;
   z-index: 5;
 
-  @include bootstrap.media-breakpoint-up(xl) {
+  @media (min-width: 1200px) {
     display: block;
   }
 
@@ -77,9 +77,10 @@
 #site-toc--inline {
   background: #f5f5f7;
   padding: 1rem 1.5rem;
-  margin-bottom: 1rem;
+  margin-block-start: 1rem;
+  margin-block-end: 1rem;
 
-  @include bootstrap.media-breakpoint-up(xl) {
+  @media (min-width: 1200px) {
     display: none;
   }
 
diff --git a/src/_sass/core/_base.scss b/src/_sass/core/_base.scss
index 40214be833..d8d66d8a7e 100644
--- a/src/_sass/core/_base.scss
+++ b/src/_sass/core/_base.scss
@@ -10,7 +10,9 @@ body {
   font-family: $site-font-family-base;
   font-size: $font-size-base;
   font-weight: 400;
+  line-height: 1.5;
   color: $site-color-body;
+
   height: 100vh;
 }
 
@@ -21,6 +23,7 @@ section {
 h1, h2, h3, h4, h5, h6 {
   font-family: $site-font-family-gsans;
   font-weight: 400;
+  line-height: 1.2;
   color: $site-color-body;
 }
 
@@ -62,11 +65,48 @@ a, button {
   color: $brand-primary;
   font-family: $site-font-family-base;
   font-weight: 400;
+  cursor: pointer;
+  background: none;
 
   &:visited {
     color: $brand-primary;
   }
 
+  &.filled-button {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    gap: 0.5rem;
+    width: fit-content;
+    background-color: $site-color-primary;
+    color: $site-color-white;
+    text-decoration: none;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    font-family: $site-font-family-alt;
+    font-size: 1.25rem;
+    white-space: nowrap;
+    outline-offset: 2px;
+
+    &:hover {
+      @include interaction-style(4%);
+      color: $site-color-white;
+      text-decoration: none;
+    }
+
+    &:focus {
+      color: $site-color-white;
+      outline: 2px solid var(--focus-outline-color);
+    }
+
+    &:active {
+      @include interaction-style(8%);
+      color: $site-color-white;
+    }
+  }
+}
+
+button {
   &:hover, &:focus, &:active {
     color: $flutter-color-blue-700;
     outline: none;
@@ -78,11 +118,32 @@ a, button {
   }
 }
 
+a {
+  border-radius: 0.2rem;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:active {
+    color: $flutter-color-blue-600;
+  }
+}
+
+ul {
+  padding-inline-start: 2rem;
+}
+
 img {
   max-width: 100%;
   height: auto;
 }
 
+dd {
+  margin-bottom: 0.75rem;
+  margin-top: 0.25rem;
+}
+
 blockquote {
   border: solid #b3b3b3;
   border-width: 1px 0;
@@ -91,11 +152,13 @@ blockquote {
 }
 
 details {
-  margin-bottom: 0.75rem;
+  margin-block-start: 1rem;
+  margin-block-end: 1rem;
 
   > summary {
     font-weight: 500;
     user-select: none;
+    cursor: pointer;
 
     &:hover {
       color: $brand-primary;
@@ -115,3 +178,9 @@ details {
     margin-right: 0.75rem;
   }
 }
+
+figure {
+  figcaption {
+    text-align: center;
+  }
+}
diff --git a/src/_sass/core/_bootstrap.scss b/src/_sass/core/_bootstrap.scss
deleted file mode 100644
index 8b6be3ac2f..0000000000
--- a/src/_sass/core/_bootstrap.scss
+++ /dev/null
@@ -1,95 +0,0 @@
-@use '../core/variables' as *;
-@use '../core/colors';
-
-// Import from NPM library directly
-@forward '../../../node_modules/bootstrap-scss/bootstrap' hide card-grid, card with (
-  // Color config
-  $primary: $site-color-primary,
-  $body-color: $site-color-body,
-
-  // Font config
-  $font-family-sans-serif: $site-font-family-base,
-  $font-family-monospace: $site-font-family-monospace,
-  $font-weight-base: $font-size-base-weight,
-  $font-weight-bold: 500,
-  $headings-font-family: $site-font-family-alt,
-  $headings-font-weight: $font-size-base-weight,
-  $dt-font-weight: $font-size-base-weight,
-
-  $h1-font-size: 48px,
-  $h2-font-size: 24px,
-  $h3-font-size: 21px,
-  $h4-font-size: 18px,
-  $h5-font-size: 15px,
-  $h6-font-size: 15px,
-
-  // Layout config
-  $container-max-widths: (
-          sm: 540px,
-          md: 720px,
-          lg: 960px,
-          xl: 1140px,
-          xxl: 1330px
-  ),
-
-  $grid-breakpoints: (
-        0: 0,
-        xxs: 320px,
-        xs: 480px,
-        sm: 576px,
-        md: 768px,
-        lg: 992px,
-        xl: 1200px,
-        xxl: 1440px
-  ),
-
-  $spacers: (
-          1: ($site-spacer * 0.25),
-          2: ($site-spacer * 0.5),
-          3: ($site-spacer * 0.75),
-          4: $site-spacer,
-          5: ($site-spacer * 1.25),
-          6: ($site-spacer * 1.5),
-          7: ($site-spacer * 1.75),
-          8: ($site-spacer * 2),
-          9: ($site-spacer * 2.25),
-          10: ($site-spacer * 2.5),
-          11: ($site-spacer * 2.75),
-          12: ($site-spacer * 3),
-  ),
-
-  // Component config
-
-  $alert-padding-y: $site-spacer * 1.5,
-  $alert-padding-x: $site-spacer * 1.5,
-
-  $border-radius: 0,
-  $border-radius-lg: 0,
-  $border-radius-sm: 0,
-
-  // Card
-  $card-border-radius: 4px,
-  $card-border-width: 0,
-  $card-group-margin: 0.5rem,
-
-  $grid-gutter-width: 50px,
-
-  $nav-tabs-link-active-color: $site-color-body,
-  $nav-tabs-link-active-border-color: transparent transparent $site-color-primary,
-
-  $tooltip-bg: colors.$grey-800,
-
-  $enable-shadows: true,
-
-  // Code
-  $code-color: #11796d,
-  $code-font-size: 100%,
-  $kbd-font-size: 0.75rem,
-
-  // Dropdown
-  $dropdown-divider-bg: #bbbbbb,
-  $dropdown-link-active-color: transparent,
-  $dropdown-link-active-bg: transparent,
-);
-
-@use '../../../node_modules/bootstrap-scss/bootstrap';
diff --git a/src/_sass/core/_colors.scss b/src/_sass/core/_colors.scss
deleted file mode 100644
index f441bc9972..0000000000
--- a/src/_sass/core/_colors.scss
+++ /dev/null
@@ -1,158 +0,0 @@
-/*
-* Material Design Colors
-*
-* Colors based off the material design palette
-* https://material.google.com/style/color.html#color-color-palette
-*
-*/
-
-$amber-50: #FFF8E1;
-$amber-100: #FFECB3;
-$amber-200: #FFE082;
-$amber-300: #FFD54F;
-$amber-400: #FFCA28;
-$amber-500: #FFC107;
-$amber-600: #FFB300;
-$amber-700: #FFA000;
-$amber-800: #FF8F00;
-$amber-900: #FF6F00;
-$amber-A100: #FFE57F;
-$amber-A200: #FFD740;
-$amber-A400: #FFC400;
-$amber-A700: #FFAB00;
-
-$blue-50: #E3F2FD;
-$blue-100: #BBDEFB;
-$blue-200: #90CAF9;
-$blue-300: #64B5F6;
-$blue-400: #42A5F5;
-$blue-500: #2196F3;
-$blue-600: #1E88E5;
-$blue-700: #1976D2;
-$blue-800: #1565C0;
-$blue-900: #0D47A1;
-$blue-A100: #82B1FF;
-$blue-A200: #448AFF;
-$blue-A400: #2979FF;
-$blue-A700: #2962FF;
-
-$blue-grey-50: #ECEFF1;
-$blue-grey-100: #CFD8DC;
-$blue-grey-200: #B0BEC5;
-$blue-grey-300: #90A4AE;
-$blue-grey-400: #78909C;
-$blue-grey-500: #607D8B;
-$blue-grey-600: #546E7A;
-$blue-grey-700: #455A64;
-$blue-grey-800: #37474F;
-$blue-grey-900: #263238;
-
-$cyan-50: #E0F7FA;
-$cyan-100: #B2EBF2;
-$cyan-200: #80DEEA;
-$cyan-300: #4DD0E1;
-$cyan-400: #26C6DA;
-$cyan-500: #00BCD4;
-$cyan-600: #00ACC1;
-$cyan-700: #0097A7;
-$cyan-800: #00838F;
-$cyan-900: #006064;
-$cyan-A100: #84FFFF;
-$cyan-A200: #18FFFF;
-$cyan-A400: #00E5FF;
-$cyan-A700: #00B8D4;
-
-$grey-400: #BDBDBD;
-$grey-500: #9E9E9E;
-$grey-800: #343a40;
-$grey-900: #212121;
-
-$green-50: #E8F5E9;
-$green-100: #C8E6C9;
-$green-200: #A5D6A7;
-$green-300: #81C784;
-$green-400: #66BB6A;
-$green-500: #4CAF50;
-$green-600: #43A047;
-$green-700: #388E3C;
-$green-800: #2E7D32;
-$green-900: #1B5E20;
-$green-A100: #B9F6CA;
-$green-A200: #69F0AE;
-$green-A400: #00E676;
-$green-A700: #00C853;
-
-$light-green-50: #F1F8E9;
-$light-green-100: #DCEDC8;
-$light-green-200: #C5E1A5;
-$light-green-300: #AED581;
-$light-green-400: #9CCC65;
-$light-green-500: #8BC34A;
-$light-green-600: #7CB342;
-$light-green-700: #689F38;
-$light-green-800: #558B2F;
-$light-green-900: #33691E;
-$light-green-A100: #CCFF90;
-$light-green-A200: #B2FF59;
-$light-green-A400: #76FF03;
-$light-green-A700: #64DD17;
-
-$pink-50: #FCE4EC;
-$pink-100: #F8BBD0;
-$pink-200: #F48FB1;
-$pink-300: #F06292;
-$pink-400: #EC407A;
-$pink-500: #E91E63;
-$pink-600: #D81B60;
-$pink-700: #C2185B;
-$pink-800: #AD1457;
-$pink-900: #880E4F;
-$pink-A100: #FF80AB;
-$pink-A200: #FF4081;
-$pink-A400: #F50057;
-$pink-A700: #C51162;
-
-$purple-50: #F3E5F5;
-$purple-100: #E1BEE7;
-$purple-200: #CE93D8;
-$purple-300: #BA68C8;
-$purple-400: #AB47BC;
-$purple-500: #9C27B0;
-$purple-600: #8E24AA;
-$purple-700: #7B1FA2;
-$purple-800: #6A1B9A;
-$purple-900: #4A148C;
-$purple-A100: #EA80FC;
-$purple-A200: #E040FB;
-$purple-A400: #D500F9;
-$purple-A700: #AA00FF;
-
-$red-50: #FFEBEE;
-$red-100: #FFCDD2;
-$red-200: #EF9A9A;
-$red-300: #E57373;
-$red-400: #EF5350;
-$red-500: #F44336;
-$red-600: #E53935;
-$red-700: #D32F2F;
-$red-800: #C62828;
-$red-900: #B71C1C;
-$red-A100: #FF8A80;
-$red-A200: #FF5252;
-$red-A400: #FF1744;
-$red-A700: #D50000;
-
-$teal-50: #E0F2F1;
-$teal-100: #B2DFDB;
-$teal-200: #80CBC4;
-$teal-300: #4DB6AC;
-$teal-400: #26A69A;
-$teal-500: #009688;
-$teal-600: #00897B;
-$teal-700: #00796B;
-$teal-800: #00695C;
-$teal-900: #004D40;
-$teal-A100: #A7FFEB;
-$teal-A200: #64FFDA;
-$teal-A400: #1DE9B6;
-$teal-A700: #00BFA5;
diff --git a/src/_sass/core/_print.scss b/src/_sass/core/_print.scss
new file mode 100644
index 0000000000..2468750a64
--- /dev/null
+++ b/src/_sass/core/_print.scss
@@ -0,0 +1,31 @@
+@use 'variables' as *;
+
+@media print {
+  // Don't display navigation aids when printing.
+  #page-header, #sidenav, #subnav, #page-footer, .banner,
+  #site-toc--inline, #site-toc--side, #page-github-links, #cookie-notice {
+    display: none !important;
+  }
+
+  #page-content {
+    > article {
+      width: auto;
+      margin: 0;
+    }
+  }
+
+  // Display underlines under links.
+  a {
+    text-decoration: underline;
+  }
+
+  // Remove external link icon and link path.
+  a:after {
+    content: none !important;
+  }
+
+  // Show borders around notes and code blocks.
+  .alert, pre {
+    border: 1px solid $dash-dark-black;
+  }
+}
diff --git a/src/_sass/core/_reset.scss b/src/_sass/core/_reset.scss
new file mode 100644
index 0000000000..ffd29e391a
--- /dev/null
+++ b/src/_sass/core/_reset.scss
@@ -0,0 +1,28 @@
+@use '../core/variables' as *;
+
+*, ::before, ::after {
+  box-sizing: border-box;
+  border-width: 0;
+}
+
+html, body {
+  padding: 0;
+  margin: 0;
+}
+
+button, input, select, textarea {
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+*:focus-visible {
+  outline: 2px solid $site-color-primary;
+}
diff --git a/src/_sass/core/_utils.scss b/src/_sass/core/_utils.scss
index f705f67a58..f22030a9b5 100644
--- a/src/_sass/core/_utils.scss
+++ b/src/_sass/core/_utils.scss
@@ -5,3 +5,16 @@
   row-gap: 0;
   justify-content: center;
 }
+
+.centered-rows {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  justify-content: center;
+}
+
+.text-center {
+  text-align: center;
+}
\ No newline at end of file
diff --git a/src/content/assets/js/main.js b/src/content/assets/js/main.js
index 3ba0a64f87..ae2050e8ca 100644
--- a/src/content/assets/js/main.js
+++ b/src/content/assets/js/main.js
@@ -56,18 +56,8 @@ function switchBanner(galleryName) {
     selector.classList.remove('highlight');
   });
   this.classList.add('highlight');
-  
-  imgSelector.setAttribute('src', this.dataset.banner);
-}
-
-function adjustToc() {
-  // Adjustments to the jekyll-toc TOC.
-  var tocWrapper = $('#site-toc--side');
-  $(tocWrapper).find('header').click(function() {
-    $('html, body').animate({ scrollTop: 0 }, 'fast');
-  })
 
-  $('#site-below-header').scrollspy({ offset: 100, target: '#site-toc--side' });
+  imgSelector.setAttribute('src', this.dataset.banner);
 }
 
 function createGallery() {
@@ -158,27 +148,27 @@ $(function() {
   setupOsTabs();
   initCookieNotice();
 
-  // Sidenav
-  $('#sidenav i').on('click', function (e) {
-    e.stopPropagation();
-    $(this).parent('li').toggleClass('active');
-  });
-
-  adjustToc();
-
   // open - close mobile navigation
   $('#menu-toggle').on('click', function (e) {
     e.stopPropagation();
     $(document.body).toggleClass('open_menu');
   });
 
-  // Remove open_menu when switched back to normal sidenav
-  $(window).smartresize((e) => {
-    if (document.body.clientWidth > 1025) {
+  window.addEventListener('resize', function() {
+    if (window.innerWidth > 1025) {
       document.body.classList.remove('open_menu');
     }
   });
 
+  // Set up collapse and expand for sidenav buttons.
+  const toggles = document.querySelectorAll('.nav-link.collapsible');
+  toggles.forEach(function (toggle) {
+    toggle.addEventListener('click', (e) => {
+      toggle.classList.toggle('collapsed');
+      e.preventDefault();
+    });
+  });
+
   var topLevelMenuTogglers = ['#page-header', '.banner', '#page-content', '#page-footer'];
   for (var i = 0; i < topLevelMenuTogglers.length; i++) {
     $(topLevelMenuTogglers[i]).on('click', function (e) {
diff --git a/src/content/multiplatform-apps.md b/src/content/multiplatform-apps.md
index 412dd4c9ff..3594c46e2b 100644
--- a/src/content/multiplatform-apps.md
+++ b/src/content/multiplatform-apps.md
@@ -6,9 +6,8 @@ description: >-
 toc: false
 ---
 
-<div class="container">
-<div class="row">
-<div class="col-sm-6">
+<div class="side-by-side">
+<div class="centered-rows">
 
 We recommend the [Flutter framework][] for developing multi-platform native apps
 for mobile (iOS & Android), desktop (Windows, Linux, and macOS), and the web.
@@ -25,19 +24,15 @@ fast production code for any platform.
 [Dart-to-JavaScript compiler]: /overview#web-platform
 
 
-<p class="text-center"> 
-  <a href="{{site.flutter-docs}}/get-started" class="btn btn-primary btn-lg">
-    <img src="/assets/img/logo/flutter-64.png" width="32px" alt="Flutter">
-    Get started
+<p style="margin-block-end: 2rem;">
+  <a href="{{site.flutter-docs}}/get-started" class="filled-button">
+    <img src="/assets/img/logo/flutter-64.png" width="32px" height="32px" alt="Flutter">
+    <span>Get started</span>
   </a>
 </p>
 </div>
 
-<div class="col-sm-6">
-  <img 
-    style="padding: 30px; float: right; width: 400px" 
-    src="/assets/img/multiplat.png" 
-    alt="Multi-platform apps illustration">
+<div class="centered-rows">
+  <img src="/assets/img/multiplat.png" alt="Multi-platform apps illustration">
 </div>
-  </div>
 </div>
diff --git a/src/content/search-all.html b/src/content/search-all.html
index e244702c66..91050ffafd 100644
--- a/src/content/search-all.html
+++ b/src/content/search-all.html
@@ -15,7 +15,7 @@
 Want only results from dart.dev? <a href="/search">Search dart.dev.</a>
 </p>
 
-<div class="d-flex searchbar">
+<div class="search-body">
   <script async src="https://cse.google.com/cse.js?cx=011220921317074318178:_yy-tmb5t_i"></script>
   <div class="gcse-search"></div>
 </div>
diff --git a/src/content/search.html b/src/content/search.html
index d954505c29..11177bd8d7 100644
--- a/src/content/search.html
+++ b/src/content/search.html
@@ -6,10 +6,12 @@
 skipFreshness: true
 ---
 
+<p>
 Want results from additional Dart-related sites, like api.dart.dev and flutter.dev?
 <a href="/search-all">Search more sites.</a>
+</p>
 
-<div class="d-flex searchbar">
+<div id="search-body">
   <script async src="https://cse.google.com/cse.js?cx=011220921317074318178:ufsd-ukx1ii"></script>
   <div class="gcse-search"></div>
 </div>
diff --git a/src/content/server/index.md b/src/content/server/index.md
index 2293cfaa13..af692b5861 100644
--- a/src/content/server/index.md
+++ b/src/content/server/index.md
@@ -8,8 +8,8 @@ toc: false
 This page points to tools and documentation
 that can help you develop command-line and server apps.
 
-<p class="text-center">
-  <a href="/tutorials/server/get-started" class="btn btn-primary btn-lg">Get started</a>
+<p class="centered-rows">
+  <a href="/tutorials/server/get-started" class="filled-button">Get started</a>
 </p>
 
 
diff --git a/src/content/web/index.md b/src/content/web/index.md
index d180dab713..d5087e7281 100644
--- a/src/content/web/index.md
+++ b/src/content/web/index.md
@@ -22,18 +22,21 @@ using [Flutter][] and [Flutter web][] support.
 Flutter web support
 and other web app frameworks for Dart are powered by the Dart web platform.
 
-<p class="text-center">
-  <a href="/web/get-started" class="btn btn-primary btn-lg">Build a web app with Dart</a>
+<div class="side-by-side">
+<div class="centered-rows">
+<p class="">
+  <a href="/web/get-started" class="filled-button">Build a web app with Dart</a>
 </p>
-
-<p class="text-center">
-  <br>
+</div>
+<div class="centered-rows">
+<figure>
   <img 
     src="/assets/img/flutter-gallery.jpg"
     alt="screenshot of Flutter Gallery">
-  <br>
-  <em>Flutter Gallery, running in a web browser</em>
-</p>
+  <figcaption>Flutter Gallery, running in a web browser</figcaption>
+</figure>
+</div>
+</div>
 
 [core libraries]: /libraries#web-platform-libraries
 [DOM]: /web/get-started