Bootstrap snippet: messages data widget

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: messages,widget



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="row bootstrap snippets"> <div class="col-md-6 col-xs-12 col-md-offset-3"> <div class="panel" id="messge"> <div class="panel-heading"> <h3 class="panel-title">Message</h3> </div> <div class="panel-body"> <ul class="list-group list-group-full"> <li class="list-group-item"> <div class="media"> <div class="media-left"> <span class="avatar avatar-online"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt=""> <i></i> </span> </div> <div class="media-body"> <h5 class="list-group-item-heading"> <small class="pull-right">3 days ago</small> Herman Beck </h5> <p class="list-group-item-text">Cogitemus tempora tibique probabo...</p> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="media-left"> <span class="avatar avatar-online"> <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt=""> <i></i> </span> </div> <div class="media-body"> <h5 class="list-group-item-heading"> <small class="pull-right">3 days ago</small> Mary Adams </h5> <p class="list-group-item-text">Praeter ingenii illa novum...</p> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="media-left"> <span class="avatar avatar-busy"> <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt=""> <i></i> </span> </div> <div class="media-body"> <h5 class="list-group-item-heading"> <small class="pull-right">3 days ago</small> Caleb Richards </h5> <p class="list-group-item-text">Exquisitis officii tantalo etsi...</p> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="media-left"> <span class="avatar avatar-off"> <img src="http://bootdey.com/img/Content/avatar/avatar4.png" alt=""> <i></i> </span> </div> <div class="media-body"> <h5 class="list-group-item-heading"> <small class="pull-right">3 days ago</small> June Lane </h5> <p class="list-group-item-text">Artes adamare deorum obiecta...</p> </div> </div> </li> </ul> </div> </div> </div> </div>
body{ margin-top:20px; background:#eee; } .avatar { position: relative; display: inline-block; width: 40px; white-space: nowrap; border-radius: 1000px; vertical-align: bottom } .avatar i { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border: 2px solid #fff; border-radius: 100% } .avatar img { width: 100%; max-width: 100%; height: auto; border: 0 none; border-radius: 1000px } .avatar-online i { background-color: #4caf50 } .avatar-off i { background-color: #616161 } .avatar-busy i { background-color: #ff9800 } .avatar-away i { background-color: #f44336 } .avatar-100 { width: 100px } .avatar-100 i { height: 20px; width: 20px } .avatar-lg { width: 50px } .avatar-lg i { height: 12px; width: 12px } .avatar-sm { width: 30px } .avatar-sm i { height: 8px; width: 8px } .avatar-xs { width: 20px } .avatar-xs i { height: 7px; width: 7px } .list-group-item { position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; background-color: #fff; border: 1px solid transparent; }
Dey-Dey

messages data widget

Dey-Dey
  Mar 15th, 07:52
1.3K Views