"Elegant Bootstrap 4 message chat box template"
Bootstrap 4.1.1 Snippet by SamimOnline

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 ---------->
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script>
</head>
<!--Coded With Love By Mutiullah Samim-->
<body>
<div class="container-fluid h-100">
<div class="row justify-content-center h-100">
<div class="col-md-4 col-xl-3 chat"><div class="card mb-sm-3 mb-md-0 contacts_card">
<div class="card-header">
<div class="input-group">
<input type="text" placeholder="Search..." name="" class="form-control search">
<div class="input-group-prepend">
<span class="input-group-text search_btn"><i class="fas fa-search"></i></span>
</div>
</div>
</div>
<div class="card-body contacts_body">
<ui class="contacts">
<li class="active">
<div class="d-flex bd-highlight">
<div class="img_cont">
<img src="https://static.turbosquid.com/Preview/001292/481/WV/_D.jpg" class="rounded-circle user_img">
<span class="online_icon"></span>
</div>
<div class="user_info">
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,html{
height: 100%;
margin: 0;
background: #7F7FD5;
background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
}
.chat{
margin-top: auto;
margin-bottom: auto;
}
.card{
height: 500px;
border-radius: 15px !important;
background-color: rgba(0,0,0,0.4) !important;
}
.contacts_body{
padding: 0.75rem 0 !important;
overflow-y: auto;
white-space: nowrap;
}
.msg_card_body{
overflow-y: auto;
}
.card-header{
border-radius: 15px 15px 0 0 !important;
border-bottom: 0 !important;
}
.card-footer{
border-radius: 0 0 15px 15px !important;
border-top: 0 !important;
}
.container{
align-content: center;
}
.search{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
$(document).ready(function(){
$('#action_menu_btn').click(function(){
$('.action_menu').toggle();
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

hi! good job! Tell me it is adapted to the mobile version?

dilyanna (-2) - 5 years ago - Reply -2


hello

almousawi (-4) - 4 years ago - Reply -4


is this free?

sidneyjohn (-12) - 5 years ago - Reply -11


.

alexbito (-2) - 3 years ago - Reply -1


.

alexbito (-2) - 3 years ago - Reply -1


yes

SamimOnline (-1) - 5 years ago - Reply -2


Can I know how to download this template ?

Crazy (-12) - 4 years ago - Reply -12


Hi, How I can get the template? Could you advice please, I just try to set up a chat for a little group of students

Sevoip (-12) - 4 years ago - Reply -12


can u tell how to download this template?

yuvaakash (-13) - 4 years ago - Reply -13


How to download?

aminmousavinejad22 (-21) - 5 years ago - Reply -21


Dalain (-2) - 4 years ago - Reply -2


HI

oppecialidrees22 () - 1 year ago - Reply 0


HI

oppecialidrees22 () - 1 year ago - Reply 0


HI

oppecialidrees22 () - 1 year ago - Reply 0


hello

indraja () - 2 years ago - Reply 0


hai

indraja () - 2 years ago - Reply 0


what is html?

indraja () - 2 years ago - Reply 0


what is html?

indraja () - 2 years ago - Reply 0


how can I run this?

inbar () - 2 years ago - Reply 0


how can I run this?

inbar () - 2 years ago - Reply 0


how can I run this?

inbar () - 2 years ago - Reply 0


how can I run this?

inbar () - 2 years ago - Reply 0


how can I run this?

inbar () - 2 years ago - Reply 0


how can I run this?

inbar () - 2 years ago - Reply 0


how can I run this?

inbar () - 2 years ago - Reply 0


merci pour le travail

maresca () - 3 years ago - Reply 0


merci pour le travail

maresca () - 3 years ago - Reply 0


how to download?

jesna () - 3 years ago - Reply 0


hi

jesna () - 3 years ago - Reply 0


flame32916 () - 3 years ago - Reply 0


como baixa?

UnixH () - 3 years ago - Reply 0


como baixa?

UnixH () - 3 years ago - Reply 0


salut sp comment telechager ce modele de chats la

hidre () - 3 years ago - Reply 0


salut sp comment telechager ce modele de chats la

hidre () - 3 years ago - Reply 0


how to download

dadi () - 4 years ago - Reply 0


hh

sugandhan12345 () - 3 years ago - Reply 0


hh

sugandhan12345 () - 3 years ago - Reply 0


how to download

dadi () - 4 years ago - Reply 0


how can you use this to make a function web app with php

isaac-all () - 4 years ago - Reply 0


how can you use this to make a function web app with php

isaac-all () - 4 years ago - Reply 0


very nice

kumararun () - 5 years ago - Reply 0