"Elegant Bootstrap 4 message chat box template"
Bootstrap 4.1.1 Snippet by VisioSoft

<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 ----------> <!DOCTYPE html> <html> <head> <title>Chat</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script> </head> <!--Coded With Love By Mutiullah Samim--> <body> <div class="container-fluid h-100"> <div class="row justify-content-center h-100"> <div class="col-md-4 col-xl-3 chat"><div class="card mb-sm-3 mb-md-0 contacts_card"> <div class="card-header"> <div class="input-group"> <input type="text" placeholder="Search..." name="" class="form-control search"> <div class="input-group-prepend"> <span class="input-group-text search_btn"><i class="fas fa-search"></i></span> </div> </div> </div> <div class="card-body contacts_body"> <ui class="contacts"> <li class="active"> <div class="d-flex bd-highlight"> <div class="img_cont"> <img src="https://devilsworkshop.org/files/2013/01/enlarged-facebook-profile-picture.jpg" class="rounded-circle user_img"> <span class="online_icon"></span> </div> <div class="user_info"> <span>Maryam Naz</span> <p>Maryam is online</p> </div> </div> </li> <li> <div class="d-flex bd-highlight"> <div class="img_cont"> <img src="https://2.bp.blogspot.com/-8ytYF7cfPkQ/WkPe1-rtrcI/AAAAAAAAGqU/FGfTDVgkcIwmOTtjLka51vineFBExJuSACLcBGAs/s320/31.jpg" class="rounded-circle user_img"> <span class="online_icon offline"></span> </div> <div class="user_info"> <span>Sahar Darya</span> <p>Sahar left 7 mins ago</p> </div> </div> </li> <li> <div class="d-flex bd-highlight"> <div class="img_cont"> <img src="https://i.pinimg.com/originals/54/6e/6d/546e6d4c6ce4322e6aa3b2f8ca73ac28.jpg" class="rounded-circle user_img"> <span class="online_icon"></span> </div> <div class="user_info"> <span>Yolduz Rafi</span> <p>Yolduz is online</p> </div> </div> </li> <li> <div class="d-flex bd-highlight"> <div class="img_cont"> <img src="http://profilepicturesdp.com/wp-content/uploads/2018/07/sweet-girl-profile-pictures-9.jpg" class="rounded-circle user_img"> <span class="online_icon offline"></span> </div> <div class="user_info"> <span>Nargis Hawa</span> <p>Nargis left 30 mins ago</p> </div> </div> </li> <li> <div class="d-flex bd-highlight"> <div class="img_cont"> <img src="https://www.freshmorningquotes.com/wp-content/uploads/2015/11/cute-and-beautifull-girls-profile-pictures.jpg" class="rounded-circle user_img"> <span class="online_icon offline"></span> </div> <div class="user_info"> <span>Khadija Mehr</span> <p>Khadija left 50 mins ago</p> </div> </div> </li> </ui> </div> <div class="card-footer"></div> </div></div> <div class="col-md-8 col-xl-6 chat"> <div class="card"> <div class="card-header msg_head"> <div class="d-flex bd-highlight"> <div class="img_cont"> <img src="https://devilsworkshop.org/files/2013/01/enlarged-facebook-profile-picture.jpg" class="rounded-circle user_img"> <span class="online_icon"></span> </div> <div class="user_info"> <span>Chat with Maryam Naz</span> <p>1767 Messages</p> </div> <div class="video_cam"> <span><i class="fas fa-video"></i></span> <span><i class="fas fa-phone"></i></span> </div> </div> <span id="action_menu_btn"><i class="fas fa-ellipsis-v"></i></span> <div class="action_menu"> <ul> <li><i class="fas fa-user-circle"></i> View profile</li> <li><i class="fas fa-users"></i> Add to close friends</li> <li><i class="fas fa-plus"></i> Add to group</li> <li><i class="fas fa-ban"></i> Block</li> </ul> </div> </div> <div class="card-body msg_card_body"> <div class="d-flex justify-content-start mb-4"> <div class="img_cont_msg"> <img src="https://devilsworkshop.org/files/2013/01/enlarged-facebook-profile-picture.jpg" class="rounded-circle user_img_msg"> </div> <div class="msg_cotainer"> Hi, how are you samim? <span class="msg_time">8:40 AM, Today</span> </div> </div> <div class="d-flex justify-content-end mb-4"> <div class="msg_cotainer_send"> Hi Maryam i am good tnx how about you? <span class="msg_time_send">8:55 AM, Today</span> </div> <div class="img_cont_msg"> <img src="https://yt3.ggpht.com/a-/AJLlDp2tfEIfHjdh3f5ukUFjBFykKQaWGmacHNAL3g=s900-mo-c-c0xffffffff-rj-k-no" class="rounded-circle user_img_msg"> </div> </div> <div class="d-flex justify-content-start mb-4"> <div class="img_cont_msg"> <img src="https://devilsworkshop.org/files/2013/01/enlarged-facebook-profile-picture.jpg" class="rounded-circle user_img_msg"> </div> <div class="msg_cotainer"> I am good too, thank you for your chat template <span class="msg_time">9:00 AM, Today</span> </div> </div> <div class="d-flex justify-content-end mb-4"> <div class="msg_cotainer_send"> You welcome Maryam <span class="msg_time_send">9:05 AM, Today</span> </div> <div class="img_cont_msg"> <img src="https://yt3.ggpht.com/a-/AJLlDp2tfEIfHjdh3f5ukUFjBFykKQaWGmacHNAL3g=s900-mo-c-c0xffffffff-rj-k-no" class="rounded-circle user_img_msg"> </div> </div> <div class="d-flex justify-content-start mb-4"> <div class="img_cont_msg"> <img src="https://devilsworkshop.org/files/2013/01/enlarged-facebook-profile-picture.jpg" class="rounded-circle user_img_msg"> </div> <div class="msg_cotainer"> I am looking for your next templates <span class="msg_time">9:07 AM, Today</span> </div> </div> <div class="d-flex justify-content-end mb-4"> <div class="msg_cotainer_send"> Ok, thank you have a good day <span class="msg_time_send">9:10 AM, Today</span> </div> <div class="img_cont_msg"> <img src="https://yt3.ggpht.com/a-/AJLlDp2tfEIfHjdh3f5ukUFjBFykKQaWGmacHNAL3g=s900-mo-c-c0xffffffff-rj-k-no" class="rounded-circle user_img_msg"> </div> </div> <div class="d-flex justify-content-start mb-4"> <div class="img_cont_msg"> <img src="https://devilsworkshop.org/files/2013/01/enlarged-facebook-profile-picture.jpg" class="rounded-circle user_img_msg"> </div> <div class="msg_cotainer"> Bye, see you <span class="msg_time">9:12 AM, Today</span> </div> </div> </div> <div class="card-footer"> <div class="input-group"> <div class="input-group-append"> <span class="input-group-text attach_btn"><i class="fas fa-paperclip"></i></span> </div> <textarea name="" class="form-control type_msg" placeholder="Type your message..."></textarea> <div class="input-group-append"> <span class="input-group-text send_btn"><i class="fas fa-location-arrow"></i></span> </div> </div> </div> </div> </div> </div> </div> </body> </html>
body,html{ height: 100%; margin: 0; background: #7F7FD5; background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); } .chat{ margin-top: auto; margin-bottom: auto; } .card{ height: 500px; border-radius: 15px !important; background-color: rgba(0,0,0,0.4) !important; } .contacts_body{ padding: 0.75rem 0 !important; overflow-y: auto; white-space: nowrap; } .msg_card_body{ overflow-y: auto; } .card-header{ border-radius: 15px 15px 0 0 !important; border-bottom: 0 !important; } .card-footer{ border-radius: 0 0 15px 15px !important; border-top: 0 !important; } .container{ align-content: center; } .search{ border-radius: 15px 0 0 15px !important; background-color: rgba(0,0,0,0.3) !important; border:0 !important; color:white !important; } .search:focus{ box-shadow:none !important; outline:0px !important; } .type_msg{ background-color: rgba(0,0,0,0.3) !important; border:0 !important; color:white !important; height: 60px !important; overflow-y: auto; } .type_msg:focus{ box-shadow:none !important; outline:0px !important; } .attach_btn{ border-radius: 15px 0 0 15px !important; background-color: rgba(0,0,0,0.3) !important; border:0 !important; color: white !important; cursor: pointer; } .send_btn{ border-radius: 0 15px 15px 0 !important; background-color: rgba(0,0,0,0.3) !important; border:0 !important; color: white !important; cursor: pointer; } .search_btn{ border-radius: 0 15px 15px 0 !important; background-color: rgba(0,0,0,0.3) !important; border:0 !important; color: white !important; cursor: pointer; } .contacts{ list-style: none; padding: 0; } .contacts li{ width: 100% !important; padding: 5px 10px; margin-bottom: 15px !important; } .active{ background-color: rgba(0,0,0,0.3); } .user_img{ height: 70px; width: 70px; border:1.5px solid #f5f6fa; } .user_img_msg{ height: 40px; width: 40px; border:1.5px solid #f5f6fa; } .img_cont{ position: relative; height: 70px; width: 70px; } .img_cont_msg{ height: 40px; width: 40px; } .online_icon{ position: absolute; height: 15px; width:15px; background-color: #4cd137; border-radius: 50%; bottom: 0.2em; right: 0.4em; border:1.5px solid white; } .offline{ background-color: #c23616 !important; } .user_info{ margin-top: auto; margin-bottom: auto; margin-left: 15px; } .user_info span{ font-size: 20px; color: white; } .user_info p{ font-size: 10px; color: rgba(255,255,255,0.6); } .video_cam{ margin-left: 50px; margin-top: 5px; } .video_cam span{ color: white; font-size: 20px; cursor: pointer; margin-right: 20px; } .msg_cotainer{ margin-top: auto; margin-bottom: auto; margin-left: 10px; border-radius: 25px; background-color: #82ccdd; padding: 10px; position: relative; } .msg_cotainer_send{ margin-top: auto; margin-bottom: auto; margin-right: 10px; border-radius: 25px; background-color: #78e08f; padding: 10px; position: relative; } .msg_time{ position: absolute; left: 0; bottom: -15px; color: rgba(255,255,255,0.5); font-size: 10px; } .msg_time_send{ position: absolute; right:0; bottom: -15px; color: rgba(255,255,255,0.5); font-size: 10px; } .msg_head{ position: relative; } #action_menu_btn{ position: absolute; right: 10px; top: 10px; color: white; cursor: pointer; font-size: 20px; } .action_menu{ z-index: 1; position: absolute; padding: 15px 0; background-color: rgba(0,0,0,0.5); color: white; border-radius: 15px; top: 30px; right: 15px; display: none; } .action_menu ul{ list-style: none; padding: 0; margin: 0; } .action_menu ul li{ width: 100%; padding: 10px 15px; margin-bottom: 5px; } .action_menu ul li i{ padding-right: 10px; } .action_menu ul li:hover{ cursor: pointer; background-color: rgba(0,0,0,0.2); } @media(max-width: 576px){ .contacts_card{ margin-bottom: 15px !important; } }
$(document).ready(function(){ $('#action_menu_btn').click(function(){ $('.action_menu').toggle(); }); });

Related: See More


Questions / Comments: