"Responsive Message Chat Box"
Bootstrap 4.1.1 Snippet by mdwaris198

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 ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="inner_body">
<section class="create_projectnw">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12 col-sm-12">
<div class="left_menubx">
<div class="frame">
<div id="sidepanel" class="sidepanel">
<div id="profile">
<div class="wrap">
<img id="profile-img" src="http://emilcarlsson.se/assets/mikeross.png" class="online" alt="" />
<p>Waris</p>
<i class="fa fa-chevron-down expand-button" aria-hidden="true"></i>
<div id="status-options">
<ul>
<li id="status-online" class="active"><span class="status-circle"></span> <p>Online</p></li>
<li id="status-away"><span class="status-circle"></span> <p>Away</p></li>
<li id="status-busy"><span class="status-circle"></span> <p>Busy</p></li>
<li id="status-offline"><span class="status-circle"></span> <p>Offline</p></li>
</ul>
</div>
<div id="expanded">
<label for="twitter"><i class="fa fa-facebook fa-fw" aria-hidden="true"></i></label>
<input name="twitter" type="text" value="mikeross" />
<label for="twitter"><i class="fa fa-twitter fa-fw" aria-hidden="true"></i></label>
<input name="twitter" type="text" value="ross81" />
<label for="twitter"><i class="fa fa-instagram fa-fw" aria-hidden="true"></i></label>
<input name="twitter" type="text" value="mike.ross" />
</div>
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
/*.inner_body{*/
/* padding: 84px 0px 0px;*/
/*}*/
.left_menubx{
box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
border-radius:20px;
}
.contacts ul{
padding:0
}
.contacts ul li{
list-style :none;
}
.common-btn {
display: inline-block;
color: #FFFFFF;
background-color: #32465a;
text-align: center;
border-radius: 30px;
font-size: 14px;
border: none;
text-transform: none;
font-weight: 500;
line-height: normal;
cursor: pointer;
padding: 10px 25px;
min-width: 80px;
box-shadow: none;
}
.common-btn:hover {
-webkit-box-shadow: 0px 7px 14px rgb(0 0 0 / 29%);
box-shadow: 0px 3px 3px rgb(0 0 0 / 16%);
color: #0D0D0D;
background-color: #ffffff;
text-decoration:none;
}
.login_sign {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: