Bootstrap Chat app design example

// Include font awesome in head tag
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css'>

CSS Code:

body {
	display: flex;
	justify-content: center;
	font-family: "proxima-nova", "Source Sans Pro", sans-serif;
	font-size: 1em;
	color: #32465a;
}
p,ol,ul,li{
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline
}
ol,ul{list-style:none}
.wrapper {
	float: right;
	background: #e8efef;
	width: 35%;
	height: 600px;
	overflow: hidden;
	position: relative;
}

.wrapper .message-content {
	height: auto;
	min-height: calc(100% - 93px);
	max-height: calc(100% - 93px);
	overflow-y: scroll;
	overflow-x: hidden;
}

.wrapper .message-content::-webkit-scrollbar {
	width: 5px;
	background: transparent;
}
.wrapper .message-content::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.3);
}
.wrapper .message-content ul li {
	display: inline-block;
	clear: both;
	float: left;
	margin: 5px 15px;
	width: calc(100% - 25px);
	font-size: 0.9em;
}
.wrapper .message-content ul li:nth-last-child(1) {
	margin-bottom: 20px;
}
.wrapper .message-content ul li.received img {
	margin: 6px 8px 0 0;
}
.wrapper .message-content ul li.received p {
	background: #fff;
	color: #111;
}
.wrapper .message-content ul li.sent img {
	float: right;
	margin: 6px 0 0 8px;
}
.wrapper .message-content ul li.sent p {
	background: #0174AD;
	float: right;
	color: #fff;
}
.wrapper .message-content ul li img {
	width: 22px;
	border-radius: 50%;
	float: left;
}
.wrapper .message-content ul li p {
	display: inline-block;
	padding: 10px 15px;
	border-radius: 10px;
	max-width: 300px;
}
.wrapper .msg-box {
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: 99;
}
.wrapper .msg-box .wrap {
	position: relative;
}
.wrapper .msg-box .wrap input {

	float: left;
	border: none;
	width: calc(100% - 90px);
	padding: 11px 32px 10px 8px;
	font-size: 0.8em;
	color: #32465a;
}

.wrapper .msg-box .wrap input:focus {
	outline: none;
}

.wrapper .msg-box .wrap button {
	float: right;
	border: none;
	width: 50px;
	padding: 12px 0;
	cursor: pointer;
	background: #0174AD;
	color: #f5f5f5;
}
.wrapper .head-img {
	width: 100%;
	height: 60px;
	line-height: 60px;
	background: #f9f9f9;
}
.wrapper .head-img img {
	width: 40px;
	border-radius: 50%;
	float: left;
	margin: 9px 12px 0 9px;
}
.wrapper .head-img p {
	float: left;
}

HTML Code:

<div class="wrapper">r">
	<div class="head-img">
		<img src="user.png" alt="" />
		<p>John Deo</p>
	</div>
	<div class="message-content">
		<ul>
			<li class="received">
				<img src="user.png" alt="" />
				<p>How the hell am I supposed to get a jury to believe you when I am not even sure that I do?!</p>
			</li>
			<li class="sent">
				<img src="user.png" alt="" />
				<p>When you're backed against the wall, break the god damn thing down.</p>
			</li>
			<li class="received">
				<img src="user.png" alt="" />
				<p>Excuses don't win championships.</p>
			</li>
			<li class="received">
				<img src="user.png" alt="" />
				<p>Oh yeah, did Michael Jordan tell you that?</p>
			</li>
			<li class="sent">
				<img src="user.png" alt="" />
				<p>No, I told him that.</p>
			</li>
			<li class="sent">
				<img src="user.png" alt="" />
				<p>What are your choices when someone puts a gun to your head?</p>
			</li>
			<li class="received">
				<img src="user.png" alt="" />
				<p>What are you talking about? You do what they say or they shoot you.</p>
			</li>
			<li class="sent">
				<img src="user.png" alt="" />
				<p>Wrong. You take the gun, or you pull out a bigger one. Or, you call their bluff. Or, you do any one of a hundred and forty six other things.</p>
			</li>
			 <li class="received">
				<img src="user.png" alt="" />
				<p>Oh yeah, did Michael Jordan tell you that?</p>
			</li>
			<li class="sent">
				<img src="user.png" alt="" />
				<p>No, I told him that.</p>
			</li>
			 <li class="received">
				<img src="user.png" alt="" />
				<p>Excuses don't win championships.</p>
			</li>
			<li class="sent">
				<img src="user.png" alt="" />
				<p>Wrong. You take the gun, or you pull out a bigger one. Or, you call their bluff. Or, you do any one of a hundred and forty six other things.</p>
			</li>
		</ul>
	</div>
	<div class="msg-box">
		<div class="wrap">
			<input type="text" id="message-txt" placeholder="Enter your message..." />
			<button class="submit"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
		</div>
	</div>
</div>

JS Code:

<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
$(".message-content").animate({scrollTop: $(document).height()}, "fast");
  
function sentMessage() {
	message = $("#message-txt").val();
	if ($.trim(message) == '') {
		return false;
	}
	$('
' + message + '
').appendTo($('.message-content ul'));
	$('#message-txt').val(null);
	
	$(".message-content").animate({scrollTop: $(document).height()}, "fast");
}
$('.submit').click(function () {
	sentMessage();
});

$(window).on('keydown', function (e) {
	if (e.which == 13) {
		sentMessage();
		return false;
	}
});