From d2e3286929a8d77eaa9b2e9b85923a0f2b16e843 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 31 Oct 2020 10:27:17 -0700
Subject: [PATCH 1/2] Add class name so the utility generates

---
 scss/_utilities.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 481eaa82f8a8..7c98e6f5141d 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -400,6 +400,7 @@ $utilities: map-merge(
     ),
     "font-weight": (
       property: font-weight,
+      class: fw,
       values: (
         light: $font-weight-light,
         lighter: $font-weight-lighter,

From 9f002f2da4ade9c5258580cb31b45235500b12f0 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 31 Oct 2020 10:27:30 -0700
Subject: [PATCH 2/2] Update instances of .font-weight to .fw

---
 .../docs/5.0/examples/album/index.html        |  2 +-
 .../content/docs/5.0/examples/blog/index.html |  2 +-
 .../docs/5.0/examples/cover/index.html        |  2 +-
 .../docs/5.0/examples/pricing/index.html      |  8 +++---
 .../docs/5.0/examples/product/index.html      |  4 +--
 .../docs/5.0/examples/sign-in/index.html      |  2 +-
 .../docs/5.0/getting-started/contents.md      | 24 ++++++++---------
 site/content/docs/5.0/layout/containers.md    | 26 +++++++++----------
 site/content/docs/5.0/layout/grid.md          | 14 +++++-----
 site/layouts/_default/single.html             |  2 +-
 site/layouts/partials/docs-sidebar.html       |  2 +-
 .../partials/home/masthead-followup.html      | 16 ++++++------
 12 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/site/content/docs/5.0/examples/album/index.html b/site/content/docs/5.0/examples/album/index.html
index 5219acbbac23..b33ded4123c6 100644
--- a/site/content/docs/5.0/examples/album/index.html
+++ b/site/content/docs/5.0/examples/album/index.html
@@ -40,7 +40,7 @@ <h4 class="text-white">Contact</h4>
   <section class="py-5 text-center container">
     <div class="row py-lg-5">
       <div class="col-lg-6 col-md-8 mx-auto">
-        <h1 class="font-weight-light">Album example</h1>
+        <h1 class="fw-light">Album example</h1>
         <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
         <p>
           <a href="#" class="btn btn-primary my-2">Main call to action</a>
diff --git a/site/content/docs/5.0/examples/blog/index.html b/site/content/docs/5.0/examples/blog/index.html
index a6a3fc770ae7..e7db04a6394f 100644
--- a/site/content/docs/5.0/examples/blog/index.html
+++ b/site/content/docs/5.0/examples/blog/index.html
@@ -48,7 +48,7 @@
     <div class="col-md-6 px-0">
       <h1 class="display-4 font-italic">Title of a longer featured blog post</h1>
       <p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
-      <p class="lead mb-0"><a href="#" class="text-white font-weight-bold">Continue reading...</a></p>
+      <p class="lead mb-0"><a href="#" class="text-white fw-bold">Continue reading...</a></p>
     </div>
   </div>
 
diff --git a/site/content/docs/5.0/examples/cover/index.html b/site/content/docs/5.0/examples/cover/index.html
index ea5b0b13adb9..2eb33e634a13 100644
--- a/site/content/docs/5.0/examples/cover/index.html
+++ b/site/content/docs/5.0/examples/cover/index.html
@@ -24,7 +24,7 @@ <h3 class="float-md-left mb-0">Cover</h3>
     <h1>Cover your page.</h1>
     <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
     <p class="lead">
-      <a href="#" class="btn btn-lg btn-secondary font-weight-bold border-white bg-white">Learn more</a>
+      <a href="#" class="btn btn-lg btn-secondary fw-bold border-white bg-white">Learn more</a>
     </p>
   </main>
 
diff --git a/site/content/docs/5.0/examples/pricing/index.html b/site/content/docs/5.0/examples/pricing/index.html
index 70f7ad221c03..bcd69005da8b 100644
--- a/site/content/docs/5.0/examples/pricing/index.html
+++ b/site/content/docs/5.0/examples/pricing/index.html
@@ -7,7 +7,7 @@
 ---
 
 <header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
-  <p class="h5 my-0 mr-md-auto font-weight-normal">Company name</p>
+  <p class="h5 my-0 mr-md-auto fw-normal">Company name</p>
   <nav class="my-2 my-md-0 mr-md-3">
     <a class="p-2 text-dark" href="#">Features</a>
     <a class="p-2 text-dark" href="#">Enterprise</a>
@@ -27,7 +27,7 @@ <h1 class="display-4">Pricing</h1>
     <div class="col">
       <div class="card mb-4 shadow-sm">
       <div class="card-header">
-        <h4 class="my-0 font-weight-normal">Free</h4>
+        <h4 class="my-0 fw-normal">Free</h4>
       </div>
       <div class="card-body">
         <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
@@ -44,7 +44,7 @@ <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</sma
     <div class="col">
       <div class="card mb-4 shadow-sm">
       <div class="card-header">
-        <h4 class="my-0 font-weight-normal">Pro</h4>
+        <h4 class="my-0 fw-normal">Pro</h4>
       </div>
       <div class="card-body">
         <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
@@ -61,7 +61,7 @@ <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</sm
     <div class="col">
       <div class="card mb-4 shadow-sm">
       <div class="card-header">
-        <h4 class="my-0 font-weight-normal">Enterprise</h4>
+        <h4 class="my-0 fw-normal">Enterprise</h4>
       </div>
       <div class="card-body">
         <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
diff --git a/site/content/docs/5.0/examples/product/index.html b/site/content/docs/5.0/examples/product/index.html
index 42cbe8d1667c..5f626aea9f6a 100644
--- a/site/content/docs/5.0/examples/product/index.html
+++ b/site/content/docs/5.0/examples/product/index.html
@@ -23,8 +23,8 @@
 <main>
   <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
     <div class="col-md-5 p-lg-5 mx-auto my-5">
-      <h1 class="display-4 font-weight-normal">Punny headline</h1>
-      <p class="lead font-weight-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.</p>
+      <h1 class="display-4 fw-normal">Punny headline</h1>
+      <p class="lead fw-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.</p>
       <a class="btn btn-outline-secondary" href="#">Coming soon</a>
     </div>
     <div class="product-device shadow-sm d-none d-md-block"></div>
diff --git a/site/content/docs/5.0/examples/sign-in/index.html b/site/content/docs/5.0/examples/sign-in/index.html
index afaa140ff6a8..7ad6b41c7943 100644
--- a/site/content/docs/5.0/examples/sign-in/index.html
+++ b/site/content/docs/5.0/examples/sign-in/index.html
@@ -10,7 +10,7 @@
 <main class="form-signin">
   <form>
     <img class="mb-4" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
-    <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
+    <h1 class="h3 mb-3 fw-normal">Please sign in</h1>
     <label for="inputEmail" class="visually-hidden">Email address</label>
     <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
     <label for="inputPassword" class="visually-hidden">Password</label>
diff --git a/site/content/docs/5.0/getting-started/contents.md b/site/content/docs/5.0/getting-started/contents.md
index e3667d3afa4c..1359b9dcf8b5 100644
--- a/site/content/docs/5.0/getting-started/contents.md
+++ b/site/content/docs/5.0/getting-started/contents.md
@@ -65,8 +65,8 @@ Bootstrap includes a handful of options for including some or all of our compile
   <tbody>
     <tr>
       <th scope="row">
-        <div><code class="font-weight-normal text-nowrap">bootstrap.css</code></div>
-        <div><code class="font-weight-normal text-nowrap">bootstrap.min.css</code></div>
+        <div><code class="fw-normal text-nowrap">bootstrap.css</code></div>
+        <div><code class="fw-normal text-nowrap">bootstrap.min.css</code></div>
       </th>
       <td>Included</td>
       <td>Included</td>
@@ -75,8 +75,8 @@ Bootstrap includes a handful of options for including some or all of our compile
     </tr>
     <tr>
       <th scope="row">
-        <div><code class="font-weight-normal text-nowrap">bootstrap-grid.css</code></div>
-        <div><code class="font-weight-normal text-nowrap">bootstrap-grid.min.css</code></div>
+        <div><code class="fw-normal text-nowrap">bootstrap-grid.css</code></div>
+        <div><code class="fw-normal text-nowrap">bootstrap-grid.min.css</code></div>
       </th>
       <td><a class="link-secondary" href="{{< docsref "/layout/grid" >}}">Only grid system</a></td>
       <td class="text-muted">&mdash;</td>
@@ -85,8 +85,8 @@ Bootstrap includes a handful of options for including some or all of our compile
     </tr>
     <tr>
       <th scope="row">
-        <div><code class="font-weight-normal text-nowrap">bootstrap-utilities.css</code></div>
-        <div><code class="font-weight-normal text-nowrap">bootstrap-utilities.min.css</code></div>
+        <div><code class="fw-normal text-nowrap">bootstrap-utilities.css</code></div>
+        <div><code class="fw-normal text-nowrap">bootstrap-utilities.min.css</code></div>
       </th>
       <td class="text-muted">&mdash;</td>
       <td class="text-muted">&mdash;</td>
@@ -95,8 +95,8 @@ Bootstrap includes a handful of options for including some or all of our compile
     </tr>
     <tr>
       <th scope="row">
-        <div><code class="font-weight-normal text-nowrap">bootstrap-reboot.css</code></div>
-        <div><code class="font-weight-normal text-nowrap">bootstrap-reboot.min.css</code></div>
+        <div><code class="fw-normal text-nowrap">bootstrap-reboot.css</code></div>
+        <div><code class="fw-normal text-nowrap">bootstrap-reboot.min.css</code></div>
       </th>
       <td class="text-muted">&mdash;</td>
       <td><a class="link-secondary" href="{{< docsref "/content/reboot" >}}">Only Reboot</a></td>
@@ -120,15 +120,15 @@ Similarly, we have options for including some or all of our compiled JavaScript.
   <tbody>
     <tr>
       <th scope="row">
-        <div><code class="font-weight-normal text-nowrap">bootstrap.bundle.js</code></div>
-        <div><code class="font-weight-normal text-nowrap">bootstrap.bundle.min.js</code></div>
+        <div><code class="fw-normal text-nowrap">bootstrap.bundle.js</code></div>
+        <div><code class="fw-normal text-nowrap">bootstrap.bundle.min.js</code></div>
       </th>
       <td>Included</td>
     </tr>
     <tr>
       <th scope="row">
-        <div><code class="font-weight-normal text-nowrap">bootstrap.js</code></div>
-        <div><code class="font-weight-normal text-nowrap">bootstrap.min.js</code></div>
+        <div><code class="fw-normal text-nowrap">bootstrap.js</code></div>
+        <div><code class="fw-normal text-nowrap">bootstrap.min.js</code></div>
       </th>
       <td class="text-muted">&mdash;</td>
     </tr>
diff --git a/site/content/docs/5.0/layout/containers.md b/site/content/docs/5.0/layout/containers.md
index 425d70e14bb5..456225b942b5 100644
--- a/site/content/docs/5.0/layout/containers.md
+++ b/site/content/docs/5.0/layout/containers.md
@@ -26,33 +26,33 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
       <td class="border-dark"></td>
       <th scope="col">
         Extra small<br>
-        <span class="font-weight-normal">&lt;576px</span>
+        <span class="fw-normal">&lt;576px</span>
       </th>
       <th scope="col">
         Small<br>
-        <span class="font-weight-normal">&ge;576px</span>
+        <span class="fw-normal">&ge;576px</span>
       </th>
       <th scope="col">
         Medium<br>
-        <span class="font-weight-normal">&ge;768px</span>
+        <span class="fw-normal">&ge;768px</span>
       </th>
       <th scope="col">
         Large<br>
-        <span class="font-weight-normal">&ge;992px</span>
+        <span class="fw-normal">&ge;992px</span>
       </th>
       <th scope="col">
         X-Large<br>
-        <span class="font-weight-normal">&ge;1200px</span>
+        <span class="fw-normal">&ge;1200px</span>
       </th>
       <th scope="col">
         XX-Large<br>
-        <span class="font-weight-normal">&ge;1400px</span>
+        <span class="fw-normal">&ge;1400px</span>
       </th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th scope="row" class="font-weight-normal"><code>.container</code></th>
+      <th scope="row" class="fw-normal"><code>.container</code></th>
       <td class="text-muted">100%</td>
       <td>540px</td>
       <td>720px</td>
@@ -61,7 +61,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
       <td>1320px</td>
     </tr>
     <tr>
-      <th scope="row" class="font-weight-normal"><code>.container-sm</code></th>
+      <th scope="row" class="fw-normal"><code>.container-sm</code></th>
       <td class="text-muted">100%</td>
       <td>540px</td>
       <td>720px</td>
@@ -70,7 +70,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
       <td>1320px</td>
     </tr>
     <tr>
-      <th scope="row" class="font-weight-normal"><code>.container-md</code></th>
+      <th scope="row" class="fw-normal"><code>.container-md</code></th>
       <td class="text-muted">100%</td>
       <td class="text-muted">100%</td>
       <td>720px</td>
@@ -79,7 +79,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
       <td>1320px</td>
     </tr>
     <tr>
-      <th scope="row" class="font-weight-normal"><code>.container-lg</code></th>
+      <th scope="row" class="fw-normal"><code>.container-lg</code></th>
       <td class="text-muted">100%</td>
       <td class="text-muted">100%</td>
       <td class="text-muted">100%</td>
@@ -88,7 +88,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
       <td>1320px</td>
     </tr>
     <tr>
-      <th scope="row" class="font-weight-normal"><code>.container-xl</code></th>
+      <th scope="row" class="fw-normal"><code>.container-xl</code></th>
       <td class="text-muted">100%</td>
       <td class="text-muted">100%</td>
       <td class="text-muted">100%</td>
@@ -97,7 +97,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
       <td>1320px</td>
     </tr>
     <tr>
-      <th scope="row" class="font-weight-normal"><code>.container-xxl</code></th>
+      <th scope="row" class="fw-normal"><code>.container-xxl</code></th>
       <td class="text-muted">100%</td>
       <td class="text-muted">100%</td>
       <td class="text-muted">100%</td>
@@ -106,7 +106,7 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
       <td>1320px</td>
     </tr>
     <tr>
-      <th scope="row" class="font-weight-normal"><code>.container-fluid</code></th>
+      <th scope="row" class="fw-normal"><code>.container-fluid</code></th>
       <td class="text-muted">100%</td>
       <td class="text-muted">100%</td>
       <td class="text-muted">100%</td>
diff --git a/site/content/docs/5.0/layout/grid.md b/site/content/docs/5.0/layout/grid.md
index c96e3aa9e933..76b65c1bc6b8 100644
--- a/site/content/docs/5.0/layout/grid.md
+++ b/site/content/docs/5.0/layout/grid.md
@@ -69,33 +69,33 @@ As noted above, each of these breakpoints have their own container, unique class
       <th scope="col"></th>
       <th scope="col">
         xs<br>
-        <span class="font-weight-normal">&lt;576px</span>
+        <span class="fw-normal">&lt;576px</span>
       </th>
       <th scope="col">
         sm<br>
-        <span class="font-weight-normal">&ge;576px</span>
+        <span class="fw-normal">&ge;576px</span>
       </th>
       <th scope="col">
         md<br>
-        <span class="font-weight-normal">&ge;768px</span>
+        <span class="fw-normal">&ge;768px</span>
       </th>
       <th scope="col">
         lg<br>
-        <span class="font-weight-normal">&ge;992px</span>
+        <span class="fw-normal">&ge;992px</span>
       </th>
       <th scope="col">
         xl<br>
-        <span class="font-weight-normal">&ge;1200px</span>
+        <span class="fw-normal">&ge;1200px</span>
       </th>
       <th scope="col">
         xxl<br>
-        <span class="font-weight-normal">&ge;1400px</span>
+        <span class="fw-normal">&ge;1400px</span>
       </th>
     </tr>
   </thead>
   <tbody>
     <tr>
-      <th class="text-nowrap" scope="row">Container <code class="font-weight-normal">max-width</code></th>
+      <th class="text-nowrap" scope="row">Container <code class="fw-normal">max-width</code></th>
       <td>None (auto)</td>
       <td>540px</td>
       <td>720px</td>
diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html
index fd228314f4ee..6582e57b37d6 100644
--- a/site/layouts/_default/single.html
+++ b/site/layouts/_default/single.html
@@ -33,7 +33,7 @@ <h1 class="bd-title mt-0">{{ .Title | markdownify }}</h1>
               <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger">
                 {{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
               </div>
-              <h2 class="display-6 font-weight-normal">Go further with Bootstrap Themes</h2>
+              <h2 class="display-6 fw-normal">Go further with Bootstrap Themes</h2>
               <p class="col-md-10 col-lg-8 mx-auto lead">
                 Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
               </p>
diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html
index 776da2db128b..6a39f5bc0358 100644
--- a/site/layouts/partials/docs-sidebar.html
+++ b/site/layouts/partials/docs-sidebar.html
@@ -22,7 +22,7 @@
 
       {{- if $group.pages }}
       <div class="collapse{{ if $is_active_group }} show{{ end }}" id="{{ $group_slug }}-collapse">
-        <ul class="list-unstyled font-weight-normal pb-1 small">
+        <ul class="list-unstyled fw-normal pb-1 small">
           {{- range $doc := $group.pages -}}
             {{- $doc_slug := $doc.title | urlize -}}
             {{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
diff --git a/site/layouts/partials/home/masthead-followup.html b/site/layouts/partials/home/masthead-followup.html
index 24defc0fdf1f..cacc170eff10 100644
--- a/site/layouts/partials/home/masthead-followup.html
+++ b/site/layouts/partials/home/masthead-followup.html
@@ -4,8 +4,8 @@
       <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-success">
         {{ partial "icons/code.svg" (dict "width" "32" "height" "32") }}
       </div>
-      <h2 class="display-5 font-weight-normal">Installation</h2>
-      <p class="lead font-weight-normal">
+      <h2 class="display-5 fw-normal">Installation</h2>
+      <p class="lead fw-normal">
         Install Bootstrap’s source Sass and JavaScript files via npm, Composer, or Meteor.
       </p>
       <p>Package managed installs don’t include documentation or our full build scripts. You can also <a href="https://github.com/twbs/bootstrap-npm-starter">use our npm template repo</a> to quickly generate a Bootstrap project via npm.</p>
@@ -22,8 +22,8 @@ <h2 class="display-5 font-weight-normal">Installation</h2>
       <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-primary">
         {{ partial "icons/cloud-fill.svg" (dict "width" "32" "height" "32") }}
       </div>
-      <h2 class="display-5 font-weight-normal">jsDelivr</h2>
-      <p class="lead font-weight-normal">
+      <h2 class="display-5 fw-normal">jsDelivr</h2>
+      <p class="lead fw-normal">
         When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.jsdelivr.com/">jsDelivr</a>.
       </p>
       <p>
@@ -44,8 +44,8 @@ <h2 class="display-5 font-weight-normal">jsDelivr</h2>
       <div class="masthead-followup-icon d-inline-block mb-2 text-white bd-bg-purple-bright">
         {{ partial "icons/circle-square.svg" (dict "width" "32" "height" "32") }}
       </div>
-      <h2 class="display-5 font-weight-normal">Bootstrap Icons</h2>
-      <p class="lead font-weight-normal">
+      <h2 class="display-5 fw-normal">Bootstrap Icons</h2>
+      <p class="lead fw-normal">
         For the first time ever, Bootstrap has its own open source SVG icon library, designed to work best with our components and documentation.
       </p>
       <p>
@@ -66,8 +66,8 @@ <h2 class="display-5 font-weight-normal">Bootstrap Icons</h2>
       <div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger">
         {{ partial "icons/droplet-fill.svg" (dict "width" "32" "height" "32") }}
       </div>
-      <h2 class="display-5 font-weight-normal">Official Themes</h2>
-      <p class="lead font-weight-normal">
+      <h2 class="display-5 fw-normal">Official Themes</h2>
+      <p class="lead fw-normal">
         Take Bootstrap to the next level with premium themes from the <a href="{{ .Site.Params.themes }}">official Bootstrap Themes marketplace</a>.
       </p>
       <p>