basic bootstrap

angular.json

@@ -36,9 +36,12 @@
             ],
             "styles": [
               "@angular/material/prebuilt-themes/indigo-pink.css",
+              "node_modules/bootstrap5/src/css/bootstrap.min.css",
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/bootstrap5/src/js/bootstrap.bundle.min.js"
+            ]
           },
           "configurations": {
             "production": {

package-lock.json

@@ -18,13 +18,14 @@
         "@angular/platform-browser": "^17.1.0",
         "@angular/platform-browser-dynamic": "^17.1.0",
         "@angular/router": "^17.1.0",
+        "bootstrap5": "^1.1.9",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.3"
       },
       "devDependencies": {
         "@angular-devkit/build-angular": "^17.1.0",
-        "@angular/cli": "^17.1.0",
+        "@angular/cli": "^17.1.1",
         "@angular/compiler-cli": "^17.1.0",
         "@types/jasmine": "~5.1.0",
         "jasmine-core": "~5.1.0",
@@ -5180,6 +5181,11 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
+    "node_modules/bootstrap5": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/bootstrap5/-/bootstrap5-1.1.9.tgz",
+      "integrity": "sha512-XZSujP1vsslV7iUgPHRLobe+rL7pYUvZaK2Erk0r45m00cQZz/No3Ua7cenlCFLN+gOMEWYU+ipa8Ktzz79oVA=="
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -20,13 +20,14 @@
     "@angular/platform-browser": "^17.1.0",
     "@angular/platform-browser-dynamic": "^17.1.0",
     "@angular/router": "^17.1.0",
+    "bootstrap5": "^1.1.9",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^17.1.0",
-    "@angular/cli": "^17.1.0",
+    "@angular/cli": "^17.1.1",
     "@angular/compiler-cli": "^17.1.0",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.1.0",
@@ -37,4 +38,4 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "typescript": "~5.3.2"
   }
-}
+}

src/app/app.component.html

@@ -1,9 +1,25 @@
-<h1>Home NAS Landing</h1>
+<nav class="navbar navbar-expand-lg bg-body-tertiary" >
-<nav>
+  <div class="container-fluid">
-  <ul>
+    <a class="navbar-brand" href="hallo">Navbar</a>
-    <li><a routerLink="/list-links" routerLinkActive="active" ariaCurrentWhenActive="page">Internal Links</a></li>
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
-    <!-- <li><a routerLink="/second-component" routerLinkActive="active" ariaCurrentWhenActive="page">Second Component</a></li> -->
+      <span class="navbar-toggler-icon"></span>
-  </ul>
+    </button>
+    <div class="collapse navbar-collapse" id="navbarNavAltMarkup" data-bs-theme="dark">
+      <div class="navbar-nav">
+
+        <a class="nav-link" routerLink="/list-links" routerLinkActive="active" ariaCurrentWhenActive="page">Internal Links</a>
+
+
+      </div>
+    </div>
+  </div>
 </nav>
+<div class="container-fluid text-center">
 <!-- The routed views render in the <router-outlet>-->
-<router-outlet></router-outlet>
+  <router-outlet></router-outlet>
+</div>
+
+
+<footer class="container-fluid text-center">
+  <p>Footer Text</p>
+</footer>

src/app/list-links/list-links.component.html

@@ -1,7 +1,2 @@
-<mat-grid-list cols="2" rowHeight="2:1">
+<p>works</p>
-  <mat-grid-tile>1</mat-grid-tile>
-  <mat-grid-tile>2</mat-grid-tile>
-  <mat-grid-tile>3</mat-grid-tile>
-  <mat-grid-tile>4</mat-grid-tile>
-</mat-grid-list>
 

src/styles.css

@@ -2,3 +2,34 @@
 
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+ /* Remove the navbar's default margin-bottom and rounded borders */
+ .navbar {
+  margin-bottom: 0;
+  border-radius: 0;
+}
+
+/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
+.row.content {height: 450px}
+
+/* Set gray background color and 100% height */
+.sidenav {
+  padding-top: 20px;
+  background-color: #f1f1f1;
+  height: 100%;
+}
+
+/* Set black background color, white text and some padding */
+footer {
+  background-color: #555;
+  color: white;
+  padding: 15px;
+}
+
+/* On small screens, set height to 'auto' for sidenav and grid */
+@media screen and (max-width: 767px) {
+  .sidenav {
+    height: auto;
+    padding: 15px;
+  }
+  .row.content {height:auto;}
+}