Bootstrap Snippet Chat Room New using HTML CSS

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/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ---------->
 <!-- Chat Box start-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
    integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> 
            <div id="frame">
              <div id="sidepanel">
                  <div id="top-search">
                <div id="search">
                  <input type="text" placeholder="Search contacts..." />
                   <label for=""><i class="fa fa-search" aria-hidden="true"></i></label>
                </div>
                <button class="btn btn-primary"><i class="fa fa-plus"></i></button>
              </div>
                <div id="contacts">
                  <ul class="list-unstyled">
                    <li class="contact">
                      <div class="wrap">
                        <div class="img-block">
                          <span class="contact-status online"></span><img src="https://mir-s3-cdn-cf.behance.net/user/276/7d903270114907.5a6865b2c984d.jpg" alt="" /></div>
                        
                        <div class="meta">
                          <h5 class="name bold my-0 text-primary">Myrtle Erickson</h5>
                          <p class="preview">They have to improve on time mana...</p>
                        </div>
                      </div>
                    </li>
                    <li class="contact">
                        <div class="wrap">
                          <div class="img-block">
                            <span class="contact-status online"></span><img src="https://mir-s3-cdn-cf.behance.net/user/276/7d903270114907.5a6865b2c984d.jpg" alt="" /></div>
                          
                          <div class="meta">
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
#frame {
    height: 100vh;
    min-height: 300px;
    max-height: 500px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}
div#top-search {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 80px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px
}
#frame #sidepanel {
    float: left;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    border-right: solid 1px #d6dbdf
}
#frame .content .messages ul li.replies {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-flow: row-reverse;
    flex-flow: row-reverse
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Chat Room New"
Bootstrap 3.3.0 Snippet by Tejesh Sharma

Related: See More

Questions / Comments:

"Chat Room New" Bootstrap 3.3.0 Snippet by Tejesh Sharma

Related: See More

Questions / Comments:

"Chat Room New"
Bootstrap 3.3.0 Snippet by Tejesh Sharma