Use Bootstrap to style default layout

Author: michaeldyrynda

src/inertiajs-stubs/resources/js/Shared/Layout.vue

@@ -1,14 +1,41 @@
 <template>
-  <main>
+  <div>
     <header>
-      <inertia-link href="/">Home</inertia-link>
-      <inertia-link href="/about">About</inertia-link>
-      <inertia-link href="/contact">Contact</inertia-link>
+      <nav class="navbar navbar-expand-md navbar-light navbar-laravel">
+        <div class="container">
+          <inertia-link class="navbar-brand" href="/">Inertia.js</inertia-link>
+
+          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+
+          <div class="collapse navbar-collapse" id="mainNav">
+
+            <ul class="navbar-nav mr-auto">
+              <li class="nav-item">
+                <inertia-link class="nav-link" href="/about">About</inertia-link>
+              </li>
+              <li class="nav-item">
+                <inertia-link class="nav-link" href="/contact">Contact</inertia-link>
+              </li>
+            </ul>
+          
+          </div>
+        </div>
+      </nav>
     </header>
-    <article>
-      <slot />
-    </article>
-  </main>
+    <main class="py-4">
+      <div class="container">
+        <div class="row">
+          <div class="col">
+            <article>
+              <slot />
+            </article>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
 </template>
 
 <script>