<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 src="https://d1ts43dypk8bqh.cloudfront.net/v1/avatars/1db9c8f3-366c-46a1-8612-213b17da133d" alt="User1" class="img-circle" width="40" height="40" /> </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 src="https://d1ts43dypk8bqh.cloudfront.net/v1/avatars/1db9c8f3-366c-46a1-8612-213b17da133d" class="no-user-image" width="40" height="40" /> </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 src="https://d1ts43dypk8bqh.cloudfront.net/v1/avatars/7caac381-b2d2-4e16-924d-1c2505ac96f8" alt="User3" class="img-circle" width="40" height="40" /> </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; } .no-user-image img { visibility: hidden; border: 0; }