"Message Chat Box"
Bootstrap 4.1.1 Snippet by Saumya1508

Post to Facebook Tweet this

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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 ----------> <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" rel="stylesheet" </head> <body> <div class="container"> <h3 class=" text-center">Messaging</h3> <div class="messaging"> <div class="inbox_msg"> <div class="inbox_people"> <div class="headind_srch"> <div class="recent_heading"> <h4>Recent</h4> </div> <div class="srch_bar"> <div class="stylish-input-group"> <input type="text" class="search-bar" placeholder="Search" > <span class="input-group-addon"> <button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button> </span> </div> </div> </div> <div class="inbox_chat"> <div class="chat_list active_chat"> <div class="chat_people"> <div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div> <div class="chat_ib"> <h5>Dr. Sunil Rajput <span class="chat_date">July 14</span></h5> <p>Since the symptoms are minor, we can cure this by only few medicines .</p> </div> </div> </div> <div class="chat_list"> <div class="chat_people"> <div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div> <div class="chat_ib"> <h5>Dr. Priya Desai <span class="chat_date">July 10</span></h5> <p>Hello! I'm Dr. Priya, How can I help you? </p> </div> </div> </div> <div class="chat_list"> <div class="chat_people"> <div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div> <div class="chat_ib"> <h5>Dr. Aniket <span class="chat_date">July 7</span></h5> <p>You should get yourself tested.</p> </div> </div> </div> <div class="chat_list"> <div class="chat_people"> <div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div> <div class="chat_ib"> <h5>Dr. Sanjay <span class="chat_date">July 7</span></h5> <p>Hello! I'm Dr. Sanjay, how can I help you?</p> </div> </div> </div> <!--<div class="chat_list">--> <!-- <div class="chat_people">--> <!-- <div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>--> <!-- <div class="chat_ib">--> <!-- <h5>Dr. Shreya </h5>--> <!-- <p>Test, which is a new approach to have all solutions --> <!-- astrology under one roof.</p>--> <!-- </div>--> <!-- </div>--> <!--</div>--> <!--<div class="chat_list">--> <!-- <div class="chat_people">--> <!-- <div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>--> <!-- <div class="chat_ib">--> <!-- <h5>Dr. Arjun Ahuja </h5>--> <!-- <p>Test, which is a new approach to have all solutions --> <!-- astrology under one roof.</p>--> <!-- </div>--> <!-- </div>--> <!--</div>--> <div class="chat_list"> <div class="chat_people"> <div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div> <div class="chat_ib"> <h5>DocCare <span class="chat_date">Dec 25</span></h5> <p>Welcome to DocCare! This is our new approach to have all solutions to you health issues under one roof.</p> </div> </div> </div> </div> </div> <div class="mesgs"> <div class="msg_history"> <div class="incoming_msg"> <div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div> <div class="received_msg"> <div class="received_withd_msg"> <p>Your reports show minor infection.</p> <span class="time_date"> 11:01 PM | yesterday</span></div> </div> </div> <div class="outgoing_msg"> <div class="sent_msg"> <p>What should I do now Doctor?</p> <span class="time_date"> 9:00 AM | Today</span> </div> </div> <div class="incoming_msg"> <div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div> <div class="received_msg"> <div class="received_withd_msg"> <p>Don't Worry. I'll prescribe you few medicines.</p> <span class="time_date"> 09:01 AM | Today</span></div> </div> </div> <div class="outgoing_msg"> <div class="sent_msg"> <p>Okay Doctor.</p> <span class="time_date"> 11:01 AM | Today</span> </div> </div> <div class="incoming_msg"> <div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div> <div class="received_msg"> <div class="received_withd_msg"> <p>Since the symptoms are minor, we can cure this by only few medicines.</p> <span class="time_date"> 11:01 AM | Today</span></div> </div> </div> </div> <div class="type_msg"> <div class="input_msg_write"> <input type="text" class="write_msg" placeholder="Type a message" /> <button class="msg_send_btn" type="button"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></button> </div> </div> </div> </div> <p class="text-center top_spac"> Design by <a target="_blank" href="https://www.linkedin.com/in/sunil-rajput-nattho-singh/">Sunil Rajput</a></p> </div></div> </body> </html>
.container{max-width:1100px; margin:auto;} img{ max-width:100%;} .inbox_people { background: #f8f8f8 none repeat scroll 0 0; float: left; overflow: hidden; width: 40%; border-right:10px solid #c4c4c4; } .inbox_msg { border: 1px solid #c4c4c4; clear: both; overflow: hidden; } .top_spac{ margin: 20px 0 0;} .recent_heading {float: left; width:40%;} .srch_bar { display: inline-block; text-align: right; width: 60%; } .headind_srch{ padding:10px 29px 10px 20px; overflow:hidden; border-bottom:1px solid #c4c4c4;} .recent_heading h4 { color: #05728f; font-size: 21px; margin: auto; } .srch_bar input{ border:1px solid #cdcdcd; border-width:0 0 1px 0; width:80%; padding:2px 0 4px 6px; background:none;} .srch_bar .input-group-addon button { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: medium none; padding: 0; color: #707070; font-size: 18px; } .srch_bar .input-group-addon { margin: 0 0 0 -27px;} .chat_ib h5{ font-size:15px; color:#464646; margin:0 0 8px 0;} .chat_ib h5 span{ font-size:13px; float:right;} .chat_ib p{ font-size:14px; color:#989898; margin:auto} .chat_img { float: left; width: 11%; } .chat_ib { float: left; padding: 0 0 0 15px; width: 88%; } .chat_people{ overflow:hidden; clear:both;} .chat_list { border-bottom: 1px solid #c4c4c4; margin: 0; padding: 18px 16px 10px; } .inbox_chat { height: 550px; overflow-y: scroll;} .active_chat{ background:#ebebeb;} .incoming_msg_img { display: inline-block; width: 6%; } .received_msg { display: inline-block; padding: 0 0 0 10px; vertical-align: top; width: 92%; } .received_withd_msg p { background: #ebebeb none repeat scroll 0 0; border-radius: 3px; color: #646464; font-size: 14px; margin: 0; padding: 5px 10px 5px 12px; width: 100%; } .time_date { color: #747474; display: block; font-size: 12px; margin: 8px 0 0; } .received_withd_msg { width: 57%;} .mesgs { float: left; padding: 30px 15px 0 25px; width: 60%; } .sent_msg p { background: #B5EAEA none repeat scroll 0 0; border-radius: 3px; font-size: 14px; margin: 0; color:#fff; padding: 5px 10px 5px 12px; width:100%; } .outgoing_msg{ overflow:hidden; margin:26px 0 26px;} .sent_msg { float: right; width: 46%; } .input_msg_write input { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: medium none; color: #4c4c4c; font-size: 15px; min-height: 48px; width: 100%; } .type_msg {border-top: 1px solid #c4c4c4;position: relative;} .msg_send_btn { background: #05728f none repeat scroll 0 0; border: medium none; border-radius: 50%; color: #fff; cursor: pointer; font-size: 17px; height: 33px; position: absolute; right: 0; top: 11px; width: 33px; } .messaging { padding: 0 0 50px 0;} .msg_history { height: 516px; overflow-y: auto; }

Questions / Comments: