curso laravel realtime messenger parte 3 - adaptando login a bootstrap-vue

originalmente tenemos:
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">

donde col-md-8 significa que el sistema de grilla de 12 columnas. el cuerpo va a ocupar 8 y va a usarse 2 columnas vacias a ambos lados. para que de esa manera quede centrado.

reemplazar por:
<b-container>
    <b-row> 
       <b-col>
       </b-col>
       <b-col cols="8"> 
       </b-col>
       <b-col>
       </b-col>
    </b-row>
</b-container>

o mejor por:
<b-container>
  <b-row align-h="center"> 
      <b-col cols="8"> 
         ...
      </b-col>
  </b-row>
</b-container>

lo que esta dentro del b-col cols="8" 

<div class="panel panel-default">

            <div class="panel-heading">Login</div>

            <div class="panel-body">

             //----aqui esta el formulario

            </div>

</div>

lo reemplazaremos por el componente b-card

<b-card header="featured"
header-tag="header"
footer="Card Footer"
footer-tag="footer"
title="Title">
    <p class="card-text">Header and footers using props.</p>
    <b-button href="#" variant="primary">Go somewhere</b-button>
</b-card>