"Chat Window"
Bootstrap 3.2.0 Snippet by ishwarkatwe

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="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading"><b> Ishwar </b> <small>online</small></div>
<div class="panel-body" style="background:url('http://subtlepatterns.com/patterns/geometry2.png');height: 300px; }">
<div class="clearfix"><blockquote class="me pull-right">Hi</blockquote></div>
<div class="clearfix"><blockquote class="you pull-left">Hello</blockquote></div>
<div class="clearfix"><blockquote class="me pull-right">wass up !</blockquote></div>
<div class="clearfix"><blockquote class="you pull-left">Film was up u!</blockquote></div>
<div class="clearfix"><blockquote class="me pull-right">Just outing</blockquote></div>
<div class="clearfix"><blockquote class="you pull-left">Hello how do u do ?</blockquote></div>
<div class="clearfix"><blockquote class="me pull-right">Yup great !</blockquote></div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-warning">
<div class="panel-heading"><h3 class="panel-title"><b> Ishwar </b><small>last seen 10:38 am</small></h3>
</div>
<div class="panel-body" style="background:url('http://subtlepatterns.com/patterns/geometry2.png');height: 300px; }">
<div class="clearfix"><blockquote class="me pull-right">Hi</blockquote></div>
<div class="clearfix"><blockquote class="you pull-left">Hello</blockquote></div>
<div class="clearfix"><blockquote class="me pull-right">wass up !</blockquote></div>
<div class="clearfix"><blockquote class="you pull-left">Film was up u!</blockquote></div>
<div class="clearfix"><blockquote class="me pull-right">Just outing</blockquote></div>
<div class="clearfix"><blockquote class="you pull-left">Hello how do u do ?</blockquote></div>
<div class="clearfix"><blockquote class="me pull-right">Yup great !</blockquote></div>
</div>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.me{
font-size: 14px;
margin: -4px;
border-right: 3px solid #60DF88 !important;
padding: 5px;
background-color: rgb(239, 255, 241);
}
.you{
font-size: 14px;
margin: -4px;
border-left: 3px solid rgb(255, 112, 0) !important;
padding: 5px;
padding-left:10px;
background-color: rgb(247, 247, 214);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

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

Questions / Comments:

Hi there, ishwarkatwe! Great chat window and idea with the background color. There will be a problem when the two users writes a long message, then the messages colors will overlap each other. Fix this by changing your CSS code under .me the "margin: -4px;" to "margin: -2px;" and then under .you "margin: -4px;" to "margin: 2px;".

- Best Regards bilbodog (Casper Thomsen)

Casper Thomsen () - 9 years ago - Reply 0