<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 ----------> <div class="container"> <div class="qa-message-list" id="wallmessages"> <div class="message-item" id="m16"> <div class="message-inner"> <div class="message-head clearfix"> <div class="message-icon pull-left"><a href="#"><i class="glyphicon glyphicon-check"></i></a></div> <div class="user-detail"> <h5 class="handle">Created Project</h5> <div class="post-type"> <p>Project</p> </div> <div class="post-time"> <p><i class="glyphicon glyphicon-time"></i> 2 Min Ago</p> </div> </div> </div> <div class="qa-message-content"> <p>Admin created Blah Blah Blah, project, as part of the Campaign.</p> </div> </div> </div> <div class="message-item" id="m16"> <div class="message-inner"> <div class="message-head clearfix"> <div class="message-icon pull-left"><a href="#"><i class="glyphicon glyphicon-check"></i></a></div> <div class="user-detail"> <h5 class="handle">Created Project</h5> <div class="post-type"> <p>Project</p> </div> <div class="post-time"> <p><i class="glyphicon glyphicon-time"></i> 2 Min Ago</p> </div> </div> </div> <div class="qa-message-content"> <p>Admin created Blah Blah Blah, project, as part of the Campaign.</p> </div> </div> </div> <div class="message-item" id="m16"> <div class="message-inner"> <div class="message-head clearfix"> <div class="message-icon pull-left"><a href="#"><i class="glyphicon glyphicon-check"></i></a></div> <div class="user-detail"> <h5 class="handle">Created Project</h5> <div class="post-type"> <p>Project</p> </div> <div class="post-time"> <p><i class="glyphicon glyphicon-time"></i> 2 Min Ago</p> </div> </div> </div> <div class="qa-message-content"> <p>Admin created Blah Blah Blah, project, as part of the Campaign.</p> </div> </div> </div> <div class="message-item" id="m16"> <div class="message-inner"> <div class="message-head clearfix"> <div class="message-icon pull-left"><a href="#"><i class="glyphicon glyphicon-check"></i></a></div> <div class="user-detail"> <h5 class="handle">Created Project</h5> <div class="post-type"> <p>Project</p> </div> <div class="post-time"> <p><i class="glyphicon glyphicon-time"></i> 2 Min Ago</p> </div> </div> </div> <div class="qa-message-content"> <p>Admin created Blah Blah Blah, project, as part of the Campaign.</p> </div> </div> </div> <div class="message-item" id="m16"> <div class="message-inner"> <div class="message-head clearfix"> <div class="message-icon pull-left"><a href="#"><i class="glyphicon glyphicon-check"></i></a></div> <div class="user-detail"> <h5 class="handle">Created Project</h5> <div class="post-type"> <p>Project</p> </div> <div class="post-time"> <p><i class="glyphicon glyphicon-time"></i> 2 Min Ago</p> </div> </div> </div> <div class="qa-message-content"> <p>Admin created Blah Blah Blah, project, as part of the Campaign.</p> </div> </div> </div> </div> </div>

.message-item { margin-top: 25px; margin-bottom: 25px; margin-left: 25px; position: relative; } .message-item .message-inner { background: #f7f9fa; border: 1px solid #eff2f3; border-radius: 3px; padding: 10px; position: relative; } .message-item .message-inner:before { border-right: 5px solid #eff2f3; border-style: solid; border-width: 5px; color: rgba(0,0,0,0); content: ""; display: block; height: 0; position: absolute; left: -10px; top: 10px; width: 0; } .message-item .message-inner:after { border-right: 5px solid #f7f9fa; border-style: solid; border-width: 5px; color: rgba(0,0,0,0); content: ""; display: block; height: 0; position: absolute; left: -9px; top: 10px; width: 0; } .message-item:before { background: #eff2f3; border-radius: 2px; bottom: -28px; content: ""; height: 100%; left: -14px; position: absolute; width: 1px; } .message-item:after { background: #fff; border: 1px solid #2e9df7; border-radius: 50%; content: ""; height: 11px; left: -19px; position: absolute; top: 10px; width: 11px; } .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 .message-icon { background-color: #8560a8; padding: 10px 12px; margin-right: 10px; border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } .message-item .message-head .message-icon a i{ color: #fff; font-size: 1.3em; } .message-item .message-head .user-detail { overflow: hidden; } .message-item .message-head .user-detail h5 { font-size: 1.2em; color: #585b5e; margin: 0; margin-bottom: 2px; } .message-item .message-head .post-type >p { color: #8560a8; font-weight: bold; text-transform: uppercase; font-size: .7em; margin: 0; line-height: 17px; } .message-item .message-head .post-time { float: left; } .message-item .message-head .post-time >p { color: #858b8f; text-transform: uppercase; letter-spacing: 1px; font-size: .6em; line-height: 15px; margin: 0; } .message-item .qa-message-content p { text-align: center; color: #585b5e; font-size: .9em; margin: 0; } img { min-height: 40px; max-height: 40px; border-radius: 50%; }