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="//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();
});