In this post we are give you new nice chat box design using bootstrap 4 and html,css. chat box design with free source code. this is web design chat box. this chat box design like facebook,gmail,google plus. it's a live chat box design. How to design chat box in html and bootstrap ? we are help you.

We allows to free snippets of live chat box design , you can download full code of chat box design bootstrap layout. Here in this post i will give you example of chat box design examples snippet and you will get simple code of html, css and jquery. In facebook chat box design snippet i give you three tab with html, css and js, you can easily get code of chat box design for website layout.


<!doctype html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="custom.css"> </head> <body> <div class="container"> <div class="row pt-3"> <div class="col-lg-3 m-0 chat-main"> <div class="row"> <div class="col-md-12 chat-header rounded-top p-2"> <div class="row"> <div class="col-md-2 image"> <img src="http://nicesnippets.com/demo/man01.png" class="rounded"> </div> <div class="col-md-7 user-detail pt-2"> <h6 class="pt-1">Alex Steve</h6> <i class="fa fa-circle active ml-1" aria-hidden="true"></i> </div> <div class="col-md-3 options text-right pt-2"> <i class="fa fa-ellipsis-h mr-1 hide-chat-box"></i> <i class="fa fa-times hide-chat-box"></i> </div> </div> </div> <div class="col-md-12 chat-content p-0 bg-white border border-top-0"> <ul class="pl-3 pr-3 pt-1 mb-1"> <li class="p-2 mb-1 rounded"> <span class="float-right time">12:00</span> <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </li> <li class="p-2 mb-1 rounded"> <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </li> <li class="p-2 mb-1 rounded"> <p class="m-0">This is the nice one place in world.</p> </li><hr> <li class="p-2 mb-1 rounded bg-info text-white"> <span class="float-right time text-white">12:10</span> <p class="m-0">Good Morning.</p> </li> <li class="p-2 mb-1 rounded"> <span class="float-right time">12:00</span> <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </li> <li class="p-2 mb-1 rounded"> <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </li> <li class="p-2 mb-1 rounded"> <p class="m-0">This is the nice one place in world.</p> </li><hr> <li class="p-2 mb-1 rounded bg-info text-white"> <span class="float-right time text-white">12:10</span> <p class="m-0">Good Morning.</p> </li> </ul> <p class="text-center mb-2 sender font-italic">Stephen</p> <div class="msg-box p-2"> <div class="row"> <div class="col-md-9"> <input type="text" class="form-control" placeholder="message ..."> </div> <div class="col-md-3 pl-0"> <button class="btn btn-success">Send</button> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
.chat-main{ bottom: 0; right:120px; position: fixed; } .chat-header{ background: #E5EFC1; border:1px solid #D7DF71; } .image img{ height: 40px; width: 40px; } .user-detail h6{ display: inline-block; } .user-detail .active{ color: #32B92D; font-size: 12px; } .options i{ color: #a1a1a1; font-size: 19px; cursor: pointer; } .chat-content, .chat-content .sender, .user-detail h6{ font-size: 14px; } .chat-content ul{ height: 260px; overflow-x: scroll; overflow-x: hidden; } .chat-content ul li{ list-style: none; background: #F5F5F5; } .chat-content .msg-box{ background: #e1e1e1; } .chat-content .msg-box .send-btn{ background: #39AEA9; } .chat-content .time{ font-size: 10px; color: #a1a1a1; }
$('.hide-chat-box').click(function(){ $('.chat-content').slideToggle(); });

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post