"Message Chat Box"
Bootstrap 4.1.1 Snippet by sunil8107

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 ---------->
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" type="text/css" rel="stylesheet"
</head>
<body>
<div class="container">
<h3 class=" text-center">Messaging</h3>
<div class="messaging">
<div class="inbox_msg">
<div class="inbox_people">
<div class="headind_srch">
<div class="recent_heading">
<h4>Recent</h4>
</div>
<div class="srch_bar">
<div class="stylish-input-group">
<input type="text" class="search-bar" placeholder="Search" >
<span class="input-group-addon">
<button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button>
</span> </div>
</div>
</div>
<div class="inbox_chat">
<div class="chat_list active_chat">
<div class="chat_people">
<div class="chat_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="chat_ib">
<h5>Sunil Rajput <span class="chat_date">Dec 25</span></h5>
<p>Test, which is a new approach to have all solutions
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
.container{max-width:1170px; margin:auto;}
img{ max-width:100%;}
.inbox_people {
background: #f8f8f8 none repeat scroll 0 0;
float: left;
overflow: hidden;
width: 40%; border-right:1px solid #c4c4c4;
}
.inbox_msg {
border: 1px solid #c4c4c4;
clear: both;
overflow: hidden;
}
.top_spac{ margin: 20px 0 0;}
.recent_heading {float: left; width:40%;}
.srch_bar {
display: inline-block;
text-align: right;
width: 60%;
}
.headind_srch{ padding:10px 29px 10px 20px; overflow:hidden; border-bottom:1px solid #c4c4c4;}
.recent_heading h4 {
color: #05728f;
font-size: 21px;
margin: auto;
}
.srch_bar input{ border:1px solid #cdcdcd; border-width:0 0 1px 0; width:80%; padding:2px 0 4px 6px; background:none;}
.srch_bar .input-group-addon button {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
padding: 0;
color: #707070;
font-size: 18px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Black Dashboard React
Elegant Bootstrap 4 message chat box template
Open in chat (popup-box chat-popup)
Collapsible Chat Widget

Questions / Comments:

Can I use this for my client app?

arang (2) - 3 years ago - Reply 2

Yes, mail me for code.

sunil8107 (-1) - 3 years ago - Reply -1

Yes, mail me for code.

sunil8107 (-1) - 3 years ago - Reply 0

Yes, mail me for code.

sunil8107 (-1) - 3 years ago - Reply 0

Perfect!

suneelrajpoot45 (0) - 6 years ago - Reply 0

I agree! Great!

suneelrajpoot43 (1) - 6 years ago - Reply 1

yes

sivanaga444gmail () - 5 years ago - Reply 0

thnks

suneelrajpoot44 (-1) - 6 years ago - Reply 0

Can i use it for free on my clients applications ?

Aloha276 (-4) - 4 years ago - Reply -4

Yes for more info contact me.

sunil8107 (-1) - 3 years ago - Reply 0

how to download

mohamedfaridelsaid (-7) - 5 years ago - Reply -7

how to download it

EbrahimMansour (-9) - 4 years ago - Reply -9

I want to change the design to use grid/flexbox, remove bootstrap, and use it for my client app. Is that OK?

SquareHatLtd () - 2 years ago - Reply 0

I want to change the design to use grid/flexbox, remove bootstrap, and use it for my client app. Is that OK?

SquareHatLtd () - 2 years ago - Reply 0

I want to change the design to use grid/flexbox, remove bootstrap, and use it for my client app. Is that OK?

SquareHatLtd () - 2 years ago - Reply 0

I want to change the design to use grid/flexbox and use it for my client app. Is that OK?

SquareHatLtd () - 2 years ago - Reply 0

nice and great. Can I use this for my client app??

arang (2) - 3 years ago - Reply 0

Can I use this for my client app?

arang (2) - 3 years ago - Reply 0

how do I download it?

OrlandB2045 () - 3 years ago - Reply 0

how do I download it

OrlandB2045 () - 3 years ago - Reply 0

how do I download it

OrlandB2045 () - 3 years ago - Reply 0

how do I download it

OrlandB2045 () - 3 years ago - Reply 0

how do I download it

OrlandB2045 () - 3 years ago - Reply 0

how do I download it

OrlandB2045 () - 3 years ago - Reply 0

Simply awesome

lppranjal () - 3 years ago - Reply 0

Simply awesome

lppranjal () - 3 years ago - Reply 0

Simply awesome

lppranjal () - 3 years ago - Reply 0

Thanks

sunil8107 (-1) - 3 years ago - Reply 0

How to make this design a responsive design

shreyanshjha () - 4 years ago - Reply 0

There is an error in css at line 21:

width: 60%; padding:

unexpected 'padding:'

0-Proxy-0 () - 4 years ago - Reply 0

Solved

sunil8107 (-1) - 3 years ago - Reply 0

Solved

sunil8107 (-1) - 3 years ago - Reply 0

Very simple, and Very good

suunyking1219 () - 4 years ago - Reply 0

Thank you very much. I used about time 3 hour until found this thing.

aomify () - 4 years ago - Reply 0

Hi my name is id I can be used in styling HTML elements to keep from having to override global div classes like "container" or creating unique elements in CSS. You should try using me sometime! I promise, it will keep you from constantly pissing off other classes on other pages.

Love,

id="uniqueId"

noobs2ninjas () - 5 years ago - Reply 0

Feel free to send in your revised version. Thanks

nononoherecomethepeople () - 4 years ago - Reply 0