<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
<div class="row pad-top pad-bottom">
<div class=" col-lg-6 col-md-6 col-sm-6">
<div class="chat-box-div">
<div class="chat-box-head">
GROUP CHAT HISTORY
<div class="btn-group pull-right">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="fa fa-cogs"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><span class="fa fa-map-marker"></span>·Invisible</a></li>
<li><a href="#"><span class="fa fa-comments-o"></span>·Online</a></li>
<li><a href="#"><span class="fa fa-lock"></span>·Busy</a></li>
<li class="divider"></li>
<li><a href="#"><span class="fa fa-circle-o-notch"></span>·Logout</a></li>
</ul>
</div>
</div>
<div class="panel-body chat-box-main">
<div class="chat-box-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="chat-box-name-left">
<img src="assets/img/user.png" alt="bootstrap Chat box user image" class="img-circle" />
- Justine Goliyad
</div>
<hr class="hr-clas" />
