<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>
<div class="container">
<div class="row mb-4">
<div class="col-12 text-center pt-3">
<h1>Bootstrap Chat Template</h1>
<p>This is a basic bootstrap sorce code for make bootstrap chat box</p>
<h4>You like this snippet ? click like button</h4>
</div>
</div>
<div class="row justify-content-md-center mb-4">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<form id="send-message" class="send-message-form">
<div class="input-group">
<input id="input-me" type="text" name="messages" class="form-control input-sm" placeholder="Type your message here..." />
<span class="input-group-append">
<button class="btn btn-primary" type="submit">Send <i class="fas fa-airplane"></i></button>
</span>
</div>
</form>
</div>
<div class="card-body messages-box">
<ul class="list-unstyled messages-list">
<li class="messages-you clearfix">
<span class="message-img img-circle">
<img src="https://demo.bootstrap.news/bootnews/assets/img/avatar/avatar2.png" alt="User Avatar" class="avatar-sm border rounded-circle">
</span>
<div class="message-body clearfix">
<div class="message-header">
<strong class="messages-title">John Dave</strong>