<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 id="messages"> <div class="msg-left"> Hi.. </div> <div class="msg-right"> Hello </div> <div class="msg-left"> How are you. </div> <div class="msg-right"> I am fine and you </div> <div class="msg-left"> fine </div> <div class="msg-right"> This is chat box </div> <div class="msg-left"> wow nice work wow nice work wow nice work<br/> wow nice work wow nice work wow nice work </div> </div> </div> <script>$('#messages').scrollTop($('#messages')[0].scrollHeight);</script>

body{background:#337AB7;} #messages{ overflow-y: scroll; max-height: 200px; margin: 0 200px; background:#fff; } .msg-right{ background:#3BA1EE; padding:10px; text-align:right; color:#fff; margin:5px; width:70%; float:right; margin-right: 30px; } .msg-left{ background:#ddd; padding:10px; margin:5px; width:70%; float:left; margin-left: 30px; } .msg-left:before { width: 0; height: 0; content: ""; top: 9px; left: -28px; position: relative; border-style: solid; border-width: 20px 0px 0px 20px; border-color: #ddd transparent transparent transparent; } .msg-right:after { width: 0; height: 0; content: ""; top: 9px; left: 29px; position: relative; border-style: solid; border-width: 20px 20px 00px 0px; border-color: #3BA1EE transparent transparent transparent; }