<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="qa-message-list" id="wallmessages"> <div class="message-item" id="m16"> <div class="message-inner message-grey"> <div class="message-head clearfix"> <div class="avatar pull-left"><a href="./index.php?qa=user&qa_1=Oleg+Kolesnichenko"><img src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png"></a></div> <div class="user-detail"> <h5 class="handle">Oleg Kolesnichenko</h5> <div class="post-meta"> <div class="asker-meta"> <span class="qa-message-what"></span> <span class="qa-message-when"> <span class="qa-message-when-data">Jan 21</span> </span> <span class="qa-message-who"> <span class="qa-message-who-pad">by </span> <span class="qa-message-who-data"><a href="./index.php?qa=user&qa_1=Oleg+Kolesnichenko">Oleg Kolesnichenko</a></span> </span> </div> </div> </div> </div> <div class="qa-message-content"> Yo! </div> </div> </div> <div class="message-item" id="m9"> <div class="message-inner"> <div class="message-head clearfix"> <div class="avatar pull-left"><a href="./index.php?qa=user&qa_1=amiya"><img src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png"></a></div> <div class="user-detail"> <h5 class="handle">amiya</h5> <div class="post-meta"> <div class="asker-meta"> <span class="qa-message-what"></span> <span class="qa-message-when"> <span class="qa-message-when-data">Nov 24, 2013</span> </span> <span class="qa-message-who"> <span class="qa-message-who-pad">by </span> <span class="qa-message-who-data"><a href="./index.php?qa=user&qa_1=amiya">amiya</a></span> </span> </div> </div> </div> </div> <div class="qa-message-content"> Nice theme . Excellent one . </div> </div> </div> </div>

.message-item { margin-bottom: 25px; margin-left: 40px; position: relative; } .message-item .message-inner { background: #fff; border: 1px solid #ddd; border-radius: 3px; padding: 10px; position: relative; } .message-grey { background: #f7f7f7 !important; } .message-grey:after { border-right: 10px solid #f7f7f7 !important; } .message-item .message-inner:before { border-right: 10px solid #ddd; border-style: solid; border-width: 10px; color: rgba(0,0,0,0); content: ""; display: block; height: 0; position: absolute; left: -20px; top: 6px; width: 0; } .message-item .message-inner:after { border-right: 10px solid #fff; border-style: solid; border-width: 10px; color: rgba(0,0,0,0); content: ""; display: block; height: 0; position: absolute; left: -18px; top: 6px; width: 0; } .message-item:before { background: #fff; border-radius: 2px; bottom: -30px; box-shadow: 0 0 3px rgba(0,0,0,0.2); content: ""; height: 100%; left: -30px; position: absolute; width: 3px; } .message-item:after { background: #fff; border: 2px solid #ccc; border-radius: 50%; box-shadow: 0 0 5px rgba(0,0,0,0.1); content: ""; height: 15px; left: -36px; position: absolute; top: 10px; width: 15px; } .clearfix:before, .clearfix:after { content: " "; display: table; } .message-item .message-head { border-bottom: 1px solid #eee; margin-bottom: 8px; padding-bottom: 8px; } .message-item .message-head .avatar { margin-right: 20px; } .message-item .message-head .user-detail { overflow: hidden; } .message-item .message-head .user-detail h5 { font-size: 16px; font-weight: bold; margin: 0; } .message-item .message-head .post-meta { float: left; padding: 0 15px 0 0; } .message-item .message-head .post-meta >div { color: #333; font-weight: bold; text-align: right; } .post-meta > div { color: #777; font-size: 12px; line-height: 22px; } .message-item .message-head .post-meta >div { color: #333; font-weight: bold; text-align: right; } .post-meta > div { color: #777; font-size: 12px; line-height: 22px; } .message-head img { min-height: 40px; max-height: 40px; }