"chat box scroll bottom always"
Bootstrap 4.1.1 Snippet by mdwaris198

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
<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 ---------->
<div class="container">
<div id="messages">
<div class="msg-left">
Hi..
</div>
<div class="msg-right">
Hello
</div>
<div class="msg-left">
How are you.
</div>
<div class="msg-right">
I am fine and you
</div>
<div class="msg-left">
fine
</div>
<div class="msg-right">
This is chat box
</div>
<div class="msg-left">
wow nice work
wow nice work
wow nice work<br/>
wow nice work
wow nice work
wow nice work
</div>
</div>
</div>
<script>$('#messages').scrollTop($('#messages')[0].scrollHeight);</script>
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{background:#337AB7;}
#messages{
overflow-y: scroll;
max-height: 200px;
margin: 0 200px;
background:#fff;
}
.msg-right{
background:#3BA1EE;
padding:10px;
text-align:right;
color:#fff;
margin:5px;
width:70%;
float:right;
margin-right: 30px;
}
.msg-left{
background:#ddd;
padding:10px;
margin:5px;
width:70%;
float:left;
margin-left: 30px;
}
.msg-left:before {
width: 0;
height: 0;
content: "";
top: 9px;
left: -28px;
position: relative;
border-style: solid;
border-width: 20px 0px 0px 20px;
border-color: #ddd transparent transparent transparent;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit
Message Chat Box
Elegant Bootstrap 4 message chat box template
Animated Vertical Bootstrap Carousel on Mouse scroll and Swipe

Questions / Comments: