Bootstrap Snippet 3 Columns Chat using HTML CSS Bootstrap

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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://bootswatch.com/flatly/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
<div class="container">
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
        <div class="row" style="padding:1px;">
            <div class="chat-head">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <button class="btn btn-success"><i class="fa fa-plus-circle"></i> Add Friend</button>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right">
                    <button class="btn btn-success"><i class="fa fa-bars"></i></button>
                </div>
            </div>
            <div class="container-fluid" style="background: white;">
              <div class="row-fluid contact-body-search">                
                <div class="form-group">
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search">
                    <span class="input-group-btn">
                      <button class="btn btn-success" type="button"><i class="fa fa-search"></i></button>
                    </span>
                  </div>
                </div>
              </div>
              <div class="row contact-body-list">
                <div class="list-group">
                  <a href="#" class="list-group-item">
                    <h4 class="list-group-item-heading">User 1</h4>
                    <p class="list-group-item-text"><i>Lagi sibuk nih</i></p>
                  </a>
                  <a href="#" class="list-group-item">
                    <h4 class="list-group-item-heading">User 2</h4>
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 {
        background-image: url("https://s-media-cache-ak0.pinimg.com/236x/ff/d2/65/ffd265ce7dcc0719877217fab0ea1504.jpg");
        background-repeat: repeat;
      }
      .chat-head {
        background: #1abc9c;
        color: white;
        font-weight: bold;
        padding: 2vh 1vh;
      }
      .contact-body {
          background: #fff;
          overflow-y: auto;
      }
      .contact-body-search {
        padding: 3% 1%;
        background: #fff;
      }
      .contact-body-list {
        background: #fff;
        overflow-y: auto;
      }
      .chat-body {
        background: #fff;
        overflow-y: auto;
      }
      .chat-send-body {
        padding: 5% 5%;
        background: #bdc3c7;
      }
      .img-avatar {
          width:auto;
      }
      /*chat*/
      .you-chat {
        position: relative;
        background: #1abc9c;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"3 Columns Chat "
Bootstrap 3.3.0 Snippet by gilangdarmawan

Related: See More

Questions / Comments:

"3 Columns Chat " Bootstrap 3.3.0 Snippet by gilangdarmawan

Related: See More

Questions / Comments:

"3 Columns Chat "
Bootstrap 3.3.0 Snippet by gilangdarmawan