Bootstrap Snippet Chat Whatsapp using HTML CSS Bootstrap Javascript

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 ---------->
<!--3rd Party Fonts & Icons-->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container fill">
    <div class="row chat-wrap">
        <!-- Contacts & Conversations -->
        <div class="col-sm-3 panel-wrap">
            <!-- Overlay Menu / Contacts -->
            <div class="col-sm-12 section-wrap collapse" id="Contacts">
                <!--Header-->
                <div class="row header-wrap">
                    <div class="chat-header col-sm-12">
                        <h4>Select a Contact</h4>
                        <div class="header-button">
                            <a class="btn pull-right" href="#Contacts" data-toggle="collapse">
                                <i class="fa fa-close"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <!--Contacts-->
                <div class="row content-wrap">
                    <div class="contact btn">
                        <div class="media-body">
                            <h5 class="media-heading">Walter White</h5>
                        </div>
                    </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
/*********** BODY **************/
/* Change Body Attributes */
html, body {
    font-family: 'Open Sans', serif;
    background-color: blanchedalmond;
    height: 100%;
}
.fill {
    height: 100%;
    padding-top: 5%;
    padding-bottom: 5%;
}
/******************** MAIN WRAPPERS *******************/
/* Main Window - Boxed style */
.chat-wrap {
    height: 100%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-color: white;
    overflow: hidden;
}
/* Panel Wrapper: Side Menu - Content Window */
.panel-wrap {
    height: 100%;
    padding: 0;
}
/* Section Wrapper: Conversations - Contacts - Messages - Details */
.section-wrap {
    height: 100%;
}
/* Header Wrapper */
.header-wrap {
    height: 10%;
}
/* Content Wrapper */
.content-wrap {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
/!* Slide Members Info *!/
$('.info-btn').on('click', function () {
    $("#Messages").toggleClass('col-sm-12 col-sm-9');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Chat Whatsapp"
Bootstrap 3.3.0 Snippet by andelizondo

Related: See More

Questions / Comments:

"Chat Whatsapp" Bootstrap 3.3.0 Snippet by andelizondo

Related: See More

Questions / Comments:

"Chat Whatsapp"
Bootstrap 3.3.0 Snippet by andelizondo