"bootstrap chat template"
Bootstrap 4.1.1 Snippet by aribudin

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 ---------->
<div class="container">
<div class="row mb-4">
<div class="col-12 text-center pt-3">
<h1>Bootstrap Chat Template</h1>
<p>This is a basic bootstrap sorce code for make bootstrap chat box</p>
<h4>You like this snippet ? click like button</h4>
</div>
</div>
<div class="row justify-content-md-center mb-4">
<div class="col-md-6">
<!--start code-->
<div class="card">
<div class="card-header">
<form id="send-message" class="send-message-form">
<div class="input-group">
<input id="input-me" type="text" name="messages" class="form-control input-sm" placeholder="Type your message here..." />
<span class="input-group-append">
<button class="btn btn-primary" type="submit">Send <i class="fas fa-airplane"></i></button>
</span>
</div>
</form>
</div>
<div class="card-body messages-box">
<ul class="list-unstyled messages-list">
<li class="messages-you clearfix">
<span class="message-img img-circle">
<img src="https://demo.bootstrap.news/bootnews/assets/img/avatar/avatar2.png" alt="User Avatar" class="avatar-sm border rounded-circle">
</span>
<div class="message-body clearfix">
<div class="message-header">
<strong class="messages-title">John Dave</strong>
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
/*------------------------------------
Messages
------------------------------------*/
.unread {
cursor: pointer;
background-color: #f4f4f4;
}
.messages-box {
max-height: 28rem;
overflow: auto;
}
.online-circle {
border-radius: 5rem;
width: 5rem;
height: 5rem;
}
.messages-title {
float: right;
margin: 0px 5px;
}
.message-img {
float: right;
margin: 0px 5px;
}
.message-header {
text-align: right;
width: 100%;
margin-bottom: 0.5rem;
}
.text-editor {
min-height: 18rem;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
// message js
$('#send-message').on('submit', function (event) {
event.preventDefault();
var message = $('.messages-me').first().clone();
message.find('p').text($('#input-me').val());
$('#input-me').val('');
message.prependTo('.messages-list');
message.find('.minutes').text("0");
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: