curso laravel realtime messenger - parte 8 - creacion pantalla chat

en home.blade.php

<b-container>
    <b-row > 
       <b-col cols="4"> 
          <b-form-input class="text-center" type="text" placeholder="Buscar contacto...">
          </b-form-input>
          <b-row class="p-2">
            <b-col cols="12" md="3" class="text-center">
                 <b-img rounded="circle" width="60" height="60" alt="img" class="m-1" src="http://i.pravatar.cc/60" />
       
            </b-col>
            <b-col cols="6" align-self="center" class="d-none d-md-block">
                <p class="mb-1">Juan Ramos</p>
                <p class="text-muted small mb-0">Tu: Hasta luego</p>

            </b-col>
            <b-col cols="3" class="d-none d-md-block">
                 <p class="text-muted small">1:37 pm</p>
            </b-col>

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

la columna donde se encuentra la imagen:
 - centramos la imagen con class="text-center"
- si la pantalla es mediana(o mayor) ocupara 3 columnas de lo contrario ocupara el total de 12
<b-col cols="12" md="3" esto lo hacemos porque queremos que cuando achiquemos la pantalla
las 2 columnas de conversacion y hora desaparezcan, quedando solo el de la imagen y centrada.

para poner el text en gris usamos
 class="text-muted"

para hacer que al achicar la pantalla cuando deje de ser mediana desaparezca los elementos le ponemos
class = "d-none d-md-block"

y dejamos solo la imagen de perfil


para entender mejor lo de ocultar elementos vamos a

https://bootstrap-vue.js.org/docs/reference/utility-classes

y hacemos click en el link de "display utilities", esto nos llevara a
https://getbootstrap.com/docs/4.0/utilities/display/

vamos a la seccion HIding elements

por ejemplo si queremos ocultar el elemento para dispositos muy pequenos (xs)
ponemos .d-none pero lo habilitamos para dispositivos pequenos(sm) en adelante.

del mismo modo, si queremos ocultar el elemento para dispositivos pequenos (sm)
ponemos .d-sm-none y lo habilitamos para dispositivos medianos(md) en adelante .d-md-block

Hidden only on xs	.d-none .d-sm-block
Hidden only on sm	.d-sm-none .d-md-block

y asi podemos seguir haciendo combinaciones
 .d-none .d-md-block .d-xl-none
por ejemplo lo anterior lo ocultara de todos los tamanos menos de mediano(md) y largos(lm)


vamos ahora a poner los rows dentro de un list-group

<b-list-group>
  <b-list-group-item variant="dark">This is a default list group item</b-list-group-item>
  <b-list-group-item >This is a light list group item</b-list-group-item>
  <b-list-group-item variant="secondary">This is a dark list group item</b-list-group-item>
</b-list-group>