Merge pull request #2 from northhighland/bootstrap-fix

Bootstrap fix

package.json

@@ -7,6 +7,8 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/react-fontawesome": "^0.1.9",
+    "@popperjs/core": "^2.4.0",
+    "bootstrap": "^4.5.0",
     "bulma": "^0.8.0",
     "gatsby": "^2.20.35",
     "gatsby-image": "^2.3.5",
@@ -27,9 +29,11 @@
     "netlify-cms-app": "^2.9.6",
     "node-sass": "^4.14.0",
     "prop-types": "^15.6.0",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
     "react-helmet": "^6.0.0",
+    "react-popper": "^2.2.3",
+    "reactstrap": "^8.4.1",
     "uuid": "^7.0.0"
   },
   "keywords": [

src/components/Footer.js

@@ -4,15 +4,15 @@ import linkedin from '../img/social/linkedin.svg'
 const Footer = class extends React.Component {
   render() {
     return (
-      <footer class="footer py-4">
-        <div class="container">
-          <div class="row align-items-center">
-            <div class="col-lg-4 text-lg-left">
+      <footer className="footer py-4">
+        <div className="container">
+          <div className="row align-items-center">
+            <div className="col-lg-4 text-lg-left">
               Copyright © North Highland 2020
             </div>
-            <div class="col-lg-4 my-3 my-lg-0">
+            <div className="col-lg-4 my-3 my-lg-0">
               <a
-                class="btn btn-dark btn-social mx-2"
+                className="btn btn-dark btn-social mx-2"
                 href="https://www.linkedin.com/company/northhighland/"
                 target="new"
               >
@@ -23,9 +23,9 @@ const Footer = class extends React.Component {
                 />
               </a>
             </div>
-            <div class="col-lg-4 text-lg-right">
+            <div className="col-lg-4 text-lg-right">
               <a
-                class="mr-3"
+                className="mr-3"
                 href="https://www.northhighland.com/privacy-policy"
               >
                 Privacy Policy

src/components/Layout.js

@@ -1,8 +1,9 @@
 import React from 'react'
 import { Helmet } from 'react-helmet'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import './styles.css'
 import Footer from '../components/Footer'
 import Navbar from '../components/Navbar'
-import './styles.css'
 import useSiteMetadata from './SiteMetadata'
 import { withPrefix } from 'gatsby'
 //import '../js/scripts.js'
@@ -28,6 +29,7 @@ const TemplateWrapper = ({ children }) => {
       </Helmet>
       <Navbar />
       <div>{children}</div>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js"></script>
       <Footer />
     </div>
   )