"Feed Tiles v2 ( Now with non-image tile )"
Bootstrap 3.3.0 Snippet by TheRealEwolutions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="row">
<div class="col-md-4">
<div class="card">
<img class="card-img-top img-responsive" src="http://expertik.ewolutions.cz/data.jpg" alt="Card image cap">
<div class="card-img-overlay" style="height:180px;">
<img class="img-circle img-thumbnail" src="http://ewolutions.cz/uploads/profile/photo-thumb-1.png?_r=1428680051" width="64" height="64" alt="Avatar">
<span class="label label-default"><b>Ewwe</b> - <em>9 hours ago</em></span>
</div>
<div class="card-block">
<p class="card-text">This is feed tile with great and awesome image...</p>
<div class="card-text">
<a class="btn btn-sm btn-danger-outline pull-left"><b>+1</b></a>
<a class="btn btn-sm btn-primary pull-right"><i class="fa fa-comments-o"></i> 10</a>
</div>
<div class="clearfix"></div>
</div>
<div class="card-footer text-muted">
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Comment this... :)">
<span class="input-group-btn">
<button class="btn btn-primary-outline" type="button"><i class="fa fa-edit"></i></button>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-title p-l p-t">
<img class="img-circle img-thumbnail" src="http://ewolutions.cz/uploads/profile/photo-thumb-1.png?_r=1428680051" width="64" height="64" alt="Avatar">
<span class="label label-default"><b>Ewwe</b> - <em>6 hours ago</em></span>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*!
* Bootstrap v4.0.0-alpha (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
@charset "UTF-8";
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: