Create a list of chats with Electron.js and Bootstrap 5 9

- Andrés Cruz

En español
Create a list of chats with Electron.js and Bootstrap 5 9

In this section, we are going to create a list of messages or chats, which will be a structure similar to the contact list built in the previous entry:

<div class="col-8" id="right">
    <div class="d-flex chat">
        <div class="w-25 d-flex align-items-end justify-content-end">
            <img class="rounded-pill me-3 avatar" width="60"
                src="https://randomuser.me/api/portraits/men/17.jpg">
        </div>
        <div class="w-75">
            <div class="card">
                <div class="card-body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus reprehenderit
                    voluptatibus cumque, deserunt deleniti consequatur adipisci nisi consequuntur sunt itaque?
                    Sunt aspernatur, ratione labore ipsam enim unde itaque dolorum magni?
                </div>
            </div>
            <p class="small text-muted">8:45 PM</p>
        </div>
    </div>
    <div class="d-flex chat">
        <div class="w-75 ">
            <div class="card bg-dark">
                <div class="card-body text-light">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus reprehenderit
                    voluptatibus cumque, deserunt deleniti consequatur adipisci nisi consequuntur sunt itaque?
                    Sunt aspernatur, ratione labore ipsam enim unde itaque dolorum magni?
                </div>
            </div>
            <p class="small text-muted float-end">9:17 AM</p>
        </div>
        <div class="w-25 d-flex align-items-end">
            <img class="rounded-pill ms-3 avatar" src="https://randomuser.me/api/portraits/men/19.jpg">
        </div>
    </div>
</div>

And we will use the following CSS:

css/style.css

#right {
    background-color: #333;
    ***
}
.chat {
    margin-top: 8px;
}
.chat img.avatar {
    width: 50px;
    height: 50px;
}

With this, it will be as follows:

mensajes
mensajes

The next thing we are going to create is a list of chats.

Remember that the previous material is part of mi curso completo sobre Electron.js

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.