<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" id="bootstrap-css"> <div class="chat-module"> <div class="panel"> <div class="panel-heading"> <i class="fa fa-comment fa-fw"></i> Chat <div class="btn-group pull-right"> <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-chevron-down"></i> </button> <ul class="dropdown-menu slidedown"> <li><a href=""><i class="fa fa-refresh fa-fw"></i> Refresh</a></li> <li><a href=""><i class="fa fa-ok-sign fa-fw"></i> Available</a></li> <li><a href=""><i class="fa fa-remove fa-fw"></i> Busy</a></li> <li><a href=""><i class="fa fa-clock-o fa-fw"></i> Away</a></li> <li class="divider"></li> <li><a href=""><i class="fa fa-off fa-fw"></i> Sign Out</a></li> </ul> </div> </div> <div class="panel-body"> <div class="white-card"> <ul class="chat"> <li class="left clearfix"> <span class="chat-img pull-left"> <img src="http://placehold.it/50/55C1E7/fff&text=U" class="img-circle" alt="" /> </span> <div class="chat-body clearfix"> <div class="header"> <strong class="primary-font">Jack Sparrow</strong> <small class="pull-right text-muted"><i class="fa fa-clock-o fa-fw"></i>12 mins ago</small> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> <li class="right clearfix"> <span class="chat-img pull-right"> <img src="http://placehold.it/50/FA6F57/fff&text=ME" class="img-circle" alt="" /> </span> <div class="chat-body clearfix"> <div class="header"> <small class="text-muted"><i class="fa fa-clock-o fa-fw"></i> 13 mins ago</small> <strong class="pull-right primary-font">Bhaumik Patel</strong> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> <li class="left clearfix"> <span class="chat-img pull-left"> <img src="http://placehold.it/50/55C1E7/fff&text=U" class="img-circle" alt="" /> </span> <div class="chat-body clearfix"> <div class="header"> <strong class="primary-font">Jack Sparrow</strong> <small class="pull-right text-muted"><i class="fa fa-clock-o fa-fw"></i>12 mins ago</small> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> <li class="right clearfix"> <span class="chat-img pull-right"> <img src="http://placehold.it/50/FA6F57/fff&text=ME" class="img-circle" alt="" /> </span> <div class="chat-body clearfix"> <div class="header"> <small class="text-muted"><i class="fa fa-clock-o fa-fw"></i> 13 mins ago</small> <strong class="pull-right primary-font">Bhaumik Patel</strong> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> </ul> </div> </div> <div class="panel-footer"> <div class="input-group"> <input id="btn-input" type="text" class="form-control input-sm" placeholder="Type your message here..." /> <span class="input-group-btn"> <button class="btn btn-warning btn-sm" id="btn-chat"> Send</button> </span> </div> </div> </div> </div>

.chat-module { max-width: 500px; margin: 100px auto; } .chat-module .panel .panel-body { overflow-y: scroll; height: 250px; padding: 10px; } .chat-module .chat { list-style: none; margin: 0; padding: 0; } .chat-module .chat li { padding: 8px; margin: 8px 0; font-size: 12px; border-bottom: 1px dotted #ededed; } .chat-module .chat li:last-child { border: 0; } .chat-module .chat li .chat-img { width: 35px; height: 35px; border-radius: 50%; display: inline-table; } .chat-module .chat li .chat-img img { width: 100%; } .chat-module .chat li .chat-body p { margin: 0; color: #777777; } .chat-module .chat li.left { background: #e6f7f8; } .chat-module .chat li.left .chat-body { margin-left: 45px; } .chat-module .chat li.left .chat-body p { text-align: left; } .chat-module .chat li.right { background: #fbfbfb; } .chat-module .chat li.right .chat-body { margin-right: 45px; } .chat-module .chat li.right .chat-body p { text-align: right; }