<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<aside class="sidebar col-md-4">
<div class="sidebar-nav-fixed pull-right affix">
<div class="panel panel-chat shoutbox">
<div class="panel-heading">
<div class="btn-group chat-status">
<button type="button" class="btn btn-inverted btn-xs dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="status-icon icon-online"></span>Online
<span class="sr-only">Change Status</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Online</a></li>
<li><a href="#">Away</a></li>
<li><a href="#">Do Not Disturb</a></li>
<li class="divider"></li>
<li><a href="#">Offline</a></li>
</ul>
</div>
<h3 class="panel-title text-center">Chat</h3>
<button type="button" class="close close-shoutbox" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<ul class="list-group">
<li class="list-group-item">
<div class="profile-avatar tiny pull-left" style="background-image: url(http://lorempixel.com/180/100)"></div>
<h5 class="list-group-item-heading"><a href="#">Johny Bravo</a></h5>
<p class="message-content"><time>09:58</time>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. </p>
</li>
<li class="list-group-item">
<div class="profile-avatar tiny pull-left" style="background-image: url(http://lorempixel.com/180/100)"></div>
<h5 class="list-group-item-heading"><a href="#">Johny Bravo</a></h5>
<p class="message-content"><time>10:00</time>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. </p>
<p class="message-content"><time>10:01</time>I'm in a transitional period so I don't wanna kill you, I wanna help you. </p>
</li>
</ul>
<div class="panel-footer ">
<form class="form-inline">
<div class="form-group">
<textarea class="auto-expand form-control" data-min-rows='1' rows="1"></textarea>
</div>
</form>
</div>
</div>
</div>
</aside>
</div>
</div>
