Apply utilities in docs styles (#30866)

* docs(theming): apply utilities where possible

* Update docs-sidebar.html

Co-authored-by: XhmikosR <[email protected]>

16 files changed, 40 insertions, 80 deletions

diff --git a/site/assets/scss/_brand.scss b/site/assets/scss/_brand.scss
index be6aa91ff..1585e4f7a 100644
--- a/site/assets/scss/_brand.scss
+++ b/site/assets/scss/_brand.scss
@@ -14,7 +14,6 @@
 
 // Individual items
 .bd-brand-item {
-  width: 100%;
   padding: 4rem 1rem;
 
   + .bd-brand-item {
@@ -35,7 +34,6 @@
 //
 
 .color-swatches {
-  display: flex;
   margin: 0 -5px;
 
   // Docs colors
@@ -56,9 +54,6 @@
 .color-swatch {
   width: 4rem;
   height: 4rem;
-  margin-right: .25rem;
-  margin-left: .25rem;
-  @include border-radius();
 
   @include media-breakpoint-up(md) {
     width: 6rem;
diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss
index 751ce3c76..a71a8973b 100644
--- a/site/assets/scss/_colors.scss
+++ b/site/assets/scss/_colors.scss
@@ -152,5 +152,5 @@
 .bd-gray-800 { color: color-contrast($gray-800); background-color: $gray-800; }
 .bd-gray-900 { color: color-contrast($gray-900); background-color: $gray-900; }
 
-.bd-white { color: color-yiq($white); background-color: $white; }
-.bd-black { color: color-yiq($black); background-color: $black; }
+.bd-white { color: color-contrast($white); background-color: $white; }
+.bd-black { color: color-contrast($black); background-color: $black; }
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index 4ba926c90..4e744895f 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -3,8 +3,6 @@
 //
 
 .bd-content {
-  order: 1;
-
   // Offset for the sticky header
   > [id] {
     @include media-breakpoint-up(md) {
diff --git a/site/assets/scss/_footer.scss b/site/assets/scss/_footer.scss
index 0d9bf454a..48ad349de 100644
--- a/site/assets/scss/_footer.scss
+++ b/site/assets/scss/_footer.scss
@@ -15,21 +15,4 @@
       color: $link-color;
     }
   }
-
-  p {
-    margin-bottom: 0;
-  }
-}
-
-.bd-footer-links {
-  padding-left: 0;
-  margin-bottom: 1rem;
-
-  li {
-    display: inline-block;
-
-    + li {
-      margin-left: 1rem;
-    }
-  }
 }
diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
index f70b4b837..e524f271a 100644
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -28,8 +28,6 @@
 .home-icon {
   width: 6rem;
   height: 6rem;
-  padding: 1.5rem;
-  color: $white;
   @include border-radius(25%);
   box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
 }
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index c8e1a2d30..54d0c425c 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -5,10 +5,8 @@
   @include media-breakpoint-down(md) {
     .navbar-nav-scroll {
       width: 100%;
-      margin-top: .25rem;
 
       .navbar-nav {
-        padding: .5rem 0;
         margin: -.5rem 0;
         overflow-x: auto;
         white-space: nowrap;
@@ -34,9 +32,7 @@
   }
 
   .navbar-nav-svg {
-    display: inline-block;
     width: 1rem;
     height: 1rem;
-    vertical-align: text-top;
   }
 }
diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss
index 4e9e0846c..be871354d 100644
--- a/site/assets/scss/_sidebar.scss
+++ b/site/assets/scss/_sidebar.scss
@@ -15,13 +15,10 @@
   }
 
   a {
-    display: inline-flex;
-    align-items: center;
     padding: .1875rem .5rem;
     margin-top: .125rem;
     color: rgba($black, .65);
     text-decoration: if($link-decoration == none, null, none);
-    @include border-radius(.25rem);
 
     &:hover,
     &:focus {
@@ -57,7 +54,6 @@
     // Adjust font size and font weights in submenu
     + ul {
       @include font-size(.875rem);
-      font-weight: 400;
     }
   }
 
diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss
index fac919e22..e3ce8ba14 100644
--- a/site/assets/scss/_subnav.scss
+++ b/site/assets/scss/_subnav.scss
@@ -26,8 +26,6 @@
 }
 
 .bd-search {
-  position: relative; // To contain the Algolia search
-
   @include media-breakpoint-down(sm) {
     width: 100%;
   }
@@ -37,7 +35,3 @@
     box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
   }
 }
-
-.bd-search-docs-toggle {
-  color: $gray-900;
-}
diff --git a/site/content/docs/5.0/about/brand.md b/site/content/docs/5.0/about/brand.md
index e087f804b..290f92e3f 100644
--- a/site/content/docs/5.0/about/brand.md
+++ b/site/content/docs/5.0/about/brand.md
@@ -13,18 +13,18 @@ Have a need for Bootstrap's brand resources? Great! We have only a few guideline
 Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Bootstrap**). It should always appear in San Francisco Display Semibold. **Do not use the Twitter bird** in association with Bootstrap.
 
 <div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
-  <div class="bd-brand-item">
+  <div class="bd-brand-item w-100">
     <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
   </div>
-  <div class="bd-brand-item inverse">
+  <div class="bd-brand-item w-100 inverse">
     <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
   </div>
 </div>
 <div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
-  <div class="bd-brand-item">
+  <div class="bd-brand-item w-100">
     <span class="h1">Bootstrap</span>
   </div>
-  <div class="bd-brand-item inverse">
+  <div class="bd-brand-item w-100 inverse">
     <span class="h1">Bootstrap</span>
   </div>
 </div>
@@ -34,13 +34,13 @@ Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Boo
 Download the Bootstrap mark in one of three styles, each available as an SVG file. **Click to download the logos**.
 
 <div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
-  <a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" download class="bd-brand-item" title="Download solid logo">
+  <a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" download class="bd-brand-item w-100" title="Download solid logo">
     <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
   </a>
-  <a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" download class="bd-brand-item inverse" title="Download outlined logo">
+  <a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" download class="bd-brand-item w-100 inverse" title="Download outlined logo">
     <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
   </a>
-  <a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-punchout.svg" download class="bd-brand-item inverse" title="Download inverted logo">
+  <a href="/docs/{{< param docs_version >}}/assets/brand/bootstrap-punchout.svg" download class="bd-brand-item w-100 inverse" title="Download inverted logo">
     <img src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
   </a>
 </div>
@@ -50,15 +50,15 @@ Download the Bootstrap mark in one of three styles, each available as an SVG fil
 The project and framework should always be referred to as **Bootstrap**. No Twitter before it, no capital _s_, and no abbreviations except for one, a capital **B**.
 
 <div class="bd-brand-logos d-sm-flex text-center bg-light rounded overflow-hidden w-100 mb-3">
-  <div class="bd-brand-item">
+  <div class="bd-brand-item w-100">
     <span class="h3">Bootstrap</span>
     <strong class="text-success">Right</strong>
   </div>
-  <div class="bd-brand-item">
+  <div class="bd-brand-item w-100">
     <span class="h3 text-muted">BootStrap</span>
     <strong class="text-warning">Wrong</strong>
   </div>
-  <div class="bd-brand-item">
+  <div class="bd-brand-item w-100">
     <span class="h3 text-muted">Twitter Bootstrap</span>
     <strong class="text-warning">Wrong</strong>
   </div>
@@ -68,9 +68,9 @@ The project and framework should always be referred to as **Bootstrap**. No Twit
 
 Our docs and branding use a handful of primary colors to differentiate what *is* Bootstrap from what *is in* Bootstrap. In other words, if it's purple, it's representative of Bootstrap.
 
-<div class="color-swatches">
-  <div class="color-swatch bd-purple"></div>
-  <div class="color-swatch bd-purple-light"></div>
-  <div class="color-swatch bd-purple-lighter"></div>
-  <div class="color-swatch bd-gray"></div>
+<div class="color-swatches d-flex">
+  <div class="color-swatch bd-purple rounded mx-1"></div>
+  <div class="color-swatch bd-purple-light rounded mx-1"></div>
+  <div class="color-swatch bd-purple-lighter rounded mx-1"></div>
+  <div class="color-swatch bd-gray rounded mx-1"></div>
 </div>
diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index 41757d423..01890869a 100644
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -27,7 +27,7 @@
         </div>
       {{ end }}
 
-      <main class="bd-content pl-lg-4">
+      <main class="bd-content order-1 pl-lg-4">
         {{ if .Page.Params.sections }}
           <div class="row g-3">
             {{ range .Page.Params.sections }}
diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html
index 8ffbda50b..0ce75ce28 100644
--- a/site/layouts/_default/single.html
+++ b/site/layouts/_default/single.html
@@ -20,7 +20,7 @@
       </div>
     </header>
 
-    <main class="bd-content py-5" id="content">
+    <main class="bd-content order-1 py-5" id="content">
       <div class="container">
         {{ .Content }}
       </div>
diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index 4965adecc..410008494 100644
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -4,8 +4,8 @@
       {{ partial "icons/bootstrap-logo-solid.svg" (dict "class" "d-block" "width" "32" "height" "32") }}
     </a>
 
-    <div class="navbar-nav-scroll order-3 order-md-0 d-flex justify-content-center justify-content-md-start">
-      <ul class="navbar-nav bd-navbar-nav flex-row">
+    <div class="navbar-nav-scroll order-3 order-md-0 d-flex justify-content-center justify-content-md-start mt-1 mt-md-0">
+      <ul class="navbar-nav bd-navbar-nav flex-row py-2 py-md-0">
         <li class="nav-item">
           <a class="nav-link{{ if .IsHome }} active" aria-current="page{{ end }}" href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
         </li>
@@ -33,22 +33,22 @@
     <ul class="navbar-nav ml-sm-auto">
       <li class="nav-item">
         <a class="nav-link px-1 mx-1 py-2" href="{{ .Site.Params.github_org }}" target="_blank" rel="noopener" aria-label="GitHub">
-          {{ partial "icons/github.svg" (dict "class" "navbar-nav-svg" "width" "36" "height" "36") }}
+          {{ partial "icons/github.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
         </a>
       </li>
       <li class="nav-item">
         <a class="nav-link px-1 mx-1 py-2" href="https://twitter.com/{{ .Site.Params.twitter }}" target="_blank" rel="noopener" aria-label="Twitter">
-          {{ partial "icons/twitter.svg" (dict "class" "navbar-nav-svg" "width" "36" "height" "36") }}
+          {{ partial "icons/twitter.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
         </a>
       </li>
       <li class="nav-item">
         <a class="nav-link px-1 mx-1 py-2" href="{{ .Site.Params.slack }}" target="_blank" rel="noopener" aria-label="Slack">
-          {{ partial "icons/slack.svg" (dict "class" "navbar-nav-svg" "width" "36" "height" "36") }}
+          {{ partial "icons/slack.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
         </a>
       </li>
       <li class="nav-item">
         <a class="nav-link px-1 mx-1 py-2" href="{{ .Site.Params.opencollective }}" target="_blank" rel="noopener" aria-label="Open Collective">
-          {{ partial "icons/opencollective.svg" (dict "class" "navbar-nav-svg" "width" "36" "height" "36") }}
+          {{ partial "icons/opencollective.svg" (dict "class" "navbar-nav-svg d-inline-block align-text-top" "width" "36" "height" "36") }}
         </a>
       </li>
     </ul>
diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html
index 23e9bbad3..6a665b826 100644
--- a/site/layouts/partials/docs-sidebar.html
+++ b/site/layouts/partials/docs-sidebar.html
@@ -16,17 +16,17 @@
     {{- $is_active_group := eq $.Page.Params.group $group_slug }}
 
     <li class="my-1{{ if $is_active_group }} active{{ end }}">
-      <a class="{{ if not $is_active_group }}collapsed{{ end }}" data-toggle="collapse" href="#{{ $group_slug }}-collapse" role="button" aria-expanded="{{ $is_active_group }}"{{ if $is_active_group }} aria-current="true"{{ end }}>
+      <a class="d-inline-flex align-items-center rounded{{ if not $is_active_group }} collapsed{{ end }}" data-toggle="collapse" href="#{{ $group_slug }}-collapse" role="button" aria-expanded="{{ $is_active_group }}"{{ if $is_active_group }} aria-current="true"{{ end }}>
         {{ $group.title }}
       </a>
 
       {{- if $group.pages }}
-      <ul class="list-unstyled mb-2 collapse{{ if $is_active_group }} show{{ end }}" id="{{ $group_slug }}-collapse">
+      <ul class="list-unstyled font-weight-normal mb-2 collapse{{ if $is_active_group }} show{{ end }}" id="{{ $group_slug }}-collapse">
         {{- range $doc := $group.pages -}}
           {{- $doc_slug := $doc.title | urlize -}}
           {{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
           {{- $href := printf "/docs/%s/%s/%s/" $.Site.Params.docs_version $group_slug $doc_slug }}
-          <li><a href="{{ $href }}"{{ if $is_active }} class="active" aria-current="page"{{ end }}>{{ $doc.title }}</a></li>
+          <li><a href="{{ $href }}" class="d-inline-flex align-items-center rounded{{ if $is_active }} active{{ end }}"{{ if $is_active }} aria-current="page"{{ end }}>{{ $doc.title }}</a></li>
         {{- end }}
       </ul>
       {{- end }}
@@ -35,7 +35,7 @@
 
     <li class="my-3 mx-4 border-top"></li>
     <li{{ if eq $page_slug "migration" }} class="active"{{ end }}>
-      <a href="/docs/{{ $.Site.Params.docs_version }}/migration/">
+      <a href="/docs/{{ $.Site.Params.docs_version }}/migration/" class="d-inline-flex align-items-center rounded">
         Migration
       </a>
     </li>
diff --git a/site/layouts/partials/docs-subnav.html b/site/layouts/partials/docs-subnav.html
index 6d60640ef..bb082cccd 100644
--- a/site/layouts/partials/docs-subnav.html
+++ b/site/layouts/partials/docs-subnav.html
@@ -1,6 +1,6 @@
 <nav class="bd-subnavbar pt-2 pb-3 pb-md-2" aria-label="Secondary navigation">
   <div class="container-xl d-flex align-items-md-center flex-wrap">
-    <form class="bd-search mb-2 mb-md-0 mr-auto">
+    <form class="bd-search position-relative mb-2 mb-md-0 mr-auto">
       <input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-docs-version="{{ .Site.Params.docs_version }}">
     </form>
 
diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
index 8c650a5d0..2076c426e 100644
--- a/site/layouts/partials/footer.html
+++ b/site/layouts/partials/footer.html
@@ -1,12 +1,12 @@
 <footer class="bd-footer p-3 p-md-5 mt-5 bg-light text-center text-sm-left">
   <div class="container">
-    <ul class="bd-footer-links">
-      <li><a href="{{ .Site.Params.github_org }}">GitHub</a></li>
-      <li><a href="https://twitter.com/{{ .Site.Params.twitter }}">Twitter</a></li>
-      <li><a href="/docs/{{ .Site.Params.docs_version }}/examples/">Examples</a></li>
-      <li><a href="/docs/{{ .Site.Params.docs_version }}/about/overview/">About</a></li>
+    <ul class="bd-footer-links pl-0 mb-3">
+      <li class="d-inline-block"><a href="{{ .Site.Params.github_org }}">GitHub</a></li>
+      <li class="d-inline-block ml-3"><a href="https://twitter.com/{{ .Site.Params.twitter }}">Twitter</a></li>
+      <li class="d-inline-block ml-3"><a href="/docs/{{ .Site.Params.docs_version }}/examples/">Examples</a></li>
+      <li class="d-inline-block ml-3"><a href="/docs/{{ .Site.Params.docs_version }}/about/overview/">About</a></li>
     </ul>
-    <p>Designed and built with all the love in the world by the <a href="/docs/{{ .Site.Params.docs_version }}/about/team/">Bootstrap team</a> with the help of <a href="{{ .Site.Params.repo }}/graphs/contributors">our contributors</a>.</p>
-    <p>Currently v{{ .Site.Params.current_version }}. Code licensed <a href="{{ .Site.Params.repo }}/blob/master/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
+    <p class="mb-0">Designed and built with all the love in the world by the <a href="/docs/{{ .Site.Params.docs_version }}/about/team/">Bootstrap team</a> with the help of <a href="{{ .Site.Params.repo }}/graphs/contributors">our contributors</a>.</p>
+    <p class="mb-0">Currently v{{ .Site.Params.current_version }}. Code licensed <a href="{{ .Site.Params.repo }}/blob/master/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
   </div>
 </footer>
diff --git a/site/layouts/partials/home/masthead-followup.html b/site/layouts/partials/home/masthead-followup.html
index 0c8f26063..13d42a282 100644
--- a/site/layouts/partials/home/masthead-followup.html
+++ b/site/layouts/partials/home/masthead-followup.html
@@ -1,7 +1,7 @@
 {{ "<!-- Icons by Bytesize https://github.com/danklammer/bytesize-icons -->" | safeHTML }}
 
 <div class="container py-3 my-3 py-md-5 my-md-5 text-center">
-  <div class="home-icon home-icon-blue mx-auto mb-3">
+  <div class="home-icon home-icon-blue text-white p-4 mx-auto mb-3">
     {{ partial "icons/import.svg" (dict "width" "48" "height" "48") }}
   </div>
   <h2 class="display-4">Installation</h2>
@@ -16,7 +16,7 @@
 </div>
 
 <div class="container py-3 my-3 py-md-5 my-md-5 text-center">
-  <div class="home-icon home-icon-purple mx-auto mb-3">
+  <div class="home-icon home-icon-purple text-white p-4 mx-auto mb-3">
     {{ partial "icons/download.svg" (dict "width" "48" "height" "48") }}
   </div>
   <h2 class="display-4">BootstrapCDN</h2>
@@ -35,7 +35,7 @@
 </div>
 
 <div class="container py-3 my-3 py-md-5 my-md-5 text-center">
-  <div class="home-icon home-icon-yellow mx-auto mb-3">
+  <div class="home-icon home-icon-yellow text-white p-4 mx-auto mb-3">
     {{ partial "icons/lightning.svg" (dict "width" "48" "height" "48") }}
   </div>
   <h2 class="display-4">Official Themes</h2>