Previously we saw how to activate the Google Chrome developer console in Electron.js, which comes in handy to be able to develop a list of contacts in HTML with Bootstrap 5.
For the chat application that we are carrying out and Bootstrap 5 has already been installed in the project in Electron.js, it consists of two sections, one for each column, one for the contact list and another for the chat detail.
Contacts
For the contacts column, we will define a list of ULs with their LIs, in which, in the LI, we will place a card, in short, for each contact, it corresponds to a Bootstrap card; apart from this, we will place typical data of a contact such as image, name, last contact and number of chats that we align using the flexes and their related properties. Finally, we'll use the HTML flexes to align the content in rows for the last contact image and content:
<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>And a custom CSS:
#left {
background-color: #111;
***
}
.contact .card {
background-color: #333;
}And we will have:
In the next chapter, we will see how to create the chat list in Electron.js with Bootstrap 5
Remember that the previous material is part of mi curso completo sobre Electron.js
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter