enhanced ui and layout

resources/views/people/index.blade.php

@@ -3,28 +3,32 @@
 @section('title', 'Personen')
 
 @section('subnav')
-    <a href='/people/create'>Neue Person</a>
+    <li class="nav-item ml-auto">
+      <a href='/people/create' class="btn btn-outline-success">Neue Person</a>
+    </li>
 @endsection
 
 @section('content')
     <h2>@yield('title')</h2>
-    <table border='1'>
-        <tr>
-            <th>ID</th>
-            <th>Titel</th>
-            <th>Name / Firma</th>
-            <th>Vorname</th>
-            <th>Straße</th>
-            <th>PLZ</th>
-            <th>Ort</th>
-            <th>E-Mail</th>
-            <th>Handy</th>
-            <th>Telefon</th>
-            <th>Aktionen</th>
-        </tr>
+    <table id="datatable" class="table table-striped table-bordered table-hover">
+        <thead>
+          <tr>
+              <th scope="col">ID</th>
+              <th scope="col">Titel</th>
+              <th scope="col">Name / Firma</th>
+              <th scope="col">Vorname</th>
+              <th scope="col">Straße</th>
+              <th scope="col">PLZ</th>
+              <th scope="col">Ort</th>
+              <th scope="col">E-Mail</th>
+              <th scope="col">Handy</th>
+              <th scope="col">Telefon</th>
+              <th scope="col" data-orderable="false">Aktionen</th>
+          </tr>
+        </thead>
         @foreach ($people as $person)
             <tr>
-                <td>{{ $person->id }}</td>
+                <th scope="row">{{ $person->id }}</td>
                 <td>{{ $person->title }}</td>
                 <td>{{ $person->name_or_company }}</td>
                 <td>{{ $person->surname }}</td>
@@ -35,9 +39,11 @@
                 <td>{{ $person->mobile }}</td>
                 <td>{{ $person->phone }}</td>
                 <td>
-                    <a href='/people/{{ $person->id }}'>Anzeigen</a><br />
-                    <a href='/people/{{ $person->id }}/edit'>Bearbeiten</a><br />
-                    <a href='/people/{{ $person->id }}/delete'>Löschen</a>
+                    <div class="btn-group" role="group" aria-label="Basic example">
+                      <a href='/people/{{ $person->id }}' class="btn btn-primary"><i class="fas fa-eye"></i></a>
+                      <a href='/people/{{ $person->id }}/edit' class="btn btn-success"><i class="fas fa-edit"></i></a>
+                      <a href='/people/{{ $person->id }}/delete' class="btn btn-danger"><i class="fas fa-trash"></i></a>
+                    </div>
                 </td>
             </tr>
         @endforeach