diff --git a/packages/create-sitecore-jss/src/templates/react/data/routes/styleguide/en.yml b/packages/create-sitecore-jss/src/templates/react/data/routes/styleguide/en.yml
index 6d0f80ea3c..00c3625e9b 100644
--- a/packages/create-sitecore-jss/src/templates/react/data/routes/styleguide/en.yml
+++ b/packages/create-sitecore-jss/src/templates/react/data/routes/styleguide/en.yml
@@ -99,7 +99,7 @@ placeholders:
                 href: https://dev.sitecore.net
                 text: Sitecore Dev Site
                 target: _blank
-                class: font-weight-bold
+                class: fw-bold
                 title: <a> title attribute
           - componentName: Styleguide-FieldUsage-ItemLink
             fields:
diff --git a/packages/create-sitecore-jss/src/templates/react/src/Layout.js b/packages/create-sitecore-jss/src/templates/react/src/Layout.js
index 78c1463e60..d98dce5da5 100644
--- a/packages/create-sitecore-jss/src/templates/react/src/Layout.js
+++ b/packages/create-sitecore-jss/src/templates/react/src/Layout.js
@@ -23,7 +23,7 @@ import logo from './assets/sc_logo.svg';
 // Most apps may also wish to use GraphQL for their navigation construction; this sample does not simply to support disconnected mode.
 let Navigation = ({ t, i18n }) => (
   <div className="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom">
-    <h5 className="my-0 me-md-auto font-weight-normal">
+    <h5 className="my-0 me-md-auto fw-normal">
       <NavLink to="/" className="text-dark">
         <img src={logo} alt="Sitecore" />
       </NavLink>
diff --git a/packages/create-sitecore-jss/src/templates/react/src/components/Styleguide-FieldUsage-Link/index.js b/packages/create-sitecore-jss/src/templates/react/src/components/Styleguide-FieldUsage-Link/index.js
index 7f17c21ad3..0dc22095b9 100644
--- a/packages/create-sitecore-jss/src/templates/react/src/components/Styleguide-FieldUsage-Link/index.js
+++ b/packages/create-sitecore-jss/src/templates/react/src/components/Styleguide-FieldUsage-Link/index.js
@@ -26,7 +26,7 @@ const StyleguideFieldUsageLink = (props) => (
     <Link
       field={props.fields.externalLink}
       showLinkTextWithChildrenPresent={true}
-      className="font-weight-bold"
+      className="fw-bold"
       data-otherattributes="pass-through-to-anchor-tag"
     />
   </StyleguideSpecimen>
diff --git a/packages/create-sitecore-jss/src/templates/react/src/components/Styleguide-FieldUsage-Text/index.js b/packages/create-sitecore-jss/src/templates/react/src/components/Styleguide-FieldUsage-Text/index.js
index 2d0bccbb60..7e4eeaedd6 100644
--- a/packages/create-sitecore-jss/src/templates/react/src/components/Styleguide-FieldUsage-Text/index.js
+++ b/packages/create-sitecore-jss/src/templates/react/src/components/Styleguide-FieldUsage-Text/index.js
@@ -17,7 +17,7 @@ const StyleguideFieldUsageText = (props) => (
       tag="section"
       editable={false}
       encode={false}
-      className="font-weight-bold"
+      className="fw-bold"
       data-sample="other-attributes-pass-through"
     />
 
diff --git a/packages/create-sitecore-jss/src/templates/react/src/components/Styleguide-Layout/index.js b/packages/create-sitecore-jss/src/templates/react/src/components/Styleguide-Layout/index.js
index d9859da3ae..16b581f32f 100644
--- a/packages/create-sitecore-jss/src/templates/react/src/components/Styleguide-Layout/index.js
+++ b/packages/create-sitecore-jss/src/templates/react/src/components/Styleguide-Layout/index.js
@@ -23,7 +23,7 @@ const StyleguideLayout = (props) => {
     }))
     .map((section) => (
       <nav key={section.heading} className="nav flex-column pt-2">
-        <a href={`#${section.id}`} className="nav-item font-weight-bold">
+        <a href={`#${section.id}`} className="nav-item fw-bold">
           {section.heading}
         </a>
         {section.children && (