<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<section>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="chat-list-box">
<div class="head-box">
<ul class="list-inline text-left d-inline-block float-left">
<li> <img src="https://i.ibb.co/fCzfFJw/person.jpg" alt="" width="40px"> </li>
</ul>
<ul class="flat-icon list-inline text-right d-inline-block float-right">
<li> <a href="#"> <i class="fas fa-search"></i> </a> </li>
<li> <a href="#"> <i class="fas fa-ellipsis-v"></i> </a> </li>
</ul>
</div>
<div class="chat-person-list">
<ul class="list-inline">
<li> <a href="#" class="flip"> <img src="https://i.ibb.co/6JpcfrK/p4.png" alt=""> <span> Naveen Mandwariya</span> <span class="chat-time">12:00 Am</span> </a> </li>
<li> <a href="#" class="flip"> <img src="https://i.ibb.co/vdyYVvp/p1.png" alt=""> <span> Sunena Daksh </span> <span class="chat-time">11:45 Pm</span> </a> </li>
<li> <a href="#" class="flip"> <img src="https://i.ibb.co/vY406Hp/p3.png" alt=""> <span> Arpit Singh </span> <span class="chat-time">12:15 Pm</span> </a> </li>
<li> <a href="#" class="flip"> <img src="https://i.ibb.co/KhYZwPg/p2.png" alt=""> <span> Arpita </span> <span class="chat-time">09:10 Am</span> </a> </li>
<li> <a href="#" class="flip"> <img src="https://i.ibb.co/ChGLXKZ/p5.png" alt=""> <span> Sorasth parmar </span> <span class="chat-time">02:00 Pm</span> </a> </li>
<li> <a href="#" class="flip"> <img src="https://i.ibb.co/KDZymW5/p6.png" alt=""> <span> Sushmita </span> <span class="chat-time">08:00 Am</span> </a> </li>
</ul>
</div>
</div>
</div>
<div class="col-md-8">
