Anterioremente vimos como activar la consola de desarrolladores de Google Chrome en Electron.js, lo cual nos viene de perlas para poder desarrollar en HTML con Bootstrap 5, una lista de contactos.

Para la aplicación de chat que estamos llevando a cabo y ya instalado Bootstrap 5 en el proyecto en Electron.js, consta de dos secciones, una para cada columna, una para el listado de contactos y otra para el detalle del chat.

Contactos

Para la columna de contactos, definiremos un listado de UL con sus LI, en la cual, en el LI colocaremos una carta, en pocas palabras, para cada contacto, corresponde a una carta de Bootstrap; aparte de esto, colocaremos datos típicos de un contacto como imagen, nombre, último contacto y cantidad de chats que alineamos usando los flex y sus propiedades relacionadas. Finalmente, usaremos los flexs de HTML para alinear el contenido en filas para la imagen y contenido del último contacto:

<div class="col-4" id="left">
    <ul class="contact list-unstyled mb-0 mt-2">
        <li class="p-2 card ">
            <div class="card-body">
                <div class="d-flex">
                    <div>
                        <img class="rounded-pill me-3" width="60" src="https://randomuser.me/api/portraits/women/56.jpg">
                    </div>
                    <div>
                        <p class="fw-bold mb-0 text-light">Alex Alexis</p>
                        <p class="small text-muted">Lorem ipsum dolor sit amet...</p>
                    </div>
                </div>
            </div>
        </li>
        <li class="p-2 card mt-2">
            <div class="card-body">
                <div class="d-flex">
                    <div>
                        <img class="rounded-pill me-3" width="60" src="https://randomuser.me/api/portraits/men/96.jpg">
                    </div>
                    <div>
                        <p class="fw-bold mb-0 text-light">Eli Barrett</p>
                        <p class="small text-muted">Lorem ipsum dolor sit amet...</p>
                    </div>
                    <div>
                        <p class="small text-muted">5 min ago</p>
                        <span class="badge bg-danger rounded-pill float-end">2</span>
                    </div>
                </div>
            </div>
        </li>
        <li class="p-2 card mt-2">
            <div class="card-body">
                <div class="d-flex">
                    <div>
                        <img class="rounded-pill me-3" width="60" src="https://randomuser.me/api/portraits/men/17.jpg">
                    </div>
                    <div>
                        <p class="fw-bold mb-0 text-light">Ramon Reed</p>
                        <p class="small text-muted">Lorem ipsum dolor sit amet...</p>
                    </div>
                    <div>
                        <p class="small text-muted">2 days ago</p>
                        <span class="badge bg-danger rounded-pill float-end">1</span>
                    </div>
                </div>
            </div>
        </li>
        <li class="p-2 card mt-2">
            <div class="card-body">
                <div class="d-flex">
                    <div>
                        <img class="rounded-pill me-3" width="60" src="https://randomuser.me/api/portraits/women/83.jpg">
                    </div>
                    <div>
                        <p class="fw-bold mb-0 text-light">Kylie Young</p>
                        <p class="small text-muted">Lorem ipsum dolor sit amet...</p>
                    </div>
                    <div>
                        <p class="small text-muted">1 week ago</p>
                        <span class="badge bg-danger rounded-pill float-end">4</span>
                    </div>
                </div>
            </div>
        </li>
    </ul>

</div>

Y un CSS personalizado:

#left {
    background-color: #111;
    ***
}
.contact .card {
    background-color: #333;
}

Y tendremos:

En el siguiente capítulo, veremos como crear el listado de chats en Electron.js con Boostrap 5

Recuerda que el material anterior forma parte sobre mi curso completo sobre Electron.js