"Chat Conversation message (part 2. messages list) [minimum css]"
Bootstrap 3.3.0 Snippet by avtonomspb

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/holder/2.4.1/holder.js"></script> <div style="padding: 20px 20% 0 20%; background-color: mediumorchid;"> <div class="chat_list"> <ul class="list-group"> <li class="list-group-item"> <div class="pull-left hidden-xs"> <div> <img class="img-circle" title="User1" alt="User1" data-src="holder.js/40x40/lava"> </div> </div> <small class="pull-right text-muted">10.12.2014 in 12:56</small> <div> <small class="list-group-item-heading text-muted text-primary">User1</small> <p class="list-group-item-text"> Hi! this message is FOR you. </p> </div> </li> <li class="list-group-item"> <div class="pull-left hidden-xs"> <div> <img class="img-circle" title="You" alt="You" data-src="holder.js/40x40/industrial"> </div> </div> <small class="pull-right text-muted">10.12.2014 in 12:57</small> <div> <small class="list-group-item-heading text-muted">You</small> <p class="list-group-item-text"> This response message FROM you. </p> </div> </li> <li class="list-group-item"> <div class="pull-left hidden-xs"> <div> <img class="img-circle" title="User2" alt="User2" data-src="holder.js/40x40/vine"> </div> </div> <small class="pull-right text-muted">10.12.2014 in 12:58</small> <div> <small class="list-group-item-heading text-muted text-primary">User2</small> <p class="list-group-item-text"> Very long text. He correctly displayed. Very long text. He correctly displayed. Very long text. He correctly displayed. Very long text. He correctly displayed. Very long text. He correctly displayed. Very long text. He correctly displayed. Very long text. He correctly displayed. Very long text. He correctly displayed. </p> </div> </li> </ul> </div> </div>
body { font-size: 13px; } @media (max-width: 768px) { body { font-size: 12px; } } .chat_list .list-group-item { padding: 5px 4px; min-height: 50px; } @media (max-width: 768px) { .chat_list .list-group-item { min-height: inherit; } } .chat_list .list-group-item-text { word-wrap: break-word; display: flex; overflow: auto; } .chat_list .pull-left { width: 55px; text-align: center; }

Questions / Comments:

Related: See More