"linkedIn type bottom chat ui"
Bootstrap 4.1.1 Snippet by bootstraplily.com

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 ---------->
<script src="https://use.fontawesome.com/f59bcd8580.js"></script>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade" id="my-content" role="tabpanel" aria-labelledby="contact-tab">my content</div>
</div>
<div class="window-main">
<div class="sub-window-header d-flex justify-content-between">
<div>
<div class="font-weight-bold">Praveen Rastogi</div>
<div class="online-circle-two"></div> <div class="active-now2">Active Now</div>
</div>
<div class="close-window-icon">
<i class="fa fa-close"></i>
</div>
</div>
<div class="sub-window-body">
<div class="d-flex message-bar-new">
<div class="message-circle">
<img src="https://bootstraplily.com/demo/message-ui/2397974.png">
</div>
<div class="window-message-text">
<span><span class="font-weight-bold">Dheeraj Singh</span> . <span class="text-black-50">11:26 AM</span></span> <br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sagittis eros, sed fringilla dui. Donec nec nunc non ligula commodo tristique eu eu nibh. Quisque fermentum ante nibh.</p>
</div>
</div>
<div class="d-flex message-bar-new">
<div class="message-circle">
<img src="https://bootstraplily.com/demo/message-ui/awesome-profile-pic-for-girl.jpg">
</div>
<div class="window-message-text">
<span><span class="font-weight-bold">Rajeev Ranjan</span> . <span class="text-black-50">11:40 AM</span></span> <br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a sagittis eros, sed fringilla dui. Donec nec nunc non ligula commodo tristique eu eu nibh. Quisque fermentum ante nibh.</p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body{
}
.window-content-wrapper{
display:none;
}
.popup-bar{
padding:7px;
border-top-left-radius:6px;
cursor:pointer;
}
.profile-circle{
position:relative;
}
.profile-circle img{
width:30px;
height:30px;
border-radius:30px;
}
.bar-text{
opacity:0.7;
font-size:14px;
font-weight:500;
}
.online-circle{
width: 8px;
height: 8px;
background-color: #0F0;
position: absolute;
right: 0;
border-radius: 8px;
top: 0;
border: 2px solid #fff;
}
.message-circle{
position:relative;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
$(".popup-bar").click(function(){
$(".window-content-wrapper").toggle();
});
$(".window-content>.cc1").click(function(){
$(".window-main").toggle();
});
$(".close-window-icon").click(function(){
$(".window-main").hide();
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard
Message Chat Box
Elegant Bootstrap 4 message chat box template
Open in chat (popup-box chat-popup)

Questions / Comments: