Bootstrap snippet: twitter feeds

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.



<div class="row"> <div class="col-md-6 col-xs-12 col-md-offset-3"> <div class="panel"> <div class="panel-heading"> <h3 class="panel-title">Twitter Feed</h3> </div> <div class="panel-body"> <div class="form-group"> <textarea class="form-control" placeholder="Enter here for tweet..." rows="3"></textarea> </div> <a href="javascript:void(0)" class="btn btn-info btn-sm pull-right waves-effect waves-light">Tweet</a> <div class="clearfix"></div> <hr class="margin-bottom-10"> <ul class="list-group list-group-dividered list-group-full"> <li class="list-group-item"> <div class="media"> <div class="media-left"> <a class="avatar avatar-online" href="javascript:void(0)"> <img src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="..."> <i></i> </a> </div> <div class="media-body"> <small class="text-muted pull-right">Just now</small> <h4 class="media-heading">@Ramon Dunn</h4> <div>Lorem ipsum Veniam aliquip culpa laboris minim tempor labore commodo officia veniam non in in in.</div> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="media-left"> <a class="avatar avatar-busy" href="javascript:void(0)"> <img src="http://bootdey.com/img/Content/avatar/avatar2.png" alt="..."> <i></i> </a> </div> <div class="media-body"> <small class="text-muted pull-right">38 minutes ago</small> <h4 class="media-heading">@Scott Sanders</h4> <div>Lorem ipsum Laborum sit laborum cillum proident dolore culpa reprehenderit qui enim labore do mollit in.</div> </div> </div> </li> <li class="list-group-item"> <div class="media"> <div class="media-left"> <a class="avatar avatar-online" href="javascript:void(0)"> <img src="http://bootdey.com/img/Content/avatar/avatar3.png" alt="..."> <i></i> </a> </div> <div class="media-body"> <small class="text-muted pull-right">2 hours ago</small> <h4 class="media-heading">@Nina Wells</h4> <div>Lorem ipsum Culpa mollit ex mollit magna dolore dolore dolore tempor velit magna enim ad dolore dolore dolore.</div> </div> </div> </li> </ul> <span class="text-info">163K users active</span> </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; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .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

twitter feeds

Dey-Dey
  Mar 21st, 08:14
1.3K Views