<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="main-container">
<section>
<div class="container">
<div class="row card flex-row">
<div class="col-auto">
<form class="card-header d-none d-lg-block">
<input class="form-control form-control-lg" type="search" placeholder="Search chat" />
</form>
<div class="list-group list-group-chat list-group-flush">
<a href="#" class="list-group-item list-group-item-action active">
<div class="media">
<img alt="Image" src="https://source.unsplash.com/Nm70URdtf3c/336x336" class="avatar avatar-sm m-0" />
<div class="media-body d-none d-lg-block ml-2">
<div class="d-flex justify-content-between align-items-center">
<h6 class="mb-0">Daniel Cameron
<span class="badge badge-indicator badge-success"></span>
</h6>
<div>
<small class="text-muted">1 hour ago</small>
</div>
</div>
<span class="text-muted text-small col-11 p-0 text-truncate d-block">Let's keep those protoypes 100</span>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="media">
<img alt="Image" src="assets/img/avatar-female-3.jpg" class="avatar avatar-sm m-0" />
<div class="media-body d-none d-lg-block ml-2">
<div class="d-flex justify-content-between align-items-center">
<h6 class="mb-0">Mercy Ketteridge</h6>
<div>
