<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 ----------> <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"> <!--start code--> <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> <small class="time-messages text-muted"> <span class="fas fa-time"></span>1 mins ago </small> </div> <p class="messages-p"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> <li class="messages-me clearfix"> <span class="message-img"> <img src="https://demo.bootstrap.news/bootnews/assets/img/avatar/avatar1.png" alt="User Avatar" class="avatar-sm border rounded-circle"> </span> <div class="message-body clearfix"> <div class="message-header"> <strong class="messages-title">Me</strong> <small class="time-messages text-muted"> <span class="fas fa-time"></span> <span class="minutes">1</span> mins ago </small> </div> <p class="messages-p"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> <li class="messages-you clearfix"> <span class="message-img"> <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> <small class="time-messages text-muted"> <span class="fas fa-time"></span>12 mins ago </small> </div> <p class="messages-p"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> <li class="messages-me clearfix"> <span class="message-img"> <img src="https://demo.bootstrap.news/bootnews/assets/img/avatar/avatar1.png" alt="User Avatar" class="avatar-sm border rounded-circle"> </span> <div class="message-body clearfix"> <div class="message-header"> <strong class="messages-title">Me</strong> <small class="time-messages text-muted"> <span class="fas fa-time"></span>12 mins ago </small> </div> <p class="messages-p"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> <li class="messages-you clearfix"> <span class="message-img"> <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> <small class="time-messages text-muted"> <span class="fas fa-time"></span>12 mins ago </small> </div> <p class="messages-p"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales. </p> </div> </li> </ul> </div> </div> <!--end code--> </div> </div> <div class="row mb-4 mt-5"> <div class="col-12 text-center"> <p>Design by Ari Budin <a target="_blank" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Bootstrap.News</a></p> </div> </div> </div>

/*------------------------------------ Messages ------------------------------------*/ .unread { cursor: pointer; background-color: #f4f4f4; } .messages-box { max-height: 28rem; overflow: auto; } .online-circle { border-radius: 5rem; width: 5rem; height: 5rem; } .messages-title { float: right; margin: 0px 5px; } .message-img { float: right; margin: 0px 5px; } .message-header { text-align: right; width: 100%; margin-bottom: 0.5rem; } .text-editor { min-height: 18rem; } .messages-list li.messages-you .messages-title { float: left; } .messages-list li.messages-you .message-img { float: left; } .messages-list li.messages-you p { float: left; text-align: left; } .messages-list li.messages-you .message-header { text-align: left; } .messages-list li p { max-width: 60%; padding: 5px; border: #e6e7e9 1px solid; } .messages-list li.messages-me p { float: right; } .ql-editor p { font-size: 1rem; }

// message js $('#send-message').on('submit', function (event) { event.preventDefault(); var message = $('.messages-me').first().clone(); message.find('p').text($('#input-me').val()); $('#input-me').val(''); message.prependTo('.messages-list'); message.find('.minutes').text("0"); });