Bootstrap snippet: Social network clean feed list

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: social network,feed,list



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="col-md-7"> <div class="social-feed-separated"> <div class="social-avatar"> <a href=""> <img alt="image" src="http://webapplayers.com/inspinia_admin-v2.5/img/a5.jpg"> </a> </div> <div class="social-feed-box"> <div class="pull-right social-action dropdown"> <button data-toggle="dropdown" class="dropdown-toggle btn-white"> <i class="fa fa-angle-down"></i> </button> <ul class="dropdown-menu m-t-xs"> <li><a href="#">Config</a></li> </ul> </div> <div class="social-avatar"> <a href="#"> Andrew Williams </a> <small class="text-muted">Today 4:21 pm - 12.06.2014</small> </div> <div class="social-body"> <p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Packages and web page editors now use Lorem Ipsum as their default model text. </p> <img src="http://webapplayers.com/inspinia_admin-v2.5/img/gallery/9.jpg" class="img-responsive"> <div class="btn-group"> <button class="btn btn-white btn-xs"><i class="fa fa-thumbs-up"></i> Like this!</button> <button class="btn btn-white btn-xs"><i class="fa fa-comments"></i> Comment</button> <button class="btn btn-white btn-xs"><i class="fa fa-share"></i> Share</button> </div> </div> <div class="social-footer"> <div class="social-comment"> <a href="" class="pull-left"> <img alt="image" src="http://webapplayers.com/inspinia_admin-v2.5/img/a3.jpg"> </a> <div class="media-body"> <a href="#"> Andrew Williams </a> Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words. <br> <a href="#" class="small"><i class="fa fa-thumbs-up"></i> 26 Like this!</a> - <small class="text-muted">12.06.2014</small> </div> </div> <div class="social-comment"> <a href="" class="pull-left"> <img alt="image" src="http://webapplayers.com/inspinia_admin-v2.5/img/a4.jpg"> </a> <div class="media-body"> <a href="#"> Andrew Williams </a> Making this the first true generator on the Internet. It uses a dictionary of. <br> <a href="#" class="small"><i class="fa fa-thumbs-up"></i> 11 Like this!</a> - <small class="text-muted">10.07.2014</small> </div> <div class="social-comment"> <a href="" class="pull-left"> <img alt="image" src="http://webapplayers.com/inspinia_admin-v2.5/img/a7.jpg"> </a> <div class="media-body"> <a href="#"> Andrew Williams </a> Making this the first true generator on the Internet. It uses a dictionary of. <br> <a href="#" class="small"><i class="fa fa-thumbs-up"></i> 11 Like this!</a> - <small class="text-muted">10.07.2014</small> </div> </div> <div class="social-comment"> <a href="" class="pull-left"> <img alt="image" src="http://webapplayers.com/inspinia_admin-v2.5/img/a8.jpg"> </a> <div class="media-body"> <textarea class="form-control" placeholder="Write comment..."></textarea> </div> </div> </div> <div class="social-comment"> <a href="" class="pull-left"> <img alt="image" src="http://webapplayers.com/inspinia_admin-v2.5/img/a6.jpg"> </a> <div class="media-body"> <a href="#"> Andrew Williams </a> Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words. <br> <a href="#" class="small"><i class="fa fa-thumbs-up"></i> 26 Like this!</a> - <small class="text-muted">12.06.2014</small> </div> </div> <div class="social-comment"> <a href="" class="pull-left"> <img alt="image" src="http://webapplayers.com/inspinia_admin-v2.5/img/a7.jpg"> </a> <div class="media-body"> <a href="#"> Andrew Williams </a> Making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words. <br> <a href="#" class="small"><i class="fa fa-thumbs-up"></i> 26 Like this!</a> - <small class="text-muted">12.06.2014</small> </div> </div> <div class="social-comment"> <a href="" class="pull-left"> <img alt="image" src="http://webapplayers.com/inspinia_admin-v2.5/img/a3.jpg"> </a> <div class="media-body"> <textarea class="form-control" placeholder="Write comment..."></textarea> </div> </div> </div> </div> </div> <div class="social-feed-separated"> <div class="social-avatar"> <a href=""> <img alt="image" src="http://webapplayers.com/inspinia_admin-v2.5/img/a8.jpg"> </a> </div> <div class="social-feed-box"> <div class="pull-right social-action dropdown"> <button data-toggle="dropdown" class="dropdown-toggle btn-white"> <i class="fa fa-angle-down"></i> </button> <ul class="dropdown-menu m-t-xs"> <li><a href="#">Config</a></li> </ul> </div> <div class="social-avatar"> <a href="#"> Andrew Williams </a> <small class="text-muted">Today 4:21 pm - 12.06.2014</small> </div> <div class="social-body"> <p> Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. </p> <div class="btn-group"> <button class="btn btn-white btn-xs"><i class="fa fa-thumbs-up"></i> Like this!</button> <button class="btn btn-white btn-xs"><i class="fa fa-comments"></i> Comment</button> <button class="btn btn-white btn-xs"><i class="fa fa-share"></i> Share</button> </div> </div> <div class="social-footer"> <div class="social-comment"> <a href="" class="pull-left"> <img alt="image" src="http://webapplayers.com/inspinia_admin-v2.5/img/a3.jpg"> </a> <div class="media-body"> <a href="#"> Andrew Williams </a> Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words. <br> <a href="#" class="small"><i class="fa fa-thumbs-up"></i> 26 Like this!</a> - <small class="text-muted">12.06.2014</small> </div> </div> <div class="social-comment"> <a href="" class="pull-left"> <img alt="image" src="http://webapplayers.com/inspinia_admin-v2.5/img/a1.jpg"> </a> <div class="media-body"> <a href="#"> Andrew Williams </a> Making this the first true generator on the Internet. It uses a dictionary of. <br> <a href="#" class="small"><i class="fa fa-thumbs-up"></i> 11 Like this!</a> - <small class="text-muted">10.07.2014</small> </div> </div> <div class="social-comment"> <a href="" class="pull-left"> <img alt="image" src="http://webapplayers.com/inspinia_admin-v2.5/img/a4.jpg"> </a> <div class="media-body"> <textarea class="form-control" placeholder="Write comment..."></textarea> </div> </div> </div> </div> </div> <div class="social-feed-separated"> <div class="social-avatar"> <a href=""> <img alt="image" src="http://webapplayers.com/inspinia_admin-v2.5/img/a2.jpg"> </a> </div> <div class="social-feed-box"> <div class="pull-right social-action dropdown"> <button data-toggle="dropdown" class="dropdown-toggle btn-white"> <i class="fa fa-angle-down"></i> </button> <ul class="dropdown-menu m-t-xs"> <li><a href="#">Config</a></li> </ul> </div> <div class="social-avatar"> <a href="#"> Andrew Williams </a> <small class="text-muted">Today 4:21 pm - 12.06.2014</small> </div> <div class="social-body"> <p> Text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. </p> <div class="btn-group"> <button class="btn btn-white btn-xs"><i class="fa fa-thumbs-up"></i> Like this!</button> <button class="btn btn-white btn-xs"><i class="fa fa-comments"></i> Comment</button> <button class="btn btn-white btn-xs"><i class="fa fa-share"></i> Share</button> </div> </div> <div class="social-footer"> <div class="social-comment"> <a href="" class="pull-left"> <img alt="image" src="http://webapplayers.com/inspinia_admin-v2.5/img/a4.jpg"> </a> <div class="media-body"> <textarea class="form-control" placeholder="Write comment..."></textarea> </div> </div> </div> </div> </div> </div> </div>
body{margin-top:20px;} /* Social feed */ .social-feed-separated .social-feed-box { margin-left: 62px; } .social-feed-separated .social-avatar { float: left; padding: 0; } .social-feed-separated .social-avatar img { width: 52px; height: 52px; border: 1px solid #e7eaec; } .social-feed-separated .social-feed-box .social-avatar { padding: 15px 15px 0 15px; float: none; } .social-feed-box { /*padding: 15px;*/ border: 1px solid #e7eaec; background: #fff; margin-bottom: 15px; } .article .social-feed-box { margin-bottom: 0; border-bottom: none; } .article .social-feed-box:last-child { margin-bottom: 0; border-bottom: 1px solid #e7eaec; } .article .social-feed-box p { font-size: 13px; line-height: 18px; } .social-action { margin: 15px; } .social-avatar { padding: 15px 15px 0 15px; } .social-comment .social-comment { margin-left: 45px; } .social-avatar img { height: 40px; width: 40px; margin-right: 10px; } .social-avatar .media-body a { font-size: 14px; display: block; } .social-body { padding: 15px; } .social-body img { margin-bottom: 10px; } .social-footer { border-top: 1px solid #e7eaec; padding: 10px 15px; background: #f9f9f9; } .social-footer .social-comment img { width: 32px; margin-right: 10px; } .social-comment:first-child { margin-top: 0; } .social-comment { margin-top: 15px; } .social-comment textarea { font-size: 12px; } .form-control, .single-line { background-color: #FFFFFF; background-image: none; border: 1px solid #e5e6e7; border-radius: 1px; color: inherit; display: block; padding: 6px 12px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; width: 100%; font-size: 14px; } .ibox { clear: both; margin-bottom: 25px; margin-top: 0; padding: 0; } .ibox.collapsed .ibox-content { display: none; } .ibox.collapsed .fa.fa-chevron-up:before { content: "\f078"; } .ibox.collapsed .fa.fa-chevron-down:before { content: "\f077"; } .ibox:after, .ibox:before { display: table; } .ibox-title { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background-color: #ffffff; border-color: #e7eaec; border-image: none; border-style: solid solid none; border-width: 3px 0 0; color: inherit; margin-bottom: 0; padding: 14px 15px 7px; min-height: 48px; } .ibox-content { background-color: #ffffff; color: inherit; padding: 15px 20px 20px 20px; border-color: #e7eaec; border-image: none; border-style: solid solid none; border-width: 1px 0; } .ibox-footer { color: inherit; border-top: 1px solid #e7eaec; font-size: 90%; background: #ffffff; padding: 10px 15px; }
Dey-Dey

Social network clean feed list

Dey-Dey
  Apr 23rd, 01:14
52 Views