refactor(sockets): Bootstrap buttons

client/src/Sockets.vue

 <template>
   <div>
+    <b-button-group class="mt-lg-3">
+      <b-button @click="pingServer()" variant="warning" size="sm">Ping Server</b-button>
+      <b-button @click="logOn()" variant="success" size="lg">LogOn</b-button>
+      <b-button @click="logOff()" size="lg">LogOff</b-button>
+    </b-button-group>
     <p v-if="isConnected">We're connected to the server!</p>
     <p v-if="!isConnected">We're not connected yet...</p>
 
@@ -11,20 +16,16 @@
         </li>
       </ul>
     </div>
-
-        <button @click="pingServer()">Ping Server</button>
-        <button @click="logOn()">LogOn</button>
-        <button @click="logOff()">LogOff</button>
   </div>
 </template>
 
 <script>
-    export default {
+export default {
   data() {
     return {
       isConnected: false,
       socketMessages: []
-            }
+    };
   },
 
   sockets: {
@@ -54,7 +55,7 @@
       }
     },
     sendMessage(message) {
-                this.$socket.emit('pingServer', message);
+      this.$socket.emit("pingServer", message);
       console.log("Message sent:", message);
 
     },
@@ -66,5 +67,5 @@
       this.socketMessage = [];
     }
   }
-    }
+};
 </script>
\ No newline at end of file