Bootstrap Snippet Bootstrap 4 Message Chat box template 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/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 ---------->
<!--Designed and written by Harsh Aryan -->
<!DOCTYPE html>
<html>
    <head>
        <link href="" rel="icon">
  <link href="" rel="apple-touch-icon">
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Montserrat:300,400,500,700" rel="stylesheet">
  <!-- Bootstrap CSS File -->
  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    
  <!-- Libraries CSS Files -->
  <link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="lib/animate/animate.min.css" rel="stylesheet">
  <link href="lib/ionicons/css/ionicons.min.css" rel="stylesheet">
  <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
  <link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">
  <!-- Main Stylesheet File -->
  
    </head>
<body>
  
         <!--==========================
                Chats
    ============================-->
    <section id="chatsys" class="chatsys-bg">
      <div class="container" style="margin-bottom: 100px;">
        <header class="section-header">
          <h3>Chats - Designed by Harsh Aryan</h3>
            
        </header>
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: #fff;
  color: #444;
  font-family: "Open Sans", sans-serif;
}
@media (min-width: 992px){
  .search-sec{
      position: relative;
      top: -114px;
      background: rgba(26, 70, 104, 0.51);
  }
}
@media (max-width: 992px){
  .search-sec{
      background: #1A4668;
  }
}
a {
  color: #007bff;
  transition: 0.5s;
}
a:hover,
a:active,
a:focus {
  color: #0b6bd3;
  outline: none;
  text-decoration: none;
}
p {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap 4 Message Chat box template"
Bootstrap 4.1.1 Snippet by Aryanh289

Related: See More

Questions / Comments:

"Bootstrap 4 Message Chat box template" Bootstrap 4.1.1 Snippet by Aryanh289

Related: See More

Questions / Comments:

"Bootstrap 4 Message Chat box template"
Bootstrap 4.1.1 Snippet by Aryanh289