<div class="row wrapper border-bottom white-bg page-heading">
<div class="col-lg-10">
<h2>Social feed</h2>
<ol class="breadcrumb">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a>App views</a>
</li>
<li class="active">
<strong>Social feed</strong>
</li>
</ol>
</div>
<div class="col-lg-2">
</div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-6">
<div class="ibox">
<div class="ibox-content text-center">
<h3 class="m-b-xxs">Social feed style 1</h3>
<small>News full block with incorporate avatar picture</small>
</div>
</div>
<div class="social-feed-box">
<div class="pull-right social-action" uib-dropdown>
<button class="btn-white" uib-dropdown-toggle>
<i class="fa fa-angle-down"></i>
</button>
<ul class="m-t-xs" uib-dropdown-menu>
<li><a href="#">Config</a></li>
</ul>
</div>
<div class="social-avatar">
<a href="" class="pull-left">
<img alt="image" src="img/a1.jpg">
</a>
<div class="media-body">
<a href="#">
Andrew Williams
</a>
<small class="text-muted">Today 4:21 pm - 12.06.2014</small>
</div>
</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>
<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="img/a1.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="img/a2.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="img/a3.jpg">
</a>
<div class="media-body">
<textarea class="form-control" placeholder="Write comment..."></textarea>
</div>
</div>
</div>
</div>
<div class="social-feed-box">
<div class="pull-right social-action" uib-dropdown>
<button class="btn-white" uib-dropdown-toggle>
<i class="fa fa-angle-down"></i>
</button>
<ul class="m-t-xs" uib-dropdown-menu>
<li><a href="#">Config</a></li>
</ul>
</div>
<div class="social-avatar">
<a href="" class="pull-left">
<img alt="image" src="img/a6.jpg">
</a>
<div class="media-body">
<a href="#">
Andrew Williams
</a>
<small class="text-muted">Today 4:21 pm - 12.06.2014</small>
</div>
</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>
<p>
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="img/gallery/11.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="img/a1.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="img/a2.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="img/a8.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="img/a3.jpg">
</a>
<div class="media-body">
<textarea class="form-control" placeholder="Write comment..."></textarea>
</div>
</div>
</div>
</div>
<div class="social-feed-box">
<div class="pull-right social-action" uib-dropdown>
<button class="btn-white" uib-dropdown-toggle>
<i class="fa fa-angle-down"></i>
</button>
<ul class="m-t-xs" uib-dropdown-menu>
<li><a href="#">Config</a></li>
</ul>
</div>
<div class="social-avatar">
<a href="" class="pull-left">
<img alt="image" src="img/a4.jpg">
</a>
<div class="media-body">
<a href="#">
Andrew Williams
</a>
<small class="text-muted">Today 4:21 pm - 12.06.2014</small>
</div>
</div>
<div class="social-body">
<p>
Packages and web page editors now use Lorem Ipsum as their
default model text. Page editors now use Lorem Ipsum as their
default model text.
</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="img/a8.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="img/a3.jpg">
</a>
<div class="media-body">
<textarea class="form-control" placeholder="Write comment..."></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="ibox ">
<div class="ibox-content text-center">
<h3 class="m-b-xxs">Social feed style 2</h3>
<small>News block with separate avatar picture</small>
</div>
</div>
<div class="social-feed-separated">
<div class="social-avatar">
<a href="">
<img alt="image" src="img/a5.jpg">
</a>
</div>
<div class="social-feed-box">
<div class="pull-right social-action" uib-dropdown>
<button class="btn-white" uib-dropdown-toggle>
<i class="fa fa-angle-down"></i>
</button>
<ul class="m-t-xs" uib-dropdown-menu>
<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="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="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="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="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="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="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="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="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="img/a8.jpg">
</a>
</div>
<div class="social-feed-box">
<div class="pull-right social-action" uib-dropdown>
<button class="btn-white" uib-dropdown-toggle>
<i class="fa fa-angle-down"></i>
</button>
<ul class="m-t-xs" uib-dropdown-menu>
<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="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="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="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="img/a2.jpg">
</a>
</div>
<div class="social-feed-box">
<div class="pull-right social-action" uib-dropdown>
<button class="btn-white" uib-dropdown-toggle>
<i class="fa fa-angle-down"></i>
</button>
<ul class="m-t-xs" uib-dropdown-menu>
<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="img/a4.jpg">
</a>
<div class="media-body">
<textarea class="form-control" placeholder="Write comment..."></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Christopher W. Olsen