enter

package-lock.json

@@ -22,6 +22,7 @@
         "@fullcalendar/daygrid": "^5.10.1",
         "@fullcalendar/interaction": "^5.10.1",
         "@ng-bootstrap/ng-bootstrap": "10.0.0",
+        "bootstrap": "^5.1.3",
         "bootstrap-icons": "^1.7.1",
         "chart.js": "2.9.4",
         "core-js": "3.15.2",
@@ -2653,6 +2654,16 @@
         "read-package-json-fast": "^2.0.1"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.0.tgz",
+      "integrity": "sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@schematics/angular": {
       "version": "13.0.3",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-13.0.3.tgz",
@@ -3913,6 +3924,18 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "node_modules/bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.10.2"
+      }
+    },
     "node_modules/bootstrap-icons": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.1.tgz",
@@ -19262,6 +19285,12 @@
         "read-package-json-fast": "^2.0.1"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.0.tgz",
+      "integrity": "sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==",
+      "peer": true
+    },
     "@schematics/angular": {
       "version": "13.0.3",
       "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-13.0.3.tgz",
@@ -20309,6 +20338,12 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "requires": {}
+    },
     "bootstrap-icons": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.7.1.tgz",

package.json

@@ -74,6 +74,7 @@
     "@fullcalendar/daygrid": "^5.10.1",
     "@fullcalendar/interaction": "^5.10.1",
     "@ng-bootstrap/ng-bootstrap": "10.0.0",
+    "bootstrap": "^5.1.3",
     "bootstrap-icons": "^1.7.1",
     "chart.js": "2.9.4",
     "core-js": "3.15.2",

src/app/app.component.scss

+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;700&family=Roboto&display=swap');
\ No newline at end of file

src/styles.scss

 /* You can add global styles to this file, and also import other style files */
+@import '~bootstrap/dist/css/bootstrap.min.css';
\ No newline at end of file