<!doctype html>
<html lang="en" data-bs-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="bootstrap-icons.css">
<style>
<!--
30 minutes already.
Thanks for joining!
-->
</style>
</head>
<body>
<div class="container-fluid">
<div class="d-flex">
<div class="col-xl-1 d-none d-xl-block"
style="">
<ul class="list-group list-group-flush w-100 text-secondary">
<li class="list-group-item d-flex justify-content-between align-items-start active">
<div class="me-2">
<div class="fw-bold">
Group Chat 1
</div>
Content for list item
</div>
<small class="text-light">11:40 PM</small>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="me-2">
<div class="fw-bold">Subheading</div>
Content for list item
</div>
<small class="text-light">11:40 PM</small>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="me-2">
<div class="fw-bold">Subheading</div>
Content for list item
</div>
<small class="text-light">11:40 PM</small>
</li>
</ul>
</div>
<div class="d-flex flex-column w-100">
<div class="text-bg-light d-flex justify-content-around w-100"
style="position: fixed; top: 0">
<div class="d-flex flex-column text-center">
<img src=""
class="rounded-circle"
style="height: 40px; width: 40px"
>
<small>
P1
</small>
</div>
<div class="d-flex flex-column text-center">
<img src=""
class="rounded-circle"
style="height: 40px; width: 40px">
<small>
P2
</small>
</div>
<div class="d-flex flex-column text-center">
<img src=""
class="rounded-circle"
style="height: 40px; width: 40px">
<small>
P3
</small>
</div>
</div>
<div class="d-flex flex-column"
>
<div class="d-flex flex-column text-center" style="padding-top: 75px">
<small>
Messages<br>
Today 9:40 PM
</small>
</div>
<div class="d-flex flex-column"
style="margin-right: 60px">
<div class="d-flex">
<img src=""
class="rounded-circle align-self-end me-1 mb-1"
style="height: 30px; width: 30px"
>
<div class="d-flex flex-column">
<small class="text-secondary ms-2">
From
</small>
<span class="text-bg-secondary py-1 px-2 rounded-4 me-auto mb-1">Message 1</span>
<span class="text-bg-secondary py-1 px-2 rounded-4 mb-1 me-auto mb-1">
Lorem ipsum dah dah doo doo we love to text and why don't you? Super fat, super fat, pump pump pump.
<br>
Don't you love the long form text?
</span>
</div>
</div>
</div>
<div class="d-flex flex-column"
style="margin-left: 60px">
<div class="d-flex ms-auto">
<div class="d-flex flex-column text-end">
<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">
Message 1 replied with love baby, heyy. Supa fat supa fat he he he he he supa fat potato hehehe. Fat fat fat. Faaaaat buddy.
</span>
<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">Message 2</span>
</div>
</div>
</div>
<div class="d-flex flex-column"
style="margin-right: 60px">
<div class="d-flex">
<img src=""
class="rounded-circle align-self-end me-1 mb-1"
style="height: 30px; width: 30px"
>
<div class="d-flex flex-column">
<small class="text-secondary ms-2">
From
</small>
<span class="text-bg-secondary py-1 px-2 rounded-4 me-auto mb-1">Message 1</span>
<span class="text-bg-secondary py-1 px-2 rounded-4 mb-1 me-auto mb-1">Lorem ipsum dah dah doo doo we love to text and why don't you?</span>
</div>
</div>
</div>
<div class="d-flex flex-column"
style="margin-left: 60px">
<div class="d-flex ms-auto">
<div class="d-flex flex-column text-end">
<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">
Message 1 replied with love baby, heyy
<br>
Yea we love that long form content!
</span>
<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">Message 2</span>
</div>
</div>
</div>
<div class="d-flex flex-column text-center">
<small>
11:15 PM
</small>
</div>
<div class="d-flex flex-column"
style="margin-right: 60px">
<div class="d-flex">
<img src=""
class="rounded-circle align-self-end me-1 mb-1"
style="height: 30px; width: 30px"
>
<div class="d-flex flex-column">
<small class="text-secondary ms-2">
From
</small>
<span class="text-bg-secondary py-1 px-2 rounded-4 me-auto mb-1">Message 1</span>
<span class="text-bg-secondary py-1 px-2 rounded-4 mb-1 me-auto mb-1">Lorem ipsum dah dah doo doo we love to text and why don't you?</span>
</div>
</div>
</div>
<!-- -->
<div class="d-flex flex-column"
style="margin-right: 60px">
<div class="d-flex">
<img src=""
class="rounded-circle align-self-end me-1 mb-1"
style="height: 30px; width: 30px"
>
<div class="d-flex flex-column">
<small class="text-secondary ms-2">
From
</small>
<span class="text-bg-secondary py-1 px-2 rounded-4 me-auto mb-1">Message 1</span>
<span class="text-bg-secondary py-1 px-2 rounded-4 mb-1 me-auto mb-1">
Lorem ipsum dah dah doo doo we love to text and why don't you?
<br>
Don't you love the long form text?
</span>
</div>
</div>
</div>
<div class="d-flex flex-column"
style="margin-left: 60px">
<div class="d-flex ms-auto">
<div class="d-flex flex-column text-end">
<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">
Message 1 replied with love baby, heyy
</span>
<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">Message 2</span>
</div>
</div>
</div>
<div class="d-flex flex-column"
style="margin-right: 60px">
<div class="d-flex">
<img src=""
class="rounded-circle align-self-end me-1 mb-1"
style="height: 30px; width: 30px"
>
<div class="d-flex flex-column">
<small class="text-secondary ms-2">
From
</small>
<span class="text-bg-secondary py-1 px-2 rounded-4 me-auto mb-1">Message 1</span>
<span class="text-bg-secondary py-1 px-2 rounded-4 mb-1 me-auto mb-1">Lorem ipsum dah dah doo doo we love to text and why don't you?</span>
</div>
</div>
</div>
<div class="d-flex flex-column"
style="margin-left: 60px">
<div class="d-flex ms-auto">
<div class="d-flex flex-column text-end">
<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">
Message 1 replied with love baby, heyy
<br>
Yea we love that long form content!
</span>
<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">Message 2</span>
</div>
</div>
</div>
<div class="d-flex flex-column text-center">
<small>
11:15 PM
</small>
</div>
<div class="d-flex flex-column"
style="margin-right: 60px">
<div class="d-flex">
<img src=""
class="rounded-circle align-self-end me-1 mb-1"
style="height: 30px; width: 30px"
>
<div class="d-flex flex-column">
<small class="text-secondary ms-2">
From
</small>
<span class="text-bg-secondary py-1 px-2 rounded-4 me-auto mb-1">Message 1</span>
<span class="text-bg-secondary py-1 px-2 rounded-4 mb-1 me-auto mb-1">Lorem ipsum dah dah doo doo we love to text and why don't you?</span>
</div>
</div>
</div>
<div class="d-flex flex-column"
style="margin-right: 60px">
<div class="d-flex">
<img src=""
class="rounded-circle align-self-end me-1 mb-1"
style="height: 30px; width: 30px"
>
<div class="d-flex flex-column">
<small class="text-secondary ms-2">
From
</small>
<span class="text-bg-secondary py-1 px-2 rounded-4 me-auto mb-1">Message 1</span>
<span class="text-bg-secondary py-1 px-2 rounded-4 mb-1 me-auto mb-1">
Lorem ipsum dah dah doo doo we love to text and why don't you?
<br>
Don't you love the long form text?
</span>
</div>
</div>
</div>
<div class="d-flex flex-column"
style="margin-left: 60px">
<div class="d-flex ms-auto">
<div class="d-flex flex-column text-end">
<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">
Message 1 replied with love baby, heyy
</span>
<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">Message 2</span>
</div>
</div>
</div>
<div class="d-flex flex-column"
style="margin-right: 60px">
<div class="d-flex">
<img src=""
class="rounded-circle align-self-end me-1 mb-1"
style="height: 30px; width: 30px"
>
<div class="d-flex flex-column">
<small class="text-secondary ms-2">
From
</small>
<span class="text-bg-secondary py-1 px-2 rounded-4 me-auto mb-1">Message 1</span>
<span class="text-bg-secondary py-1 px-2 rounded-4 mb-1 me-auto mb-1">Lorem ipsum dah dah doo doo we love to text and why don't you?</span>
</div>
</div>
</div>
<div class="d-flex flex-column"
style="margin-left: 60px">
<div class="d-flex ms-auto">
<div class="d-flex flex-column text-end">
<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">
Message 1 replied with love baby, heyy
<br>
Yea we love that long form content!
</span>
<span class="text-bg-primary py-1 px-2 rounded-4 mb-1 ms-auto mb-1">Message 2</span>
</div>
</div>
</div>
<div class="d-flex flex-column text-center">
<small>
11:15 PM
</small>
</div>
<div class="d-flex flex-column"
style="margin-right: 60px">
<div class="d-flex">
<img src=""
class="rounded-circle align-self-end me-1 mb-1"
style="height: 30px; width: 30px"
>
<div class="d-flex flex-column">
<small class="text-secondary ms-2">
From
</small>
<span class="text-bg-secondary py-1 px-2 rounded-4 me-auto mb-1">Message 1</span>
<span class="text-bg-secondary py-1 px-2 rounded-4 mb-1 me-auto mb-1">Lorem ipsum dah dah doo doo we love to text and why don't you?</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>