[React] Apply missing bootstrap styles after upgrade (#1341)

Author: illiakovalenko

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:

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>

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>

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"
     />
 

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 && (