bootstrap testing home

README.md

@@ -17,7 +17,8 @@
 
 ## Install Bootstrap
 - cd matsen-tool
-- npm i bootstrap @popperjs/core --save 
+- npm i bootstrap @popperjs/core --save
+- npm install bootstrap-icons 
 
 ## Install Angular Material
 - cd matsen-tool

matsen-tool/angular.json

@@ -39,6 +39,7 @@
             "styles": [
               "@angular/material/prebuilt-themes/indigo-pink.css",
               "node_modules/bootstrap/scss/bootstrap.scss",
+              "node_modules/bootstrap-icons/font/bootstrap-icons.css",
               "src/styles.scss"
             ],
             "scripts": [

matsen-tool/package-lock.json

@@ -21,6 +21,7 @@
         "@ng-bootstrap/ng-bootstrap": "^16.0.0-rc.2",
         "@popperjs/core": "^2.11.8",
         "bootstrap": "^5.3.2",
+        "bootstrap-icons": "^1.11.2",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.2"
@@ -5411,6 +5412,21 @@
         "@popperjs/core": "^2.11.8"
       }
     },
+    "node_modules/bootstrap-icons": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.2.tgz",
+      "integrity": "sha512-TgdiPv+IM9tgDb+dsxrnGIyocsk85d2M7T0qIgkvPedZeoZfyeG/j+yiAE4uHCEayKef2RP05ahQ0/e9Sv75Wg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ]
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

matsen-tool/package.json

@@ -24,6 +24,7 @@
     "@ng-bootstrap/ng-bootstrap": "^16.0.0-rc.2",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.2",
+    "bootstrap-icons": "^1.11.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.2"

matsen-tool/src/app/home/home.component.html

@@ -1,33 +1,60 @@
-<div class="custom-container">
-  <div class="p-4">
+<div class="home-container pb-5">
+    <div class="p-4">
+        <div class="container">
+            <h1>Hi {{ user?.firstName }}!</h1>
+            <p><a routerLink="/users">Manage Users</a></p>
+        </div>
+    </div>
+
     <div class="container">
-        <h1>Hi {{user?.firstName}}!</h1>
-        <p><a routerLink="/users">Manage Users</a></p>
+        <div class="row p-4 d-flex">
+            <div class="col d-flex">
+                <a class="card" routerLink="/users" routerLinkActive="active">
+                    <div class="card-body position-relative bi bi-x-square">
+                        <p class="position-absolute m-0">Users</p>
+                    </div>
+                </a>
+            </div>
+            <div class="col d-flex">
+                <a class="card" routerLink="/users" routerLinkActive="active">
+                    <div class="card-body position-relative">
+                        <p class="position-absolute m-0">Users<br>user</p>
+                    </div>
+                </a>
+            </div>
+            <div class="col d-flex">
+                <a class="card" routerLink="/users" routerLinkActive="active">
+                    <div class="card-body position-relative">
+                        <p class="position-absolute m-0">Users<br>user</p>
+                    </div>
+                </a>
+            </div>
+        </div>
     </div>
-  </div>
-  <div class="container">
-    <div class="row p-4 d-flex">
-      <div class="col d-flex">
-        <a class="card" style="width: 100%;" routerLink="/users" routerLinkActive="active">
-          <div class="card-body">
-            <p>Users<br>user</p>
-          </div>
-        </a>
-      </div>
-      <div class="col d-flex">
-        <a class="card" style="width: 100%;" routerLink="/users" routerLinkActive="active">
-          <div class="card-body">
-            User
-          </div>
-        </a>
-      </div>
-      <div class="col d-flex">
-        <a class="card" style="width: 100%;" routerLink="/users" routerLinkActive="active">
-          <div class="card-body">
-            Users
-          </div>
-        </a>
-      </div>
+
+    <div class="container">
+        <div class="row p-4 d-flex">
+            <div class="col d-flex">
+                <a class="card" routerLink="/users" routerLinkActive="active">
+                    <div class="card-body position-relative">
+                        <p class="position-absolute m-0">Users</p>
+                    </div>
+                </a>
+            </div>
+            <div class="col d-flex">
+                <a class="card" routerLink="/users" routerLinkActive="active">
+                    <div class="card-body position-relative">
+                        <p class="position-absolute m-0">Users<br>user</p>
+                    </div>
+                </a>
+            </div>
+            <div class="col d-flex">
+                <a class="card" routerLink="/users" routerLinkActive="active">
+                    <div class="card-body position-relative">
+                        <p class="position-absolute m-0">Users<br>user</p>
+                    </div>
+                </a>
+            </div>
+        </div>
     </div>
-  </div>
 </div>

matsen-tool/src/app/home/home.component.scss

@@ -0,0 +1,28 @@
+.home-container {
+  max-width: 1100px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.card {
+  width: 100%;
+  text-decoration: none;
+}
+.card-body {
+  min-height: 200px;
+  text-transform: uppercase;
+  text-align: right;
+  &.bi {
+    &:before {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%,-50%);
+      font-size: 50px;
+    }
+  }
+  p {
+    right: 10px;
+    bottom: 10px;
+  }
+}

matsen-tool/src/styles.scss

@@ -13,9 +13,3 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
   text-align: center;
   box-sizing: content-box;
 }
-
-.custom-container {
-  max-width: 1100px;
-  margin-left: auto;
-  margin-right: auto;
-}