Bootstrap Snippet Mobile chat app using HTML CSS 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/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/6.0.0-beta2/css/all.min.css">
<div class="chat-box">
    <div class="chat-list w-100">
        <div class="d-flex justify-content-between chat-list-item">
            <img src="https://ui-avatars.com/api/?name=G+A&size=48&background=random" class="user-img" alt="Gürkan Atik" width="48" height="48">
            <div class="last-msg-info pl-2">
                <div class="d-flex align-items-center justify-content-between w-100">
                    <span class="d-block username">gurkanatik</span>
                    <span class="d-block last-msg-date"> <i class="far fa-clock"></i> 12 min ago</span>
                </div>
                <span class="d-block last-msg text-truncate ">John Doe called, he wants his name back!</span>
            </div>
        </div>
        <div class="d-flex justify-content-between chat-list-item">
            <img src="https://ui-avatars.com/api/?name=O+B&size=48&background=random" class="user-img" alt="Okan Bulgurlu" width="48" height="48">
            <div class="last-msg-info pl-2">
                <div class="d-flex align-items-center justify-content-between w-100">
                    <span class="d-block username">cmokanbulgurlu</span>
                    <span class="d-block last-msg-date"> <i class="far fa-clock"></i> 1 day ago</span>
                </div>
                <span class="d-block last-msg text-truncate ">Carlsen cried yesterday hahahjs</span>
            </div>
        </div>
        <div class="d-flex justify-content-between chat-list-item">
            <img src="https://ui-avatars.com/api/?name=O+S&size=48&background=random" class="user-img" alt="Oliver Sykes" width="48" height="48">
            <div class="last-msg-info pl-2">
                <div class="d-flex align-items-center justify-content-between w-100">
                    <span class="d-block username">oliversykes</span>
                    <span class="d-block last-msg-date"> <i class="far fa-clock"></i> 3 days ago</span>
                </div>
                <span class="d-block last-msg text-truncate w-100">Bro check my latest single. It's dopeeeeeeeeeee</span>
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
    .chat-box,
        .chat-box .chat-list,
        .chat-box .message-box{
            height: 100vh;
            overflow-y: auto;
            position: relative;
            transition: all .3s;
        }
        .chat-box.chat-active .chat-list{
            height: 100%;
            position: absolute;
            top: 0;
            left: -100%;
        }
        .chat-box.chat-active .message-box{
            right: 0;
        }
        .chat-box .chat-list{
            left: 0;
        }
        .chat-box .chat-list .chat-list-item{
            padding: 12px 15px;
            border-bottom: 1px solid #e1e1e1;
        }
        .chat-box .chat-list .chat-list-item:hover{
            cursor: pointer;
            background-color: #f1f1f1;
        }
        .chat-box .chat-list .chat-list-item:last-child{
            border-color: transparent;
        }
        .chat-box .chat-list .chat-list-item .user-img,
        .chat-box .message-box .user-img{
            border-radius: 48px;
        }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
$('.chat-list-item, .go-back').on('click', function (){
    $('.chat-box').toggleClass('chat-active')
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Mobile chat app"
Bootstrap 4.1.1 Snippet by guurkankan

Related: See More

Questions / Comments:

"Mobile chat app" Bootstrap 4.1.1 Snippet by guurkankan

Related: See More

Questions / Comments:

"Mobile chat app"
Bootstrap 4.1.1 Snippet by guurkankan