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

<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 ----------> <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; }

Related: See More


Questions / Comments: