<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> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"> <div class="container"> <div class="row"> <div class="col-md-8"> <div class="message-box"> <div class="head-box-1"> <ul class="msg-box list-inline text-left d-inline-block float-left"> <li> <i class="fas fa-arrow-left" id="back"></i> </li> <li> <img src="https://i.ibb.co/fCzfFJw/person.jpg" alt="" width="40px"> <span> Vikas chaurasia </span> <br> <small class="timee"> 12:45 Pm </small> </li> </ul> <ul class="flat-icon list-inline text-right d-inline-block float-right"> <li> <a href="JavaScript:Void(0);" id="video_chat"> <i class="fas fa-video"></i> </a> </li> <li> <a href="JavaScript:Void(0);" id="open_camera"> <i class="fas fa-camera"></i> </a> </li> <li> <a href="JavaScript:Void(0);" id="dset"> <i class="fas fa-ellipsis-v"></i> </a> <div class="setting-drop"> <ul class="list-inline"> <li> <a href="#"> My Profile</a> </li> <li> <a href="#"> Setting </a> </li> <li> <a href="#"> Privacy Policy </a> </li> <li> <a href="#"> Logout </a> </li> </ul> </div> </li> </ul> </div> <div class="msg_history"> <div class="incoming_msg"> <div class="received_msg"> <div class="received_withd_msg"> <p>Lorem Ipsum is simply dummy text</p> <span class="time_date"> 11:01 AM | June 9</span></div> </div> </div> <div class="outgoing_msg"> <div class="sent_msg"> <p>Lorem Ipsum is simply dummy text</p> <span class="time_date"> 11:01 AM | June 9</span> </div> </div> <div class="incoming_msg"> <div class="received_msg"> <div class="received_withd_msg"> <p>Lorem Ipsum is simply dummy text</p> <span class="time_date"> 11:01 AM | Yesterday</span></div> </div> </div> <div class="outgoing_msg"> <div class="sent_msg"> <p> ok </p> <span class="time_date"> 11:01 AM | Today</span> </div> </div> <div class="incoming_msg"> <div class="received_msg"> <div class="received_withd_msg"> <p> Lorem Ipsum is simply dummy text</p> <span class="time_date"> 11:01 AM | Today</span></div> </div> </div> </div> <div class="video_box" id="video_section"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="video-chat-top"> <div class="video_section"> <img src="https://i.ibb.co/2vtJ3XR/user.png" height="280px" width="280px"/> </div> <div class="video_chat_box"> <ul> <li><i class="fa fa-phone" aria-hidden="true"></i></li> <li><i class="fa fa-phone close_video_chat" aria-hidden="true"></i></li> <li><i class="fa fa-microphone-slash" aria-hidden="true"></i></li> </ul> </div> </div> </div> </div> </div> <div class="send-message"> <form action="" method=""> <input type="text" class="form-control" name="" valu="" id="" placeholder="Type your message here ..."/> <ul class="list-inline"> <li> <a href="JavaScript:Void(0);" id="attach"> <i class="fas fa-paperclip"></i> </a> </li> <li> <i class="fas fa-paper-plane"></i> </li> </ul> </form> </div> </div> </div> </div> </div>

section{ padding-top: 60px; padding-bottom: 60px; background: #f5f5f5; } ::-webkit-scrollbar { width: 2px; } ::-webkit-scrollbar-thumb { background: #000; border-radius: 5px; } .chat-list-box { display: inline-block; width: 100%; background: #fff; box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16); } .flat-icon li{ display: inline-block; padding: 0px 8px; vertical-align: middle; position: relative; top: 7px; } .flat-icon a img { width: 22px; border-radius: unset !important; } ul.list-inline.text-left.d-inline-block.float-left { margin-bottom: 0; } .chat-list-box ul li img { border-radius: 50px; } .message-box{ display: inline-block; width: 100%; background: #fff; box-shadow: 0px 10px 30px 0px rgba(50, 50, 50, 0.16); } .msg-box li{ display:inline-block; padding-left: 10px; } .msg-box img{ border-radius:50px; } .msg-box li span{ padding-left:8px; color:#545454; font-weight:550; } .head-box { display: flow-root; padding: 10px; background: #007bff; } .head-box ul li a{ color:#fff; } .chat-person-list{ padding:14px; } .chat-person-list ul li img{ width:30px; border-radius:50px; } .chat-person-list ul li span { padding-left: 20px; } .chat-person-list ul li { line-height: 55px; } span.chat-time { float: right; font-size: 12px; } .head-box-1{ display: flow-root; padding: 10px; background: #007bff; } .head-box-1 ul li i{ color:#fff; cursor:pointer; } .head-box-1 ul li span{ color:#fff; position:relative; top:-10px; } .msg_history { padding: 10px; height:280px; overflow: overlay; } .incoming_msg_img { display: inline-block; width: 6%; } .timee{ position: absolute; left: 115px; top: 30px; color: #fff;} .received_msg { display: inline-block; padding: 0 0 0 10px; vertical-align: top; width: 92%; } .received_withd_msg { width: 57%; } .received_withd_msg p { background: rgba(0,123,255,.5) none repeat scroll 0 0; border-radius: 3px; color: #ffffff; font-size: 14px; margin: 0; padding: 5px 10px 5px 22px; width: 100%; border-bottom-right-radius: 50px; border-top-left-radius: 50px; } .time_date { color: #747474; display: block; font-size: 12px; margin: 8px 0 0; } .incoming_msg_img img { width: 100%; border-radius: 50px; float: left; } .outgoing_msg { overflow: hidden; margin: 10px 0 10px; } .sent_msg { float: right; width: 46%; } .sent_msg p { background: #ddd; border-radius: 3px; font-size: 14px; margin: 0; color: #333; padding: 5px 10px 5px 22px; width: 100%; border-bottom-right-radius: 50px; border-top-left-radius: 50px; } .chat-person-list ul li a { color: #545454; text-decoration: none; } .setting-drop{ display: none; position: absolute; width: 130px; height: 148px; right: 0; top: 42px; background: #ffffff; color: #545454; box-shadow: 1px 1px 15px 1px #0000001f; } .send-message { padding: 15px; background: #007bff; height: auto; } .send-message textarea:focus { box-shadow: none; outline: none; border-color:#ddd; } .send-message ul li { display: -webkit-inline-box; padding-left: 15px; } .send-message ul li i{color:#0056b3;} .send-message ul li a{color:#0056b3;} .send-message ul { position: absolute; right: 45px; top: 23px; border-left: 1px solid #9c9a9a; } .send-message .form-control { border-radius: 50px; } /*video chat css start*/ #video_section{ display: none; } .video_chat_box { text-align: center; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; } .video_chat_box ul{ padding: 0px; } .video-chat-top { position: relative; } .video_section { text-align: center; } .video_chat_box ul li{ list-style: none; display: inline-block; padding: 6px; margin: 5px; } .video_chat_box ul li i{ font-size: 16px; padding: 10px; border-radius: 50%; color: #000; background: #fff; } .video_chat_box ul li:nth-child(2) i { background: red; color: #fff; transform: rotate(226deg); } #video_section { background-color: #756f6f; } .send-message{ position:relative; } @media only screen and (max-width: 800px) { .message-box { display: none; position:relative; top:-100%; } }

$(document).ready(function(){ $("#dset").click(function(){ $(".setting-drop").toggle('1000'); }); $("#video_chat").click(function(){ $("#video_section").toggle('slow'); $(".msg_history").toggle(' '); }); });