<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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">
<div class="col-md-8">
<div class="panel panel-primary">
<div class="panel-collapse body" id="collapseOne">
<div class="panel-body">
<ul class="chat">
<li class="left clearfix"><span class="chat-img pull-left">
<img src="http://placehold.it/50/55C1E7/fff&text=U" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">Jan Kowalski</strong> <small class="pull-right text-muted">
<span class="glyphicon glyphicon-time"></span>5 min temu</small>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
dolor, quis ullamcorper ligula sodales.
</p>
</div>
</li>
<li class="right clearfix"><span class="chat-img pull-right">
<img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<small class=" text-muted"><span class="glyphicon glyphicon-time"></span>13 min temu</small>
<strong class="pull-right primary-font">Zbyszek Roziński</strong>
</div>
<p>
Donec enim mi, fringilla ut diam quis, vestibulum hendrerit nunc
</p>
</div>
</li>
<li class="right clearfix"><span class="chat-img pull-right">
<img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<small class=" text-muted"><span class="glyphicon glyphicon-time"></span>5 min temu</small>
<strong class="pull-right primary-font">Robert Nowak</strong>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare
dolor, quis ullamcorper ligula sodales.
</p>
</div>
</li>
<li class="right clearfix"><span class="chat-img pull-right">
<img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<small class=" text-muted"><span class="glyphicon glyphicon-time"></span>4 min temu</small>
<strong class="pull-right primary-font">Piotr Jankowski</strong>
</div>
<p>
Nunc lorem dui, dignissim finibus laoreet id, egestas vitae libero. Proin dictum sapien felis, eget hendrerit sem fringilla vel. Curabitur scelerisque finibus lacus, non malesuada ligula porttitor at.
</p>
</div>
</li>
<li class="right clearfix"><span class="chat-img pull-right">
<img src="http://placehold.it/50/FA6F57/fff&text=ME" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<small class=" text-muted"><span class="glyphicon glyphicon-time"></span>2 min temu</small>
<strong class="pull-right primary-font">Karolina Różańska</strong>
</div>
<p>
Duis a sapien eget orci elementum sagittis a id eros. Nulla dapibus ipsum vitae lorem tempus, nec posuere nunc dapibus. Mauris eget euismod diam. Nam pharetra eros vel rutrum efficitur. Quisque placerat est nec sapien tristique feugiat. Ut laoreet ex vitae est eleifend scelerisque.
</p>
</div>
</li>
</ul>
</div>
<div class="panel-footer">
<div class="input-group">
<input id="btn-input" type="text" class="form-control input-sm" placeholder="Wpisz swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-red btn-sm" id="btn-chat">
Wyślij</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.chat
{
list-style: none;
margin: 0;
padding: 0;
}
.chat li
{
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px dotted #B3A9A9;
}
.chat li.left .chat-body
{
margin-left: 60px;
}
.chat li.right .chat-body
{
margin-right: 60px;
}
.chat li .chat-body p
{
margin: 0;
color: #777777;
}
.panel .slidedown .glyphicon, .chat .glyphicon
{
margin-right: 5px;
}
.panel-body
{
overflow-y: scroll;
height: 350px;
}
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
.btn-red {
color: #ffffff;
background-color: #E96969;
border-color: #B54848;
}
.btn-red:hover,
.btn-red:focus,
.btn-red:active,
.btn-red.active,
.open .dropdown-toggle.btn-red {
color: #ffffff;
background-color: #B54848;
border-color: #B54848;
}
.btn-red:active,
.btn-red.active,
.open .dropdown-toggle.btn-red {
background-image: none;
}
.btn-red.disabled,
.btn-red[disabled],
fieldset[disabled] .btn-red,
.btn-red.disabled:hover,
.btn-red[disabled]:hover,
fieldset[disabled] .btn-red:hover,
.btn-red.disabled:focus,
.btn-red[disabled]:focus,
fieldset[disabled] .btn-red:focus,
.btn-red.disabled:active,
.btn-red[disabled]:active,
fieldset[disabled] .btn-red:active,
.btn-red.disabled.active,
.btn-red[disabled].active,
fieldset[disabled] .btn-red.active {
background-color: #E96969;
border-color: #B54848;
}
.btn-red .badge {
color: #E96969;
background-color: #ffffff;
}
