Bootstrap snippet: chat widget message with image

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: chat



<div class="col-md-6 col-lg-7 col-md-offset-3"> <div class="panel panel-default chat-widget"> <div class="panel-heading"> <h3 class="panel-title"><i class="fa fa-comments"></i> Chat</h3> </div> <div class="panel-body"> <div class="message"> <div class="avatar"> <img class="img-circle avatar" alt="chat avatar" src="http://bootdey.com/img/Content/avatar/avatar1.png"> </div> <div class="message-text-wrapper"> <div class="message-text"> Basic panel example awesome one bewsom Basic panel example awesome </div> </div> <p class="time-stamp"><i class="fa fa-check"></i> 5 minute ago</p> </div> <div class="message message-right"> <div class="avatar"> <img class="img-circle avatar" alt="chat avatar" src="http://bootdey.com/img/Content/avatar/avatar2.png"> </div> <div class="message-text-wrapper"> <div class="message-text"> Basic panel example awesome one bewsom Basic panel example awesome </div> </div> <p class="time-stamp"><i class="fa fa-check"></i> 2 minute ago</p> </div> <div class="message"> <div class="avatar"> <img class="img-circle avatar" alt="chat avatar" src="http://bootdey.com/img/Content/avatar/avatar1.png"> </div> <div class="message-text-wrapper"> <div class="message-text"> <a href="#" title="Singapore cityscape" data-gallery=""> <img src="http://lorempixel.com/200/320/nature/3/" alt="singapore pic"></a> </div> </div> <p class="time-stamp"><i class="fa fa-check"></i> 1 minute ago</p> </div> <div class="message message-right"> <div class="avatar"> <img class="img-circle avatar" alt="chat avatar" src="http://bootdey.com/img/Content/avatar/avatar2.png"> </div> <div class="message-text-wrapper"> <div class="message-text"> Basic panel example awesome one bewsom Basic panel example awesome </div> </div> <p class="time-stamp"><i class="fa fa-check"></i> Now</p> </div> </div> <div class="panel-footer"> <div class="avatar"> <img class="img-circle avatar" alt="chat avatar" src="http://bootdey.com/img/Content/avatar/avatar1.png"> </div> <div class="input-group"> <input type="text" placeholder="Press Enter" class="form-control primary"> <span class="input-group-btn"> <button class="btn btn-primary" type="button">Send</button> </span> </div> </div> </div> </div>
body{margin-top:20px; background:#eee; } .chat-widget{ -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.3); box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.3); } .panel-default > .panel-heading { color: #333; background-color: #fcfcfc; border-color: #ddd; border-color: rgba(221,221,221,0.85); } /*Chat widget*/ .chat-widget .message { display:block; margin-bottom:20px; } .chat-widget .message .avatar { width:55px; float:left; } .chat-widget .message.message-right .avatar { width:55px; float:right; } .chat-widget .avatar img { height:40px; width:40px!important; } .chat-widget .message .message-text-wrapper { display:table-cell; width:1%; } .chat-widget .message .message-text { padding:15px; border-radius:4px; border:1px solid #ddd; border:1px solid rgba(221,221,221,0.68); position:relative; width:100%; -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37); box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37); } .chat-widget .message.message-right .message-text { background:#fbfbfb; } .chat-widget .message .message-text img { width:200px; height:150px; } .chat-widget .message .time-stamp { margin-left:55px; } .chat-widget .message.message-right .time-stamp { margin-left:0; margin-right:55px; display:block; text-align:right; } .chat-widget .message .message-text:before,.chat-widget .message .message-text:after { right:100%; top:30px; border:solid transparent; content:" "; height:0; width:0; position:absolute; pointer-events:none; } .chat-widget .message .message-text:before { border-color:rgba(0,0,0,0); border-right-color:#ddd; border-width:10px; margin-top:-19px; } .chat-widget .message .message-text:after { border-color:rgba(213,71,28,0); border-right-color:#fff; border-width:9px; margin-top:-18px; } .chat-widget .message.message-right .message-text:before,.chat-widget .message.message-right .message-text:after { left:100%; top:30px; border:solid transparent; content:" "; height:0; width:0; position:absolute; pointer-events:none; } .chat-widget .message.message-right .message-text:before { border-color:rgba(0,0,0,0); border-left-color:#ddd; border-width:10px; margin-top:-19px; } .chat-widget .message.message-right .message-text:after { border-left-color:#fbfbfb; border-width:9px; margin-top:-18px; } .chat-widget .panel-footer { border:none; background:transparent; margin-top:-20px; } .chat-widget .panel-footer .avatar { width:55px; float:left; margin-top:-2px; } @media (max-width:767px) { label.margin { margin-top:25px; margin-bottom:15px; } }
Dey-Dey

chat widget message with image

Dey-Dey
  Apr 12th, 08:03
1.4K Views